docs: components revamp

app/ng-ui-widgets-category/htmlview/end.md

@@ -18,7 +18,6 @@
 | [HtmlView](https://docs.nativescript.org/api-reference/modules/_ui_html_view_) | `Module` | 
 | [HtmlView](https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview) | `Class` | 
 
-
 ## Native Component
 
 | Android               | iOS      |

app/ng-ui-widgets-category/search-bar/end.md

@@ -0,0 +1,29 @@
+## Properties
+
+| Name     | Type    | Description    |
+|----------|---------|----------------|
+| `hint`   | `string` | Gets or sets the text of the search bar text field hint/placeholder. |
+| `text`   | `string` | Gets or sets a search bar text. |
+| `textFieldBackgroundColor`   | `Color` | Gets or sets the TextField background color of the SearchBar component. |
+| `textFieldHintColor`   | `Color` | Gets or sets the TextField Hint color of the SearchBar component. |
+
+## Events
+
+| Name     | Description    |
+|----------|----------------|
+| `clear`  | Emitted when the search is cleared (via the clear button). |
+| `submit` | Emitted when the serach term is submitted.   |
+
+
+## API References
+
+| Name     | Type    | 
+|----------|---------|
+| [tns-core-modules/ui/search-bar](https://docs.nativescript.org/api-reference/modules/_ui_search_bar_) | `Module` | 
+| [SearchBar](https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar) | `Class` | 
+
+## Native Component
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [android.widget.SearchView](https://developer.android.com/reference/android/widget/SearchView) | [UISearchBar](https://developer.apple.com/documentation/uikit/uisearchbar) | 

app/ng-ui-widgets-category/search-bar/metadata.md

@@ -4,3 +4,4 @@ description: SearchBar is a component, which represents `UISearchBar`  component
 position: 37
 slug: search-bar-ng
 ---
+example-order: usage, styling

app/ng-ui-widgets-category/search-bar/overview.md

@@ -1,2 +1,2 @@
-The SearchBar module represents a UI component similar to `UISearchBar` in iOS and `SearchView` for Android, both of which allow you to to create a simple filter for the the content in the app. 
-This module gives you the simple way to handle a `submit` event and a `clear` event.
+The `SearchBar` module represents a UI component similar to `UISearchBar` in iOS and `	android.widget.SearchView` for Android, both of which allow you to to create a simple filter for the the content in the app. 
+This component provides `hint` and `text` properties and `submit` and `clear` events.

app/ng-ui-widgets-category/search-bar/search-bar-examples.component.ts

@@ -2,9 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
 import { Link } from "./../../link";
 
 let menuLinks = [
-    new Link("Basic SearchBar", "/search-bar/basic"),
-    new Link("Clear SearchBar", "/search-bar/clear"),
-    new Link("SearchBar binding", "/search-bar/binding")
+    new Link("Usage", "/search-bar/usage"),
+    new Link("Styling", "/search-bar/styling")
 ];
 
 @Component({

app/ng-ui-widgets-category/search-bar/search-bar-examples.module.ts

@@ -2,9 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { SearchBarExamplesComponent } from "./search-bar-examples.component";
-import { BasicSearchBarComponent } from "./basic-search-bar/basic-search-bar.component";
-import { ClearSearchBarComponent } from "./clear-search-bar/clear-search-bar.component";
-import { SearchBarBindingComponent } from "./search-bar-binding/search-bar-binding.component";
+import { UsageComponent } from "./usage/usage.component";
+import { StylingComponent } from "./styling/styling.component";
 import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
 
 export const routerConfig = [
@@ -13,19 +12,14 @@ export const routerConfig = [
         component: SearchBarExamplesComponent
     },
     {
-        path: "basic",
-        component: BasicSearchBarComponent,
-        data: { title: "Basic SearchBar" }
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
     },
     {
-        path: "clear",
-        component: ClearSearchBarComponent,
-        data: { title: "Clear SearchBar" }
-    },
-    {
-        path: "binding",
-        component: SearchBarBindingComponent,
-        data: { title: "SearchBar property binding" }
+        path: "styling",
+        component: StylingComponent,
+        data: { title: "Styling" }
     }
 ];
 
@@ -39,9 +33,8 @@ export const routerConfig = [
     ],
     declarations: [
         SearchBarExamplesComponent,
-        BasicSearchBarComponent,
-        ClearSearchBarComponent,
-        SearchBarBindingComponent
+        UsageComponent,
+        StylingComponent
     ]
 })
 

app/ng-ui-widgets-category/search-bar/styling/article.md

@@ -0,0 +1 @@
+<snippet id='search-bar-styling'/>

app/ng-ui-widgets-category/search-bar/styling/styling.component.html

@@ -0,0 +1,11 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <!-- >> search-bar-styling -->
+    <SearchBar hint="Search" 
+               color="yellow" backgroundColor="red"
+               textFieldHintColor="whitesmoke"
+               textFieldBackgroundColor="orangered">
+    </SearchBar>
+    <!-- << search-bar-styling -->
+</StackLayout>
+
+

app/ng-ui-widgets-category/search-bar/styling/styling.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./styling.component.html"
+})
+export class StylingComponent {
+
+}

app/ng-ui-widgets-category/search-bar/usage/article.md

@@ -0,0 +1,4 @@
+Using `SearchBar` component with `hint` and `text` with Angular binding. The user input can be handled by using the `submit`, `textChange` and `clear` events.
+
+<snippet id='basic-search-bar-html'/>
+<snippet id='search-bar-submit-event-code'/>

app/ng-ui-widgets-category/search-bar/usage/usage.component.html

@@ -0,0 +1,8 @@
+<StackLayout sdkExampleTitle sdkToggleNavButton>
+    <!-- >> basic-search-bar-html -->
+    <SearchBar hint="Enter search term here ..."
+                [text]="searchPhrase" (textChange)="onTextChanged($event)" 
+                (clear)="onClear($event)" (submit)="onSubmit($event)">
+    </SearchBar>
+    <!-- << basic-search-bar-html -->
+</StackLayout>

app/ng-ui-widgets-category/search-bar/usage/usage.component.ts

@@ -0,0 +1,27 @@
+// >> search-bar-submit-event-code
+import { Component } from "@angular/core";
+import { SearchBar } from "tns-core-modules/ui/search-bar";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./usage.component.html"
+})
+export class UsageComponent {
+    searchPhrase: string;
+
+    onSubmit(args) {
+        const searchBar = args.object as SearchBar;
+        console.log(`Searching for ${searchBar.text}`);
+    }
+
+    onTextChanged(args) {
+        const searchBar = args.object as SearchBar;
+        console.log(`Input changed! New value: ${searchBar.text}`);
+    }
+
+    onClear(args) {
+        const searchBar = args.object as SearchBar;
+        console.log(`Clear event raised`);
+    }
+}
+// << search-bar-submit-event-code