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

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

@@ -0,0 +1,239 @@
+import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  IgxLinearGaugeComponent,
+  IgxLinearGraphRangeComponent,
+  LinearGraphNeedleShape
+} from 'igniteui-angular-gauges';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class <%=ClassName%>Component implements AfterViewInit {
+  public needleShape = LinearGraphNeedleShape
+
+  @ViewChild('linearGauge', { static: true })
+  public linearGauge!: IgxLinearGaugeComponent;
+
+  public ngAfterViewInit(): void {
+    // enabling animation duration (in milliseconds)
+    this.linearGauge.transitionDuration = 500;
+    this.animateToGauge3();
+  }
+
+  public animateToGauge3(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 0;
+    this.linearGauge.maximumValue = 100;
+    this.linearGauge.value = 50;
+    this.linearGauge.interval = 10;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 10;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Needle;
+    this.linearGauge.needleBrush = '#79797a';
+    this.linearGauge.needleOutline = '#ffffffff';
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 5;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 30;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 30;
+    range2.endValue = 70;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 70;
+    range3.endValue = 100;
+
+    this.linearGauge.rangeBrushes = ['#9FB328', '#438C47', '#3F51B5'];
+    this.linearGauge.rangeOutlines = ['#9FB328', '#438C47', '#3F51B5'];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+    this.linearGauge.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for(let i = 0; i <this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = '#ffffff';
+    this.linearGauge.scaleOutline = '#dbdbdb';
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = '#ffffff';
+    this.linearGauge.backingOutline = '#d1d1d1';
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+
+
+  public animateToGauge2(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 100;
+    this.linearGauge.maximumValue = 200;
+    this.linearGauge.value = 150;
+    this.linearGauge.interval = 20;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 20;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Triangle;
+    this.linearGauge.needleBrush = '#79797a';
+    this.linearGauge.needleOutline = '#ffffffff';
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 4;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 125;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 125;
+    range2.endValue = 150;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 150;
+    range3.endValue = 175;
+    const range4 = new IgxLinearGraphRangeComponent();
+    range4.startValue = 175;
+    range4.endValue = 200;
+
+    this.linearGauge.rangeBrushes = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.linearGauge.rangeOutlines = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+    this.linearGauge.ranges.add(range3);
+    this.linearGauge.ranges.add(range4);
+
+    // setting extent of all gauge ranges
+    for(let i = 0; i <this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = '#ffffff';
+    this.linearGauge.scaleOutline = '#dbdbdb';
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = '#ffffff';
+    this.linearGauge.backingOutline = '#d1d1d1';
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+
+  public animateToGauge1(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 0;
+    this.linearGauge.maximumValue = 80;
+    this.linearGauge.value = 60;
+    this.linearGauge.interval = 20;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 20;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Trapezoid;
+    this.linearGauge.needleBrush = '#79797a';
+    this.linearGauge.needleOutline = '#ffffffff';
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 5;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+
+    this.linearGauge.rangeBrushes = ['#a4bd29', '#F86232'];
+    this.linearGauge.rangeOutlines = ['#a4bd29', '#F86232'];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for(let i = 0; i <this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = '#ffffff';
+    this.linearGauge.scaleOutline = '#dbdbdb';
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = '#ffffff';
+    this.linearGauge.backingOutline = '#d1d1d1';
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+}

package/igx-ts-legacy/linear-gauge/default/index.d.ts

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

package/igx-ts-legacy/linear-gauge/default/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Linear Gauge"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "linear-gauge";
+        this.projectType = "igx-ts";
+        this.name = "Linear Gauge";
+        this.description = "IgxLinearGauge with different animations.";
+        this.dependencies = [
+            {
+                import: ["IgxLinearGaugeModule"],
+                from: "igniteui-angular-gauges"
+            }
+        ];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0"];
+    }
+}
+module.exports = new IgxLinearGaugeTemplate();

package/igx-ts-legacy/linear-gauge/index.d.ts

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

package/igx-ts-legacy/linear-gauge/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxLinearGaugeComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Linear Gauge";
+        this.group = "Gauges";
+        this.description = `value compared against a scale and one or more ranges.`;
+    }
+}
+module.exports = new IgxLinearGaugeComponent();

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

@@ -0,0 +1,32 @@
+<p>igx-list component with filtering.</p>
+<p>You can read more about configuring the igx-list component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/list/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/list" target="_blank">official
+    documentation</a>.
+</p>
+<igx-input-group type="search" class="search">
+  <igx-prefix>
+    <igx-icon>search</igx-icon>
+  </igx-prefix>
+  <input #search igxInput placeholder="Search Contacts" [(ngModel)]="searchContact">
+  <igx-suffix *ngIf="search.value.length > 0" (click)="searchContact = ''">
+    <igx-icon>clear</igx-icon>
+  </igx-suffix>
+</igx-input-group>
+<igx-list>
+  <igx-list-item [isHeader]="true"> Contacts </igx-list-item>
+  <igx-list-item #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
+    <div class="item-container">
+      <div class="contact">
+        <igx-avatar [src]="contact.photo" [roundShape]="true"></igx-avatar>
+        <div class="contact__info">
+          <span class="name">{{ contact.name }}</span>
+          <span class="phone">{{ contact.phone }}</span>
+        </div>
+      </div>
+      <igx-icon class="icon" [ngClass]="{ 'icon--favorite': contact.isFavorite }" (click)="toggleFavorite(item)">star
+      </igx-icon>
+    </div>
+  </igx-list-item>
+</igx-list>

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

@@ -0,0 +1,42 @@
+igx-icon {
+  cursor: pointer;
+  user-select: none;
+}
+
+.search {
+  margin-bottom: 8px;
+}
+
+.item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.icon {
+  color: lightgray;
+}
+
+.icon.icon--favorite {
+  color: orange;
+}
+
+.contact {
+  display: flex;
+  flex: 1 0 240px;
+  align-items: center;
+}
+
+.contact__info {
+  display: flex;
+  flex-flow: column nowrap;
+  margin-left: 24px;
+}
+
+.name {
+  font-weight: 600;
+}
+
+.phone {
+  font-size: 0.875em;
+}

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { IgxAvatarModule, IgxFilterModule, IgxIconModule, IgxInputGroupModule, IgxListModule } 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: [FormsModule, IgxAvatarModule, IgxFilterModule, IgxIconModule, IgxInputGroupModule, IgxListModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+import { IgxFilterOptions, IgxListItemComponent } from '<%=igxPackage%>';
+
+interface Contact {
+  isFavorite: boolean;
+  name: string;
+  phone: string;
+  photo: string;
+}
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+  public title = '<%=name%>';
+  public searchContact = '';
+  public contacts: Contact[] = [
+    {
+      isFavorite: false,
+      name: 'Terrance Orta',
+      phone: '770-504-2217',
+      photo: 'https://randomuser.me/api/portraits/men/27.jpg'
+    },
+    {
+      isFavorite: true,
+      name: 'Richard Mahoney',
+      phone: '423-676-2869',
+      photo: 'https://randomuser.me/api/portraits/men/1.jpg'
+    },
+    {
+      isFavorite: false,
+      name: 'Donna Price',
+      phone: '859-496-2817',
+      photo: 'https://randomuser.me/api/portraits/women/50.jpg'
+    },
+    {
+      isFavorite: false,
+      name: 'Lisa Landers',
+      phone: '901-747-3428',
+      photo: 'https://randomuser.me/api/portraits/women/3.jpg'
+    },
+    {
+      isFavorite: true,
+      name: 'Dorothy H. Spencer',
+      phone: '573-394-9254',
+      photo: 'https://randomuser.me/api/portraits/women/67.jpg'
+    }
+  ];
+
+  public get filterContacts(): IgxFilterOptions {
+    const fo = new IgxFilterOptions();
+    fo.key = 'name';
+    fo.inputValue = this.searchContact;
+    return fo;
+  }
+
+  public toggleFavorite(item: IgxListItemComponent): void {
+    const contact = this.contacts[item.index - 1];
+    contact.isFavorite = !contact.isFavorite;
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxListTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["List"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "list";
+        this.projectType = "igx-ts";
+        this.name = "List";
+        this.description = "basic IgxList";
+        this.dependencies = [{
+                import: ["IgxListModule", "IgxAvatarModule", "IgxIconModule", "IgxInputGroupModule", "IgxFilterModule"],
+                from: "<%=igxPackage%>"
+            }, {
+                import: ["CommonModule"],
+                from: "@angular/common"
+            }, {
+                import: ["FormsModule"],
+                from: "@angular/forms"
+            }];
+    }
+}
+module.exports = new IgxListTemplate();

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxListComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "List";
+        this.group = "Grids & Lists";
+        this.description = `displays rows of items and supports one or more header items as well as
+							search and filtering of list items.`;
+    }
+}
+module.exports = new IgxListComponent();

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

@@ -0,0 +1,11 @@
+<div class="info">
+  <p>You can read more about configuring the map component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/geo-map" target="_blank">official documentation page
+    </a>.
+  </p>
+</div>
+<igx-geographic-map #map
+  width="100%"
+  height="calc(100% - 60px)"
+  [zoomable]="true" >
+</igx-geographic-map>

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

@@ -0,0 +1,7 @@
+:host {
+  flex: 1 1 auto;
+}
+.info {
+  margin: auto;
+  width: 50%;
+}

package/igx-ts-legacy/map/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 { IgxGeographicMapModule } from 'igniteui-angular-maps';
+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: [IgxGeographicMapModule, NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component implements AfterViewInit {
+
+  @ViewChild('map', {static: true})
+  public map!: IgxGeographicMapComponent;
+
+  public ngAfterViewInit(): void {
+    this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
+  }
+}

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

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

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxGeographicMapTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Geographic Map"];
+        this.controlGroup = "Maps";
+        this.listInComponentTemplates = true;
+        this.id = "geographic-map";
+        this.projectType = "igx-ts";
+        this.name = "Geographic Map";
+        this.description = "Basic IgxGeographicMap.";
+        this.dependencies = [
+            {
+                import: ["IgxGeographicMapModule"],
+                from: "igniteui-angular-maps"
+            },
+            {
+                import: ["IgxDataChartInteractivityModule"],
+                from: "igniteui-angular-charts"
+            }
+        ];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0", "igniteui-angular-maps@~17.0.0"];
+    }
+}
+module.exports = new IgxGeographicMapTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxGeographicMapComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Geographic Map";
+        this.group = "Maps";
+        this.description = `allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps.`;
+    }
+}
+module.exports = new IgxGeographicMapComponent();

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

@@ -0,0 +1,7 @@
+<p>Basic pivot grid.</p>
+<p>You can read more about configuring the igx-pivot-grid component in the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/pivotGrid/pivot-grid"
+    target="_blank">official documentation</a>.
+</p>
+<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" height="500px">
+</igx-pivot-grid>

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

@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}

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

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxPivotGridModule } 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: [IgxPivotGridModule,
+        NoopAnimationsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});