docs: components revamp

app/ng-ui-widgets-category/text-field/styling/styling.component.html

@@ -1,7 +1,7 @@
 <StackLayout class="form" sdkExampleTitle sdkToggleNavButton>
     <!-- >> textfield-styling-props -->
     <TextField hint="Enter text" 
-               color="whitesmoke" 
+               color="orangered" 
                backgroundColor="lightyellow">
     </TextField>
     <!-- << textfield-styling-props -->

app/ng-ui-widgets-category/text-view/end.md

@@ -1,8 +1,49 @@
+## Properties
 
-**API Reference for the** [TextView Class](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html)
+| Name     | Type     | Description    |
+|:---------|:---------|:---------------|
+| `autocapitalizationType` | [`AutocapitalizationType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#autocapitalizationtype) | Gets or sets the autocapitalization type. |
+| `autocorrect` | `boolean` | Enables or disables autocorrection. |
+| `keyboardType` | [`KeyboardType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#keyboardtype) | Gets or sets the soft keyboard type |
+| `letterSpacing` | `number` | Gets or sets letter space style property. |
+| `lineHiehgt` | `number` | Gets or sets line height style property. |
+| `maxLength` | `number` | Gets or sets the max number of symbols allowed as input. |
+| `returnKeyType` | [`ReturnKeyType`](https://docs.nativescript.org/api-reference/modules/_ui_editor_text_base_#returnkeytype) | Gets or sets the soft keyboard return key flavor. |
+| `secure` | `string` | Gets or sets if a text field is for password entry. |
+| `text` | `string` | Gets or sets the text. |
+| `textAlignment` | `TextAlignment` | Gets or sets the text alignment. |
+| `textDecoration` | `TextDecoration` | Gets or sets the text decoration. |
+| `textTransform` | `TextTransform` | Gets or sets the text transform. |
+| `whiteSpace` | `WhiteSpace` | Gets or sets white space style property. |
 
-**Native Component**
+## Methods
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `focus` | Tries to focus the view. Returns a value indicating whether this view or one of its descendants actually took focus. Returns `boolean`. |
+| `dismissSoftInput` | Hides the soft input method, ususally a soft keyboard. |
+
+## Events
+
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `blur` | Emitted when the text field is unfocused. |
+| `focus` | Emitted when the text field is focused. |
+| `returnPress` | Emitted when the return key is tapped. |
+| `textChange` | Emitted when there is a new text input. |
+
+## API References
+
+| Name     | Type    |
+|----------|---------|
+| [tns-core-modules/ui/text-view](http://docs.nativescript.org/api-reference/modules/_ui_text_view_.html) | `Module` | 
+| [TextView](https://docs.nativescript.org/api-reference/classes/_ui_text_view_.textview) | `Class` |
+
+
+## Native Component
 
 | Android               | iOS      |
 |:----------------------|:---------|
 | [android.widget.EditText](http://developer.android.com/reference/android/widget/EditText.html) | [UITextView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextView_Class/) |
+
+

app/ng-ui-widgets-category/text-view/metadata.md

@@ -4,3 +4,4 @@ description: TextView component is an abstraction over iOS's UITextView and Andr
 position: 44
 slug: text-view-ng
 ---
+example-order: usage, styling

app/ng-ui-widgets-category/text-view/overview.md

@@ -1 +1 @@
-The TextView component can be used to type large text in your app. The component can also be used show any content by setting the `editable` property to `false`.
+The `TextView` component can be used to type larger text content in your app. The component can also be used show any content by setting the `editable` property to `false`.

app/ng-ui-widgets-category/text-view/text-view-examples.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic TextView", "/text-view/basic")
+    new Link("Usage", "/text-view/usage")
 ];
 
 @Component({

app/ng-ui-widgets-category/text-view/text-view-examples.module.ts

@@ -3,7 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
 import { TextViewExamplesComponent } from "./text-view-examples.component";
-import { BasicTextViewComponent } from "./basic-text-view/basic-text-view.component";
+import { UsageComponent } from "./usage/usage.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -12,9 +12,9 @@ export const routerConfig = [
         component: TextViewExamplesComponent
     },
     {
-        path: "basic",
-        component: BasicTextViewComponent,
-        data: { title: "Basic TextView" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -27,7 +27,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [TextViewExamplesComponent, BasicTextViewComponent]
+    declarations: [TextViewExamplesComponent, UsageComponent]
 })
 
 export class TextViewExamplesModule {

app/ng-ui-widgets-category/text-view/usage/article.md

@@ -0,0 +1,2 @@
+<snippet id='textview-html'/>
+<snippet id='textview-edit-disable-code'/>

app/ng-ui-widgets-category/text-view/usage/usage.component.html

@@ -0,0 +1,15 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton>
+	<!-- >> textview-html -->
+	<TextView hint="Enter Date" 
+			  [text]="name" 
+			  secure="false"
+			  keyboardType="datetime"
+			  returnKeyType="done"
+			  (returnPress)="onReturnPress($event)"
+			  autocorrect="false"
+			  maxLength="10"
+			  (focus)="onFocus($event)"
+			  (blur)="onBlur($event)">
+	</TextView>
+	<!-- << textview-html -->
+</GridLayout>

app/ng-ui-widgets-category/text-view/basic-text-view/basic-text-view.component.ts → app/ng-ui-widgets-category/text-view/usage/usage.component.ts

@@ -3,12 +3,9 @@ import { Component } from "@angular/core";
 
 @Component({
     moduleId: module.id,
-    // >> (hide)
-    styleUrls: ["./style.css"],
-    // << (hide)
-    templateUrl: "./basic-text-view.component.html"
+    templateUrl: "./usage.component.html"
 })
-export class BasicTextViewComponent {
+export class UsageComponent {
 
     public editState = true;
     public tvtext = "";

app/ng-ui-widgets-category/time-picker/end.md

@@ -1,8 +1,38 @@
+## Properties
 
-**API Reference for the** [TimePicker Class](http://docs.nativescript.org/api-reference/modules/_ui_time_picker_.html)
+| Name     | Type     | Description    |
+|:---------|:---------|:---------------|
+| `hour` | `number` | Gets or sets the time hour. |
+| `maxHour` | `number` | Gets or sets the max time hour. |
+| `maxMinute` | `number` | Gets or sets the max time minute. |
+| `minHour` | `number` | Gets or sets the min time hour. |
+| `minMinute` | `number` | Gets or sets the min time minute. |
+| `minute` | `number` | Gets or sets the time minute. |
+| `minuteInterval` | `number` | Gets or sets the time hour |
+| `time` | `Date` | Gets or sets the time while passing a `Date` object (use it instaed `hour` and `minute`). |
 
-**Native Component**
+## Events
 
-| Android                | iOS      |
-|:-----------------------|:---------|
+| Name                   | Description                                           |
+|:-----------------------|:------------------------------------------------------|
+| `hourChange` | Emitted when the `hour` property is changed. |
+| `minuteChange` | Emitted when the `minute` property is changed. |
+| `timeChange` | Emitted when the `hour`, `minute` or `time` property is changed. |
+
+
+## API References
+
+| Name     | Type    |
+|----------|---------|
+| [tns-core-modules/ui/time-picker](http://docs.nativescript.org/api-reference/modules/_ui_time_picker_.html)) | `Module` | 
+| [TimePicker](https://docs.nativescript.org/api-reference/classes/_ui_time_picker_.timepicker) | `Class` |
+
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
 | [android.widget.TimePicker](http://developer.android.com/reference/android/widget/TimePicker.html) | [UIDatePicker](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIDatePicker_Class/index.html) | 
+
+
+

app/ng-ui-widgets-category/time-picker/metadata.md

@@ -4,3 +4,4 @@ description:  TimePicker is UI control, which allows choosing a time from a read
 position: 45
 slug: time-picker-ng
 ---
+example-order: usage, styling

app/ng-ui-widgets-category/time-picker/overview.md

@@ -1 +1 @@
-NativeScript provides a TimePicker control that enables users to choose a time as a ready-to-use dialog. Every time part can be picked separately by its corresponding section of the control - for hour, minutes and AM/PM. 
+NativeScript provides a `TimePicker` control that enables users to choose a time as a ready-to-use dialog. Every time part can be picked separately by its corresponding section of the control - for hour, minutes and AM/PM. 

app/ng-ui-widgets-category/time-picker/time-picker-examples.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Configure TimePicker", "/time-picker/configure")
+    new Link("Usage", "/time-picker/usage")
 ];
 
 @Component({

app/ng-ui-widgets-category/time-picker/time-picker-examples.module.ts

@@ -2,7 +2,7 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { TimePickerExamplesComponent } from "./time-picker-examples.component";
-import { ConfigureTimePickerComponent } from "./configure-time-picker/configure-time-picker.component";
+import { UsageComponent } from "./usage/usage.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -11,9 +11,9 @@ export const routerConfig = [
         component: TimePickerExamplesComponent
     },
     {
-        path: "configure",
-        component: ConfigureTimePickerComponent,
-        data: { title: "Configure TimePicker" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     }
 ];
 
@@ -25,7 +25,7 @@ export const routerConfig = [
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],
-    declarations: [TimePickerExamplesComponent, ConfigureTimePickerComponent]
+    declarations: [TimePickerExamplesComponent, UsageComponent]
 })
 
 export class TimePickerExamplesModule {

app/ng-ui-widgets-category/time-picker/usage/article.md

@@ -0,0 +1,4 @@
+The `TimePicker` component can be configured by  `hour` and `minute` (accepts `number` values) or alternatively by setting the `date` property (accepts a `Date` object).
+
+<snippet id='creating-timepicker-html'/>
+<snippet id='time-picker-configure-code'/>

app/ng-ui-widgets-category/time-picker/usage/usage.component.html

@@ -0,0 +1,13 @@
+<GridLayout sdkExampleTitle sdkToggleNavButton>
+	<!-- >> creating-timepicker-html -->
+	<TimePicker hour="9"
+				minute="25"
+				maxHour="23"
+				maxMinute="59"
+				minuteInterval="5"
+				(timeChange)="onTimeChanged($event)">
+	</TimePicker>
+	<!-- Alternatively, you could use the time property with a Date object -->
+	<!-- <TimePicker [time]="todayObj" (timeChange)="onTimeChanged($event)"></TimePicker> -->
+	<!-- << creating-timepicker-html -->
+</GridLayout>

app/ng-ui-widgets-category/time-picker/usage/usage.component.ts

@@ -0,0 +1,19 @@
+// >> time-picker-configure-code
+import { Component } from "@angular/core";
+import { TimePicker } from "tns-core-modules/ui/time-picker";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html"
+})
+export class UsageComponent {
+    todayObj: Date = new Date();
+
+    onTimeChanged(args) {
+        const tp = args.object as TimePicker;
+
+        const time = args.value;
+        console.log(`Chosen time: ${time}`);
+    }
+}
+// << time-picker-configure-code