feat(select): Add select with groups sample; Add padding-top to samples

templates/angular/igx-ts/select/index.ts

@@ -4,7 +4,7 @@ class IgxSelectComponent extends BaseComponent {
 	constructor() {
 		super(__dirname);
 		this.name = "Select";
-		this.group = "Grids & Lists";
+		this.group = "Data Entry & Display";
 		this.description = "provides an input with dropdown list allowing selection of a single item.";
 	}
 }

templates/angular/igx-ts/select/select-groups/files/src/app/__path__/__name__.comonent.spec.ts

@@ -0,0 +1,27 @@
+import { async, TestBed, ComponentFixture } from "@angular/core/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { $(ClassName)Component } from "./$(filePrefix).component";
+import { IgxSelectModule, IgxDropDownModule } from "igniteui-angular";
+
+describe("$(ClassName)Component", () => {
+  let component: $(ClassName)Component;
+  let fixture: ComponentFixture<$(ClassName)Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [$(ClassName)Component],
+      imports: [ IgxSelectModule, NoopAnimationsModule, IgxDropDownModule ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent($(ClassName)Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

templates/angular/igx-ts/select/select-groups/files/src/app/__path__/__name__.component.html

@@ -0,0 +1,13 @@
+<div class="select-wrapper">
+	<igx-select #select>
+		<label igxLabel>Select With Groups</label>
+		<igx-select-item-group *ngFor="let item of items" [label]="item.type">
+			<igx-select-item *ngFor="let fruit of item.fruits" [value]="fruit">
+				{{fruit}}
+			</igx-select-item>
+			<igx-select-item *ngFor="let vegetable of item.vegetables" [value]="vegetable">
+				{{vegetable}}
+			</igx-select-item>
+		</igx-select-item-group>
+	</igx-select>
+</div>

templates/angular/igx-ts/select/select-groups/files/src/app/__path__/__name__.component.scss

@@ -0,0 +1,3 @@
+.select-wrapper {
+	padding-top: 50ox
+}

templates/angular/igx-ts/select/select-groups/files/src/app/__path__/__name__.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" ] }
+    ];
+}

templates/angular/igx-ts/select/select-groups/index.ts

@@ -0,0 +1,22 @@
+import { IgniteUIForAngularTemplate } from "../../../../../lib/templates/IgniteUIForAngularTemplate";
+
+class IgxSelectTemplate extends 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", "IgxDropDownModule", "IgxFilterModule",
+				"IgxButtonModule", "IgxToggleModule"
+			],
+			from: "igniteui-angular"
+		}];
+	}
+}
+module.exports = new IgxSelectTemplate();

templates/angular/igx-ts/select/simple-select/files/src/app/__path__/__name__.component.html

@@ -1,6 +1,8 @@
-<igx-select #select>
-	<label igxLabel>Simple Select</label>
-	<igx-select-item *ngFor="let item of items" [value]="item">
-		{{item}}
-	</igx-select-item>
-</igx-select>
+<div class="select-wrapper">
+	<igx-select #select>
+		<label igxLabel>Simple Select</label>
+		<igx-select-item *ngFor="let item of items" [value]="item">
+			{{item}}
+		</igx-select-item>
+	</igx-select>
+</div>

templates/angular/igx-ts/select/simple-select/files/src/app/__path__/__name__.component.scss

@@ -0,0 +1,3 @@
+.select-wrapper {
+	padding-top: 50px;
+}

templates/angular/igx-ts/select/simple-select/files/src/app/__path__/__name__.component.spec.ts

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

templates/angular/igx-ts/select/simple-select/index.ts

@@ -12,7 +12,7 @@ class IgxSelectTemplate extends IgniteUIForAngularTemplate {
 		this.description = "basic IgxSelect";
 		this.dependencies = [{
 			import: [
-				"IgxSelectModule", "IgxFilterModule",
+				"IgxSelectModule", "IgxDropDownModule", "IgxFilterModule",
 				"IgxButtonModule", "IgxToggleModule"
 			],
 			from: "igniteui-angular"