feat(igx-combo): add empty combo sample #1260

Author: Lipata

demos/app/app.component.ts

@@ -60,6 +60,11 @@ export class AppComponent implements OnInit {
             icon: "view_carousel",
             name: "Carousel"
         },
+        {
+            link: "/combo",
+            icon: "arrow_drop_down_circle",
+            name: "Combo"
+        },
         {
             link: "/datePicker",
             icon: "date_range",

demos/app/app.module.ts

@@ -16,6 +16,7 @@ import { ButtonGroupSampleModule } from "./buttonGroup/sample.module";
 import { IgxCalendarSampleModule } from "./calendar/sample.module";
 import { IgxCardSampleModule } from "./card/sample.module";
 import { CarouselSampleModule } from "./carousel/sample.module";
+import { ComboSampleModule } from "./combo/sample.module";
 import { IgxDatePickerSampleModule } from "./date-picker/sample.module";
 import { DialogSampleModule } from "./dialog/sample.module";
 import { MaskSampleModule } from "./directives/mask/sample.module";
@@ -66,6 +67,7 @@ import { VirtualForSampleModule } from "./virtual-for-directive/sample.module";
         IgxAvatarModule,
         InputSampleModule,
         CarouselSampleModule,
+        ComboSampleModule,
         TabBarSampleModule,
         TabsSampleModule,
         ListSampleModule,

demos/app/app.routing.ts

@@ -8,6 +8,7 @@ import { ButtonGroupSampleComponent } from "./buttonGroup/sample.component";
 import { IgxCalendarSampleComponent } from "./calendar/sample.component";
 import { IgxCardSampleComponent } from "./card/sample.component";
 import { CarouselSampleComponent } from "./carousel/sample.component";
+import { ComboSampleComponent } from "./combo/sample.component";
 import { IgxDatePickerSampleComponent } from "./date-picker/sample.component";
 import { DialogSampleComponent } from "./dialog/sample.component";
 import { MaskSampleComponent } from "./directives/mask/sample.component";
@@ -63,6 +64,10 @@ const appRoutes: Routes = [
         component: CarouselSampleComponent,
         path: "carousel"
     },
+    {
+        component: ComboSampleComponent,
+        path: "combo"
+    },
     {
         component: TabBarSampleComponent,
         path: "tabbar"

demos/app/combo/sample.component.css

@@ -0,0 +1,6 @@
+<div class="sample-wrapper">
+    <page-header title="Combo" description="Combo lets you choose value from a list"></page-header>
+    <section class="sample-content">
+        <igx-combo data="items"></igx-combo>
+    </section>
+</div>

demos/app/combo/sample.component.html

@@ -0,0 +1,107 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { IgxComboComponent } from "../../lib/main";
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: "combo-sample",
+    templateUrl: "./sample.component.html",
+    styleUrls: ["sample.component.css"]
+})
+export class ComboSampleComponent implements OnInit {
+    private width = "160px";
+    @ViewChild(IgxComboComponent) public igxCombo: IgxComboComponent;
+
+    items: any[] = [];
+
+    ngOnInit() {
+
+    }
+
+    constructor() {
+        const states = [
+            "New England",
+            "Connecticut",
+            "Maine",
+            "Massachusetts",
+            "New Hampshire",
+            "Rhode Island",
+            "Vermont",
+            "Mid-Atlantic",
+            "New Jersey",
+            "New York",
+            "Pennsylvania",
+            "East North Central",
+            "Illinois",
+            "Indiana",
+            "Michigan",
+            "Ohio",
+            "Wisconsin",
+            "West North Central",
+            "Iowa",
+            "Kansas",
+            "Minnesota",
+            "Missouri",
+            "Nebraska",
+            "North Dakota",
+            "South Dakota",
+            "South Atlantic",
+            "Delaware",
+            "Florida",
+            "Georgia",
+            "Maryland",
+            "North Carolina",
+            "South Carolina",
+            "Virginia",
+            "District of Columbia",
+            "West Virginia",
+            "East South Central",
+            "Alabama",
+            "Kentucky",
+            "Mississippi",
+            "Tennessee",
+            "West South Central",
+            "Arkansas",
+            "Louisiana",
+            "Oklahoma",
+            "Texas",
+            "Mountain",
+            "Arizona",
+            "Colorado",
+            "Idaho",
+            "Montana",
+            "Nevada",
+            "New Mexico",
+            "Utah",
+            "Wyoming",
+            "Pacific",
+            "Alaska",
+            "California",
+            "Hawaii",
+            "Oregon",
+            "Washington"];
+
+        const areas = [
+            "New England",
+            "Mid-Atlantic",
+            "East North Central",
+            "West North Central",
+            "South Atlantic",
+            "East South Central",
+            "West South Central",
+            "Mountain",
+            "Pacific"
+        ];
+
+        for (let i = 0; i < states.length; i += 1) {
+            const item = { field: states[i] };
+            if (areas.indexOf(states[i]) !== -1) {
+                item["header"] = true;
+            } else if (i % 7 === 4 || i > 49) {
+                item["disabled"] = true;
+            }
+            this.items.push(item);
+        }
+    }
+
+    onSelection(ev) {
+    }
+}

demos/app/combo/sample.component.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { IgxComboModule } from "../../lib/main";
+import { PageHeaderModule } from "../pageHeading/pageHeading.module";
+import { ComboSampleComponent } from "./sample.component";
+
+@NgModule({
+    declarations: [ComboSampleComponent],
+    imports: [CommonModule, PageHeaderModule, IgxComboModule]
+})
+export class ComboSampleModule { }

demos/app/combo/sample.module.ts

@@ -0,0 +1,15 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { IgxComboComponent, IgxComboModule } from "./combo.component";
+
+describe("Combo", () => {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [/*BasicComboComponent*/],
+            imports: [IgxComboModule]
+        }).compileComponents();
+    }));
+
+    it("Initialize combo", () => {
+
+    });
+});

src/combo/combo.component.spec.ts

@@ -26,6 +26,7 @@ export * from "./calendar";
 export * from "./card/card.component";
 export * from "./carousel/carousel.component";
 export * from "./checkbox/checkbox.component";
+export * from "./combo/combo.component";
 export * from "./date-picker/date-picker.component";
 export * from "./dialog/dialog.component";
 export * from "./input-group/input-group.component";