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

package/igx-ts-legacy/select/select-groups/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  styleUrls: ['<%=filePrefix%>.component.scss'],
+  templateUrl: '<%=filePrefix%>.component.html'
+})
+export class <%=ClassName%>Component {
+  public items: any[] = [
+    { type: 'Fruits', fruits: ['Apple', 'Orange', 'Banana'] },
+    { type: 'Vegetables', vegetables: ['Cucumber', 'Potato', 'Pepper'] }
+  ];
+}

package/igx-ts-legacy/select/select-groups/index.d.ts

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

package/igx-ts-legacy/select/select-groups/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Select With Groups"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "select-groups";
+        this.projectType = "igx-ts";
+        this.name = "Select With Groups";
+        this.description = "IgxSelect that has groups";
+        this.dependencies = [{
+                import: [
+                    "IgxSelectModule",
+                    "IgxButtonModule",
+                    "IgxToggleModule"
+                ],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxSelectTemplate();

package/igx-ts-legacy/select/select-in-form/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,28 @@
+<div class="content">
+  <p>The <b>igx-select</b> allows you to select a single item from a drop-down list.<br />
+    The following sample demonstrates the component inside a form.</p>
+  <p>You can read more about how to configure <b>igx-select</b> in the
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/select" target="_blank">official
+      documentation</a>.
+  </p>
+
+  <form>
+    <div class="select-wrapper">
+      <igx-select #model="ngModel" [(ngModel)]="selected" [ngModelOptions]="{standalone: true}"
+        [placeholder]="'Pick One'">
+        <label igxLabel>Favorite fruit</label>
+        <igx-prefix>Fruit</igx-prefix>
+        <igx-select-item> None </igx-select-item>
+        <igx-select-item *ngFor="let fruit of fruits" [value]="fruit">
+          {{fruit}}
+        </igx-select-item>
+      </igx-select>
+    </div>
+    <div class="actions">
+      <button igxButton (click)="onSubmit()">Submit</button>
+    </div>
+    <igx-toast #output>Selected {{selected ? selected : "None"}} </igx-toast>
+  </form>
+</div>

package/igx-ts-legacy/select/select-in-form/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,17 @@
+.select-wrapper {
+  padding-top: 50px;
+  display: flex;
+  flex-flow: row;
+}
+
+.actions {
+  display: flex;
+  flex-flow: column;
+  padding-top: 5%;
+}
+
+.content {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}

package/igx-ts-legacy/select/select-in-form/files/src/app/__path__/__filePrefix__.component.spec.ts

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

package/igx-ts-legacy/select/select-in-form/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,26 @@
+import { Component, ViewChild } from '@angular/core';
+import { HorizontalAlignment, IgxSelectComponent, IgxToastComponent, PositionSettings, VerticalAlignment } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  styleUrls: ['<%=filePrefix%>.component.scss'],
+  templateUrl: '<%=filePrefix%>.component.html'
+})
+export class <%=ClassName%>Component {
+  @ViewChild(IgxSelectComponent, { static: true })
+  public igxSelect!: IgxSelectComponent;
+
+  @ViewChild(IgxToastComponent, { static: true })
+  public output!: IgxToastComponent;
+
+  public selected!: string;
+  public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
+  private messagePositionSettings: PositionSettings = {
+    horizontalDirection: HorizontalAlignment.Center,
+    verticalDirection: VerticalAlignment.Middle
+  };
+
+  public onSubmit() {
+    this.output.open(undefined, this.messagePositionSettings);
+  }
+}

package/igx-ts-legacy/select/select-in-form/index.d.ts

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

package/igx-ts-legacy/select/select-in-form/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Select In Form"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "select-in-form";
+        this.projectType = "igx-ts";
+        this.name = "Select In Form";
+        this.description = "IgxSelect in a form";
+        this.dependencies = [{
+                import: [
+                    "IgxSelectModule",
+                    "IgxButtonModule",
+                    "IgxToggleModule",
+                    "IgxToastModule"
+                ],
+                from: "<%=igxPackage%>"
+            }, {
+                import: ["FormsModule"],
+                from: "@angular/forms"
+            }];
+    }
+}
+module.exports = new IgxSelectTemplate();

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

@@ -0,0 +1,39 @@
+<p>igx-stepper component sample.</p>
+<p>You can read more about configuring the igx-stepper component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/stepper/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper" target="_blank">official
+    documentation</a>.
+</p>
+<div class="sample-split">
+  <igx-buttongroup [values]="stepperOrientations" (selected)="toggleOrientation($event)">
+  </igx-buttongroup>
+</div>
+<igx-stepper #stepper [orientation]="orientation">
+  <igx-step>
+    <span igxStepTitle>Order</span>
+    <div igxStepContent>
+      <div class="sample-step-actions">
+        <button igxButton="raised" (click)="stepper.next()">NEXT</button>
+      </div>
+    </div>
+  </igx-step>
+  <igx-step>
+    <span igxStepTitle>Payment</span>
+    <div igxStepContent>
+      <div class="sample-step-actions">
+        <button igxButton="raised" (click)="stepper.prev()">PREVIOUS</button>
+        <button igxButton="raised" (click)="stepper.next()">NEXT</button>
+      </div>
+    </div>
+  </igx-step>
+  <igx-step>
+    <span igxStepTitle>Confirmation</span>
+    <div igxStepContent>
+      <div class="sample-step-actions">
+        <button igxButton="raised" (click)="stepper.prev()">PREVIOUS</button>
+        <button igxButton="raised" (click)="stepper.reset()">RESET</button>
+      </div>
+    </div>
+  </igx-step>
+</igx-stepper>

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

@@ -0,0 +1,21 @@
+$sample-gap: 20px;
+
+:host {
+  display: block;
+  padding: $sample-gap;
+}
+
+.sample-split,
+.sample-step-actions {
+  display: flex;
+  gap: $sample-gap;
+}
+
+.sample-split {
+  > * {
+    max-width: 380px;
+    flex: 1;
+  }
+
+  margin-bottom: $sample-gap;
+}

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

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

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IButtonGroupEventArgs, IgxStepperOrientation } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+    public orientation: IgxStepperOrientation = 'horizontal';
+    public stepperOrientations: any[] = [
+    {
+      label: 'Horizontal', orientation: 'horizontal',
+      selected: this.orientation === 'horizontal', toggleable: true
+    },
+    {
+      label: 'Vertical', orientation: 'vertical',
+      selected: this.orientation === 'vertical', toggleable: true
+    }
+  ];
+
+    public toggleOrientation(event: IButtonGroupEventArgs): void {
+    this.orientation = this.stepperOrientations[event.index].orientation;
+  }
+}

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxStepperTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Stepper"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "stepper";
+        this.projectType = "igx-ts";
+        this.name = "Stepper";
+        this.description = "Basic IgxStepper sample";
+        this.dependencies = [{
+                import: ["IgxStepperModule", "IgxButtonModule", "IgxButtonGroupModule"],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxStepperTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxStepperComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Stepper";
+        this.group = "Layouts";
+        this.description = `visualizes content as a process and shows its progress by dividing the content into successive steps`;
+    }
+}
+module.exports = new IgxStepperComponent();

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

@@ -0,0 +1,29 @@
+<div>
+  <p>igx-bottom-nav component.</p>
+  <p>You can read more about configuring the igx-bottom-nav component in the
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabbar/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabbar" target="_blank">official
+      documentation</a>.
+  </p>
+  <igx-bottom-nav>
+    <igx-bottom-nav-item>
+      <igx-bottom-nav-header>
+        <igx-icon>library_music</igx-icon>
+      </igx-bottom-nav-header>
+      <igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
+    </igx-bottom-nav-item>
+    <igx-bottom-nav-item>
+      <igx-bottom-nav-header>
+        <igx-icon>video_library</igx-icon>
+      </igx-bottom-nav-header>
+      <igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
+    </igx-bottom-nav-item>
+    <igx-bottom-nav-item>
+      <igx-bottom-nav-header>
+        <igx-icon>library_books</igx-icon>
+      </igx-bottom-nav-header>
+      <igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
+    </igx-bottom-nav-item>
+  </igx-bottom-nav>
+</div>

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

@@ -0,0 +1,6 @@
+igx-bottom-nav-content {
+  padding: 10px;
+  text-align: center;
+  font-weight: bold;
+  color: #731963;
+}

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

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

@@ -0,0 +1,10 @@
+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 {
+}

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxBottomNavTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Bottom Navigation"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "bottom-nav";
+        this.projectType = "igx-ts";
+        this.name = "Bottom Navigation";
+        this.description = "three item bottom navigation template";
+        this.dependencies = [{
+                import: ["IgxBottomNavModule", "IgxAvatarModule", "IgxIconModule", "IgxRippleModule"],
+                from: "<%=igxPackage%>"
+            }, {
+                import: "CommonModule",
+                from: "@angular/common"
+            }];
+    }
+}
+module.exports = new IgxBottomNavTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxBottomNavComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Bottom Navigation";
+        this.group = "Layouts";
+        this.description = "enables the user to navigate among a number of content panels displayed in a single view.";
+    }
+}
+module.exports = new IgxBottomNavComponent();

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

@@ -0,0 +1,36 @@
+<p>igx-tabs component sample.</p>
+<p>You can read more about configuring the igx-tabs component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs" target="_blank">official
+    documentation</a>.
+</p>
+<igx-tabs>
+  <igx-tab-item>
+    <igx-tab-header>
+      <igx-icon igxTabHeaderIcon>library_music</igx-icon>
+      <span igxTabHeaderLabel>Albums</span>
+    </igx-tab-header>
+    <igx-tab-content>
+      Albums
+    </igx-tab-content>
+  </igx-tab-item>
+  <igx-tab-item>
+    <igx-tab-header>
+      <igx-icon igxTabHeaderIcon>favorite</igx-icon>
+      <span igxTabHeaderLabel>Favorite</span>
+    </igx-tab-header>
+    <igx-tab-content>
+      Favorite
+    </igx-tab-content>
+  </igx-tab-item>
+  <igx-tab-item>
+    <igx-tab-header>
+      <igx-icon igxTabHeaderIcon>info</igx-icon>
+      <span igxTabHeaderLabel>Details</span>
+    </igx-tab-header>
+    <igx-tab-content>
+      Details
+    </igx-tab-content>
+  </igx-tab-item>
+</igx-tabs>

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

@@ -0,0 +1,9 @@
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+igx-tab-content {
+  padding: 8px;
+}

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxTabsTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Tabs"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "tabs";
+        this.projectType = "igx-ts";
+        this.name = "Tabs";
+        this.description = "Basic IgxTabs sample";
+        this.dependencies = [{
+                import: ["IgxTabsModule", "IgxCardModule", "IgxAvatarModule", "IgxButtonModule", "IgxRippleModule"],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxTabsTemplate();

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

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

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

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

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

@@ -0,0 +1,10 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>igx-time-picker component with initial value set. One-way data bind is used.</p>
+  <p>You can read more about configuring the igx-time-picker component in the
+    <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md"
+      target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker"
+      target="_blank">official documentation</a>.
+  </p>
+  <igx-time-picker id="time-picker" [value]="date"></igx-time-picker>
+</div>