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

package/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/localData.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable} from 'rxjs';
+import { FinancialData } from './assets/financialData';
+
+@Injectable()
+export class LocalDataService {
+  public records: Observable<any[]>;
+  public records$: BehaviorSubject<any[]>;
+
+  constructor() {
+    this.records$ = new BehaviorSubject([] as any);
+    this.records = this.records$.asObservable();
+  }
+
+  public getData(count: number = 10): void {
+    const financialData: FinancialData = new FinancialData();
+    this.records$.next(financialData.generateData(count));
+  }
+}

package/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/tree-grid-grouping.pipe.ts

@@ -0,0 +1,98 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+class GroupByRecord {
+  public key: any;
+  public groups: GroupByRecord[] = [];
+  public records: any[] = [];
+}
+
+export class ITreeGridAggregation {
+  public field: string = '';
+  public aggregate: (parent: any, children: any[]) => any = [] as any;
+}
+
+@Pipe({
+  name: 'treeGridGrouping',
+  pure: true
+})
+export class <%=ClassName%>TreeGridGroupingPipe implements PipeTransform {
+
+  public transform(collection: any[],
+           groupColumns: string[],
+           aggregations: ITreeGridAggregation[],
+           groupKey: string,
+           primaryKey: string,
+           childDataKey: string): any[] {
+    const result: any[] = [];
+
+    const groupedRecords = this.groupByMultiple(collection, groupColumns);
+    this.flattenGrouping(groupedRecords, groupKey, primaryKey,
+      childDataKey, aggregations, '', result);
+
+    return result;
+  }
+
+  private flattenGrouping(groupRecords: GroupByRecord[],
+              groupKey: string,
+              primaryKey: string,
+              childDataKey: string,
+              aggregations: ITreeGridAggregation[],
+              parentID: any,
+              data: any[]) {
+    for (const groupRecord of groupRecords) {
+      const parent: { [key: string]: any } = {};
+      const children = groupRecord.records;
+
+      parent[primaryKey] = parentID + groupRecord.key;
+      parent[childDataKey] = [];
+
+      for (const aggregation of aggregations) {
+        parent[aggregation.field] = aggregation.aggregate(parent, children);
+      }
+
+      parent[groupKey] = groupRecord.key;
+      data.push(parent);
+
+      if (groupRecord.groups) {
+        this.flattenGrouping(groupRecord.groups, groupKey, primaryKey, childDataKey,
+          aggregations, parent[primaryKey], parent[childDataKey]);
+      } else {
+        parent[childDataKey] = children;
+      }
+    }
+  }
+
+  private groupByMultiple(array: any[], fieldNames: string[], index = 0): GroupByRecord[] {
+    const res = this.groupBy(array, fieldNames[index]);
+
+    if (index + 1 < fieldNames.length) {
+       for (const groupByRecord of res) {
+        groupByRecord.groups = this.groupByMultiple(groupByRecord.records, fieldNames, index + 1);
+      }
+    }
+
+    return res;
+  }
+
+  private groupBy(array: any[], fieldName: string): GroupByRecord[] {
+    const map: Map<any, GroupByRecord> = new Map<any, GroupByRecord>();
+
+    for (const record of array) {
+      const key = record[fieldName];
+      let groupByRecord: GroupByRecord;
+
+      if (map.has(key)) {
+        groupByRecord = map.get(key)!;
+      } else {
+        groupByRecord = new GroupByRecord();
+        groupByRecord.key = key;
+        groupByRecord.records = [];
+        map.set(key, groupByRecord);
+      }
+
+      groupByRecord.records.push(record);
+    }
+
+    return Array.from(map.values());
+  }
+}

package/igx-ts-legacy/custom-templates/fintech-tree-grid/index.d.ts

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

package/igx-ts-legacy/custom-templates/fintech-tree-grid/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxTreeGridFinTechTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.id = "fintech-tree-grid";
+        this.projectType = "igx-ts";
+        this.listInComponentTemplates = false;
+        this.listInCustomTemplates = true;
+        this.name = "FinTech Tree Grid";
+        this.description = "This sample demonstrates the TreeGrid handling thousands of updates per second.";
+        this.dependencies = [
+            { import: "IgxTreeGridModule", from: "<%=igxPackage%>" },
+            { provide: "IgxExcelExporterService", from: "<%=igxPackage%>" },
+            {
+                import: [
+                    "IgxButtonGroupModule",
+                    "IgxCheckboxModule",
+                    "IgxIconModule",
+                    "IgxSwitchModule",
+                    "IgxSliderModule"
+                ],
+                from: "<%=igxPackage%>"
+            },
+            { import: "FormsModule", from: "@angular/forms" },
+            { declare: "<%=ClassName%>TreeGridGroupingPipe", from: "./src/app/<%=path%>/tree-grid-grouping.pipe.ts" }
+        ];
+    }
+}
+module.exports = new IgxTreeGridFinTechTemplate();

package/igx-ts-legacy/custom-templates/login/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,45 @@
+<form *ngIf="showLogin" class="input-group-form" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
+  <h3>Welcome Back</h3>
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>account_circle</igx-icon>
+    </igx-prefix>
+    <label igxLabel for="email">Username</label>
+    <input igxInput id="email" name="email" formControlName="email" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <igx-prefix>
+      <igx-icon>lock</igx-icon>
+    </igx-prefix>
+    <label igxLabel for="password">Password</label>
+    <input igxInput id="password" name="password" type="password" formControlName="password" />
+  </igx-input-group>
+  <button igxButton="raised" type="submit" igxRipple [disabled]="!loginForm.valid">LOG IN</button>
+  <a (click)="showRegistrationForm()">Register</a>
+</form>
+
+<div *ngIf="showSuccessLogin">You've successfully logged in</div>
+
+<form *ngIf="showRegister" class="input-group-form" [formGroup]="registrationForm" (ngSubmit)="tryRegister()">
+  <h3>Create your account</h3>
+  <igx-input-group>
+    <label igxLabel for="firstName">First Name</label>
+    <input igxInput id="firstName" name="firstName" formControlName="firstName" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <label igxLabel for="lastName">Last Name</label>
+    <input igxInput id="lastName" name="lastName" formControlName="lastName" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <label igxLabel for="newEmail">Username</label>
+    <input igxInput id="newEmail" name="newEmail" formControlName="newEmail" type="text" />
+  </igx-input-group>
+  <igx-input-group>
+    <input igxInput id="newPassword" name="newPassword" type="password" formControlName="newPassword" />
+    <label igxLabel for="newPassword">Password</label>
+  </igx-input-group>
+  <button igxButton="raised" type="submit" igxRipple [disabled]="!registrationForm.valid">SIGN UP</button>
+  <a (click)="showLoginForm()">Log in</a>
+</form>
+
+<div *ngIf="showSuccessRegister">You have successfully registered.</div>

package/igx-ts-legacy/custom-templates/login/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+    padding: 24px 16px;
+    margin: 16px;
+    width: 400px;
+    max-height: 600px;
+}
+
+h3 {
+    color: #66ccff;
+}
+
+a {
+    cursor: pointer;
+}
+
+.igx-input-group, button {
+    margin-top: 32px;
+}
+
+button {
+
+    width: 100%;
+}

package/igx-ts-legacy/custom-templates/login/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { IgxInputGroupModule, IgxIconModule, IgxButtonModule, IgxRippleModule } from '<%=igxPackage%>';
+
+const MAIL_GROUP_NAME = 'email';
+const PASSWORD_GROUP_NAME = 'password';
+const NEW_MAIL_GROUP_NAME = 'newEmail';
+const NEW_PASSWORD_GROUP_NAME = 'newPassword';
+const FIRST_NAME_GROUP_NAME = 'firstName';
+const LAST_NAME_GROUP_NAME = 'lastName';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [ ReactiveFormsModule, NoopAnimationsModule, IgxInputGroupModule, IgxIconModule, IgxButtonModule, IgxRippleModule ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not allow login until valid',  async () => {
+    expect(component.loginForm.valid).toBeFalsy();
+    component.loginForm.controls[MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.loginForm.valid).toBeFalsy();
+    component.loginForm.controls[PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.loginForm.valid).toBeTruthy();
+  });
+
+  it('should not allow register until valid',  async () => {
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[NEW_MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[FIRST_NAME_GROUP_NAME].setValue('John');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[LAST_NAME_GROUP_NAME].setValue('Doe');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[NEW_PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.registrationForm.valid).toBeTruthy();
+  });
+});

package/igx-ts-legacy/custom-templates/login/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,54 @@
+import {Component} from '@angular/core';
+import { FormBuilder, Validators, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+
+  export class <%=ClassName%>Component {
+  public loginForm: FormGroup;
+  public registrationForm: FormGroup;
+  public showLogin = true;
+  public showRegister = false;
+  public showSuccessLogin = false;
+  public showSuccessRegister = false;
+
+  constructor(fb: FormBuilder) {
+    this.loginForm = fb.group( {
+        email: ['', Validators.required],
+        password: ['', Validators.required]
+      });
+
+    this.registrationForm = fb.group( {
+        newEmail: ['', Validators.required],
+        newPassword: ['', Validators.required],
+        firstName: ['', Validators.required],
+        lastName: ['', Validators.required]
+    });
+  }
+
+  tryLogin() {
+    const loginInfo = this.loginForm.value;
+    // use loginInfo
+    this.showLogin = false;
+    this.showSuccessLogin = true;
+  }
+
+  showRegistrationForm() {
+    this.showLogin = false;
+    this.showRegister = true;
+  }
+  showLoginForm() {
+    this.showLogin = true;
+    this.showRegister = false;
+  }
+
+  tryRegister() {
+    const registerInfo = this.registrationForm.value;
+    // use registerInfo
+    this.showRegister = false;
+    this.showSuccessRegister = true;
+  }
+}

package/igx-ts-legacy/custom-templates/login/index.d.ts

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

package/igx-ts-legacy/custom-templates/login/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxLoginTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.id = "login";
+        this.projectType = "igx-ts";
+        this.listInComponentTemplates = false;
+        this.listInCustomTemplates = true;
+        this.name = "Login view";
+        this.description = "Login view";
+        this.dependencies = [{
+                import: ["IgxInputGroupModule", "IgxIconModule", "IgxButtonModule", "IgxRippleModule"],
+                from: "<%=igxPackage%>"
+            }, {
+                import: ["ReactiveFormsModule"],
+                from: "@angular/forms"
+            }];
+    }
+}
+module.exports = new IgxLoginTemplate();

package/igx-ts-legacy/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,34 @@
+<div class="sample-wrapper">
+  <igx-card>
+    <igx-card-header>
+    <h3 class="ig-card-header__title">{{data.city}}</h3>
+    <h5 class="ig-card-header__subtitle">{{data.dateTime}}, {{data.today.description}}</h5>
+    </igx-card-header>
+    <igx-card-content>
+    <div class="weather__main" *ngIf=data>
+      <div class="weather__main-temp">
+      <div>{{data.today.tempMax}}°<sup>C</sup></div>
+      <div class="right"><igx-icon class="weather-icon--orange" family="fas" name="fa-sun"></igx-icon></div>
+      </div>
+      <div class="weather__main-hum">
+      <div><igx-icon class="weather-icon--blue" family="fas" name="fa-umbrella"></igx-icon>{{data.precipitation}} Precipitation </div>
+      <div class="right"><igx-icon class="weather-icon--skyblue" family="fas" name="fa-tint"></igx-icon>{{data.humidity}} Humidity </div>
+      </div>
+    </div>
+    <button igxButton igxRipple (click)="toggleDetails()">Forecast Details</button>
+    <igx-expansion-panel>
+      <igx-expansion-panel-body>
+      <div class="forecast__container" *ngIf=data>
+        <div *ngFor="let day of data.daysOfWeek" class="forecast__day">
+        <div>{{day.name}}</div>
+        <div class="right">
+          <igx-icon [ngClass]="'weather-icon--' + day.iconColor" family="fas" [name]="day.iconName" font-size="1em"></igx-icon>
+          {{day.tempMin}}°/{{day.tempMax}}°
+        </div>
+        </div>
+      </div>
+      </igx-expansion-panel-body>
+    </igx-expansion-panel>
+    </igx-card-content>
+  </igx-card>
+  </div>

package/igx-ts-legacy/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,59 @@
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
+@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
+
+.sample-wrapper {
+    width: 24rem;
+    margin-top: 20px;
+}
+
+%columnDisplay {
+    display: flex;
+    > * {
+        flex: 1 1 auto;
+    }
+
+    igx-icon {
+        font-size: 1.5em;
+        margin-right: 1rem;
+    }
+}
+.forecast__day {
+    @extend %columnDisplay;
+    padding-top: 1rem;
+}
+
+.right {
+    text-align: right;
+}
+
+igx-icon.weather-icon {
+    &--gray {
+        color: gray;
+    }
+    &--blue {
+        color: blue;
+    }
+    &--orange {
+        color: orange;
+    }
+    &--skyblue {
+        color: skyblue;
+    }
+}
+
+.weather__main-temp {
+    @extend %columnDisplay;
+    font-size: 4rem;
+    line-height: 4rem;
+    igx-icon {
+        font-size: 4rem;
+        width: 4rem;
+        height: 4rem;
+    }
+}
+
+.weather__main-hum {
+    @extend %columnDisplay;
+    padding: .7rem 0;
+}

package/igx-ts-legacy/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.spec.ts

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

package/igx-ts-legacy/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,19 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxExpansionPanelComponent } from '<%=igxPackage%>';
+import { data as weatherData } from './weather-data';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+
+  @ViewChild(IgxExpansionPanelComponent, { static: true })
+  public panel!: IgxExpansionPanelComponent;
+  public data = weatherData;
+
+  public toggleDetails() {
+    this.panel.toggle();
+  }
+}

package/igx-ts-legacy/custom-templates/weather-forecast/files/src/app/__path__/weather-data.ts

@@ -0,0 +1,58 @@
+// tslint:disable:object-literal-sort-keys
+export const data = {
+  city: 'Sofia',
+  humidity: '44%',
+  precipitation: '5%',
+  windSpeed: 279,
+  dateTime: '10/7/2018, 14:35:00 PM',
+  today: {
+    name: 'Sunday',
+    tempMax: 25,
+    tempMin: 15,
+    description: 'Sunday',
+    iconColor: 'gray',
+    iconName: 'fa-cloud'
+  },
+  daysOfWeek: [
+    {
+      name: 'Monday',
+      tempMax: 22,
+      tempMin: 15,
+      description: 'Sunny',
+      iconColor: 'orange',
+      iconName: 'fa-sun'
+    },
+    {
+      name: 'Tuesday',
+      tempMax: 25,
+      tempMin: 14,
+      description: 'Rainy',
+      iconColor: 'blue',
+      iconName: 'fa-tint'
+    },
+    {
+      name: 'Wednesday',
+      tempMax: 28,
+      tempMin: 18,
+      description: 'Sunny',
+      iconColor: 'orange',
+      iconName: 'fa-sun'
+    },
+    {
+      name: 'Thursday',
+      tempMax: 20,
+      tempMin: 12,
+      description: 'Few Clouds',
+      iconColor: 'gray',
+      iconName: 'fa-cloud'
+    },
+    {
+      name: 'Friday',
+      tempMax: 23,
+      tempMin: 13,
+      description: 'Light Rain',
+      iconColor: 'blue',
+      iconName: 'fa-tint'
+    }
+  ]
+};

package/igx-ts-legacy/custom-templates/weather-forecast/index.d.ts

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

package/igx-ts-legacy/custom-templates/weather-forecast/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxWeatherForecastTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.id = "weather-forecast";
+        this.projectType = "igx-ts";
+        this.listInComponentTemplates = false;
+        this.listInCustomTemplates = true;
+        this.name = "Weather Forecast";
+        this.description = "Weather Forecast";
+        this.dependencies = [
+            {
+                import: [
+                    "IgxButtonModule",
+                    "IgxCardModule",
+                    "IgxExpansionPanelModule",
+                    "IgxIconModule"
+                ],
+                from: "<%=igxPackage%>"
+            }
+        ];
+    }
+}
+module.exports = new IgxWeatherForecastTemplate();

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

@@ -0,0 +1,7 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>igx-date-picker component.</p>
+  <p>You can read more about configuring the igx-date-picker component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/README.md" target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker" target="_blank">official documentation</a>.</p>
+  <igx-date-picker [cancelButtonLabel]="'Close'"[todayButtonLabel]="'Today'" [value]="today"></igx-date-picker>
+</div>

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

@@ -0,0 +1,3 @@
+.igx-date-picker {
+  width: 200px;
+}

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

package/igx-ts-legacy/date-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.Emulated,
+})
+export class <%=ClassName%>Component {
+  public today: Date = new Date(Date.now());
+}

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

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