template(input-group): Create form view template with IgxInputGroup #338

templates/angular/igx-ts/input-group/default/files/src/app/__path__/__name__.component.css

@@ -1,3 +1,32 @@
-.igx-date-picker {
-  width: 200px;
-}
+:host {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.sample-wrapper {
+    width: 100%;
+	height: 100%;
+	position: relative;
+    margin: 0 auto;
+    background: transparent;
+}
+.input-group-form{
+	border: 2px solid #731963;
+	padding: 15px;
+}
+.sample-title {
+    color: #731963;
+    margin-bottom: 24px;
+}
+.sample-title .light {
+    font-weight: 400;
+}
+.button-wrapper{
+	margin-top: 15px;
+}
+button{
+    background-color:#731963;
+    border-color:#731963;
+    color: white;
+}

templates/angular/igx-ts/input-group/default/files/src/app/__path__/__name__.component.html

@@ -1,7 +1,54 @@
-<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.html" target="_blank">official documentation</a>.</p>
-  <igx-datePicker [cancelButtonLabel]="'Close'"[todayButtonLabel]="'Today'" [value]="today"></igx-datePicker>
-</div>
+<p>Form view with igx-input-group.</p>
+<p>You can read more about configuring the igx-input-group component in the
+	<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/input-group/README.md"
+	 target="_blank">README</a> or the
+	<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/input_group.html" target="_blank">official documentation</a>.</p>
+
+	<div class="sample-wrapper">
+		<section class="sample-content">
+			<article class="sample-column">
+				<form class="input-group-form">
+					<h4 class="sample-title">Book your movie ticket</h4>
+					<igx-input-group>
+						<input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required" />
+						<label igxLabel for="fullName">Full Name</label>
+						<igx-suffix>
+							<igx-icon name="person"></igx-icon>
+						</igx-suffix>
+					</igx-input-group>
+					<igx-input-group>
+						<igx-prefix>+359</igx-prefix>
+						<label igxLabel for="phone">Phone</label>
+						<input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
+						<igx-suffix>
+							<igx-icon name="phone"></igx-icon>
+						</igx-suffix>
+						<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
+					</igx-input-group>
+					<igx-input-group>
+						<label igxLabel for="email">Email address</label>
+						<input igxInput name="email" type="email" [(ngModel)]="user.email" required />
+						<igx-suffix>
+							<igx-icon name="email"></igx-icon>
+						</igx-suffix>
+					</igx-input-group>
+					<div class="igx-combo">
+						<igx-combo #combo1 name="genres" class="input-container" width="100%" [itemsMaxHeight]="130"
+							[data]="genres" [(ngModel)]="user.genres"
+							placeholder="Select your favorite genres" searchPlaceholder="Search..." required [type]='"line"'>
+						</igx-combo>
+					</div>
+					<div class="igx-datePicker">
+						<igx-datePicker name="date" (onSelection)="onDateSelection($event)" ></igx-datePicker>
+					</div>
+					<div class="igx-time-picker">
+						<igx-time-picker name="dateTime" (onValueChanged)="onTimeSelection($event)" ></igx-time-picker>
+					</div>
+					<div class="button-wrapper">
+						<button igxButton="raised" igxRipple>Book</button>
+					</div>
+				</form>
+			</article>
+		</section>
+	</div>
+

templates/angular/igx-ts/input-group/default/files/src/app/__path__/__name__.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { $(ClassName)Component } from './$(filePrefix).component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxDatePickerModule } from 'igniteui-angular';
+import { IgxInputGroupModule } from 'igniteui-angular';
 
 describe('$(ClassName)Component', () => {
   let component: $(ClassName)Component;
@@ -11,7 +11,7 @@ describe('$(ClassName)Component', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [$(ClassName)Component],
-      imports: [IgxDatePickerModule, NoopAnimationsModule]
+      imports: [IgxInputGroupModule]
     })
       .compileComponents();
   }));

templates/angular/igx-ts/input-group/default/files/src/app/__path__/__name__.component.ts

@@ -1,13 +1,33 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { IgxComboComponent  } from 'igniteui-angular';
 
 @Component({
   selector: 'app-$(filePrefix)',
   templateUrl: './$(filePrefix).component.html',
-  styleUrls: ['./$(filePrefix).component.css'],
-  encapsulation: ViewEncapsulation.Emulated,
+  styleUrls: ['./$(filePrefix).component.css']
 })
-export class $(ClassName)Component {
 
-  public today: Date = new Date(Date.now());
+export class $(ClassName)Component{
+	public user = {
+        dateTime: new Date(),
+        email: "",
+        fullName: "",
+        genres: "",
+        phone: ""
+    };
 
+    public genres = ["Action", "Adventure", "Comedy", "Crime",
+        "Drama", "Historical", "Horror", "Mistery",
+        "Musical", "Romance", "Sci-Fi", "Thriller", "Western"];
+
+    @ViewChild("combo1", { read: IgxComboComponent })
+    private combo1: IgxComboComponent;
+
+    public onDateSelection(value) {
+        this.user.dateTime.setDate((value as Date).getDate());
+    }
+
+    public onTimeSelection(event) {
+        this.user.dateTime.setTime((event.newValue as Date).getTime());
+    }
 }

templates/angular/igx-ts/input-group/default/index.ts

@@ -1,18 +1,27 @@
 import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
 
-class IgxDatePickerTemplate extends IgniteUIForAngularTemplate {
+class IgxInputGroupTemplate extends IgniteUIForAngularTemplate {
 	constructor() {
 		super(__dirname);
-		this.components = ["Date Picker"];
-		this.controlGroup = "Scheduling";
+		this.components = ["Input Group"];
+		this.controlGroup = "Data Entry & Display";
 		this.listInComponentTemplates = true;
-		this.id = "date-picker";
+		this.id = "input-group";
 		this.projectType = "igx-ts";
-		this.name = "Date Picker";
-		this.description = "Basic IgxDatePicker";
-		this.dependencies = [
-			{ import: "IgxDatePickerModule", from: "igniteui-angular" }
-		];
+		this.name = "Input Group";
+		this.description = "IgxInputGroup form view template";
+		this.dependencies = [{
+			from: "igniteui-angular",
+			import: [
+			"IgxButtonModule",
+			"IgxComboModule",
+			"IgxDatePickerModule",
+			"IgxIconModule",
+			"IgxInputGroupModule",
+			"IgxMaskModule",
+			"IgxRippleModule",
+			"IgxTimePickerModule"]
+		}];
 	}
 }
-module.exports = new IgxDatePickerTemplate();
+module.exports = new IgxInputGroupTemplate();

templates/angular/igx-ts/input-group/index.ts

@@ -0,0 +1,14 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgxInputGroupComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Input Group";
+		this.group = "Data Entry & Display";
+	}
+}
+module.exports = new IgxInputGroupComponent();