[Do not merge] Add input-fields classes example

app/app.routes.ts

@@ -25,6 +25,8 @@ import { ModalTest, ModalTestWithPushStrategy, ModalContent } from "./modal/moda
 import { ModalViewMainPageComponent } from "./modal/modal-view-main-page";
 import { LazyLoadModalComponent } from "./modal/lazy/lazy-load-modal.component";
 
+import { InputFieldsComponents } from "./classes/input-fields.components";
+
 import { TabViewComponent } from "./tab-view/tab-view.component";
 
 import { NavigationOptionsComponent } from "./navigation-options/navigation-options.component";
@@ -61,6 +63,8 @@ export const routableComponents = [
     ModalTestWithPushStrategy,
     LazyLoadModalComponent,
 
+    InputFieldsComponents,
+
     TabViewComponent,
 
     NavigationOptionsComponent,
@@ -98,6 +102,8 @@ export const routes = [
     { path: 'modal/modal-dialogs-push', component: ModalTestWithPushStrategy, data: { title: "modal(onPush)" } },
     { path: 'modal/lazy', component: LazyLoadModalComponent, data: { title: "modal(lazy)" } },
 
+    { path: 'input-fields', component: InputFieldsComponents, data: { title: "input-fields", isNavigatable: true } },
+
     { path: 'tab-view', component: TabViewComponent, data: { title: "tab-view", isNavigatable: true } },
 
     { path: 'nav-options', component: NavigationOptionsComponent, data: { title: "nav-options", isNavigatable: true} },

app/classes/input-fields.components.html

@@ -0,0 +1,29 @@
+<StackLayout>
+
+    <!--checked-value-accessor.ts-->
+    <Switch [(ngModel)]="switch" #sw></Switch>
+    <Label [text]="sw.className"></Label>
+
+    <!--date-value-accessor.ts-->
+    <!--ERROR TypeError: Cannot read property 'getDay' of undefined-->
+    <DatePicker [(ngModel)]="dataPicker" #dp></DatePicker>
+    <Label [text]="dp.className"></Label>
+
+    <!--number-value-accessor.ts-->
+    <Slider [(ngModel)]="slider" #sl></Slider>
+    <Label [text]="sl.className"></Label>
+
+    <!--selectedIndex-value-accessor.ts-->
+    <SegmentedBar [items]="items" selectedIndex="2" [(ngModel)]="segmentedBar" #sb></SegmentedBar>
+    <Label [text]="sb.className"></Label>
+
+    <!--text-value-accessor.ts-->
+    <TextField [(ngModel)]="textField" #tf></TextField>
+    <Label [text]="tf.className"></Label>
+
+    <!--time-value-accessor.ts-->
+    <!--ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'getHours' of null-->
+    <TimePicker [(ngModel)]="timePicker" #tp></TimePicker>
+    <Label [text]="tp.className"></Label>
+
+</StackLayout>

app/classes/input-fields.components.ts

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import { DatePicker } from "ui/date-picker";
+import { SegmentedBarItem } from "ui/segmented-bar";
+
+@Component({
+    selector: "input-fields",
+    moduleId: module.id,
+    templateUrl: "./input-fields.components.html",
+})
+export class InputFieldsComponents {
+    switch = true;
+    dataPicker;
+    slider = 10;
+    segmentedBar;
+    textField;
+    timePicker;
+
+    public items: Array<SegmentedBarItem>;
+
+    constructor() {
+        this.items = [];
+        for (let i = 1; i < 4; i++) {
+            const item = new SegmentedBarItem();
+            item.title = "Tab " + i;
+            this.items.push(item);
+        }
+    }
+}

package.json

@@ -49,10 +49,10 @@
   },
   "scripts": {
     "ns-bundle": "ns-bundle",
-    "start-android-bundle": "npm run ns-bundle --android --start-app",
-    "start-ios-bundle": "npm run ns-bundle --ios --start-app",
-    "build-android-bundle": "npm run ns-bundle --android --run-app",
-    "build-ios-bundle": "npm run ns-bundle --ios --run-app",
-    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app"
+    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
+    "start-android-bundle": "npm run ns-bundle --android --run-app",
+    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
+    "build-android-bundle": "npm run ns-bundle --android --build-app",
+    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
   }
 }