feat(navbar): Add basic searchbar component to site.

Author: riavalon

src/app/shared/navbar/index.ts

@@ -1 +1,2 @@
 export * from './navbar';
+export * from './searchbar';

src/app/shared/navbar/navbar.html

@@ -8,6 +8,7 @@
   </a>
   <a md-button class="docs-button" routerLink="components">Components</a>
   <a md-button class="docs-button" routerLink="guides">Guides</a>
+  <search-bar-component></search-bar-component>
   <a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
     <img class="docs-github-logo"
          src="../../../assets/img/homepage/github-circle-white-transparent.svg"

src/app/shared/navbar/navbar.scss

@@ -2,12 +2,6 @@
   display: flex;
   flex-wrap: wrap;
   padding: 8px 16px;
-
-  > .mat-button {
-    &:last-child {
-      margin-left: auto;
-    }
-  }
 }
 
 .docs-angular-logo {

src/app/shared/navbar/searchbar/index.ts

@@ -0,0 +1 @@
+export * from './searchbar';

src/app/shared/navbar/searchbar/searchbar.html

@@ -0,0 +1,16 @@
+<div class="search-input-container">
+  <input
+    placeholder="Search"
+    type="text"
+    (focus)="toggleIsExpanded(true)"
+    (blur)="toggleIsExpanded(false)"
+    (keyup.enter)="navigate($event.target.value.toLowerCase())"
+    [mdAutocomplete]="auto"
+    [formControl]="searchControl">
+</div>
+
+<md-autocomplete #auto="mdAutocomplete">
+  <md-option *ngFor="let item of filteredSuggestions | async" [value]="item.name">
+    {{item.name}}
+  </md-option>
+</md-autocomplete>

src/app/shared/navbar/searchbar/searchbar.scss

@@ -0,0 +1,62 @@
+$input-bg: #85D9E2;
+
+@mixin color-placeholder() {
+  -webkit-font-smoothing: antialiased;
+  color: white;
+}
+
+:host {
+  position: relative;
+  flex: 2;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &.expanded .search-input-container {
+    width: 100%;
+  }
+
+  .search-input-container {
+    display: block;
+    position: relative;
+    margin-left: auto;
+    height: 100%;
+    width: 200px;
+    transition: width .2s ease;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 15px; top: 50%;
+      transform: translateY(-50%);
+      height: 28px;
+      width: 28px;
+      background: url('../../../../assets/img/icons/ic_search_white_24px.svg') center center no-repeat;
+    }
+  }
+
+  input {
+    background: $input-bg;
+    border: none;
+    border-radius: 2px;
+    color: white;
+    font-size: 18px;
+    height: 95%;
+    line-height: 95%;
+    padding-left: 50px;
+    position: relative;
+    transition: width .2s ease;
+    width: 100%;
+
+    /* Set placeholder text to be white */
+    &::-webkit-input-placeholder { @include color-placeholder(); } /* Chrome/Opera/Safari */
+    &::-moz-placeholder { @include color-placeholder(); } /* Firefox 19+ */
+    &:-moz-placeholder { @include color-placeholder(); } /* Firefox 18- */
+    &:ms-input-placeholder { @include color-placeholder(); } /* IE 10+ */
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+}

src/app/shared/navbar/searchbar/searchbar.ts

@@ -0,0 +1,51 @@
+import {Component, HostBinding} from '@angular/core';
+import {Router} from '@angular/router';
+import {FormControl} from '@angular/forms';
+import {MdSnackBar} from '@angular/material';
+import {Observable} from 'rxjs';
+
+import {DocumentationItems, DocItem} from '../../documentation-items/documentation-items';
+
+
+@Component({
+  selector: 'search-bar-component',
+  templateUrl: './searchbar.html',
+  styleUrls: ['./searchbar.scss']
+})
+
+export class SearchBar {
+  @HostBinding('class.expanded') _isExpanded = false;
+  public allDocItems: DocItem[];
+  public filteredSuggestions: Observable<DocItem[]>;
+  public searchControl: FormControl = new FormControl('');
+
+  constructor(
+    private _docItems: DocumentationItems,
+    private _router: Router,
+    private _snackBar: MdSnackBar
+  ) {
+    this.allDocItems = _docItems.getAllItems();
+    this.filteredSuggestions = this.searchControl.valueChanges
+      .startWith(null)
+      .map(item => this.filterSearchSuggestions(item));
+  }
+
+  public toggleIsExpanded() {
+    this._isExpanded = !this._isExpanded;
+  }
+
+  public filterSearchSuggestions(searchTerm): DocItem[] {
+    return this.allDocItems.filter(item => new RegExp(`^${searchTerm}`, 'gi').test(item.name));
+  }
+
+  public navigate(searchValue) {
+    const category = this.allDocItems.find(item => item.name.toLowerCase() === searchValue);
+    category ?
+      this._router.navigateByUrl(`/components/component/${category.id}`) :
+      this._showError();
+  }
+
+  private _showError() {
+    this._snackBar.open('No search results found.', null, {duration: 3000});
+  }
+}

src/app/shared/shared-module.ts

@@ -1,9 +1,11 @@
 import {NgModule} from '@angular/core';
 import {HttpModule} from '@angular/http';
+import {ReactiveFormsModule} from '@angular/forms';
 import {DocViewer} from './doc-viewer/doc-viewer';
 import {ExampleViewer} from './example-viewer/example-viewer';
 import {DocumentationItems} from './documentation-items/documentation-items';
 import {NavBar} from './navbar/navbar';
+import {SearchBar} from './navbar/searchbar/searchbar';
 import {MaterialModule} from '@angular/material';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
@@ -16,9 +18,10 @@ import {GuideItems} from './guide-items/guide-items';
     HttpModule,
     RouterModule,
     BrowserModule,
+    ReactiveFormsModule,
     MaterialModule,
   ],
-  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
+  declarations: [DocViewer, ExampleViewer, NavBar, SearchBar, PlunkerButton],
   exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
   providers: [DocumentationItems, GuideItems],
   entryComponents: [