feat(docs): search and virtual scroll README refactor (#1093)

* refactor(): updated search README.md from table to list

* refactor(): virtual scroll README.md to use list rather table

* refactor(): match messages format

src/app/components/components/search/search.component.html

@@ -42,74 +42,7 @@ <h3>Search Box in Toolbar</h3>
     <button mat-button color="primary" (click)="toggleAlwaysVisible()" class="text-upper">Always Visible</button>
   </mat-card-actions>
 </mat-card>
-<mat-card>
-  <mat-card-title>TdSearchInputComponent</mat-card-title>
-  <mat-card-subtitle>How to use this component</mat-card-subtitle>
-  <mat-divider></mat-divider>
-  <mat-card-content>
-    <h2><code><![CDATA[<td-search-input>]]></code></h2>
-    <p>Use <code><![CDATA[<td-search-input>]]></code> element to generate a search input with its animated cancel button.</p>
-    <h3>Properties:</h3>
-    <p>The <code><![CDATA[<td-search-input>]]></code> component has {{searchInputAttrs.length}} properties:</p>
-    <mat-list>
-      <ng-template let-attr let-last="attr" ngFor [ngForOf]="searchInputAttrs">
-        <a mat-list-item layout-align="row">
-          <h3 matLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p matLine> {{attr.description}} </p>
-        </a>
-        <mat-divider *ngIf="!last"></mat-divider>
-      </ng-template>
-    </mat-list>
-    <h3>Example:</h3>
-    <p>HTML:</p>
-    <td-highlight lang="html">
-      <![CDATA[
-        <td-search-input placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
-        </td-search-input>
-      ]]>
-    </td-highlight>
-    <h3>Setup:</h3>
-    <p>Import the [CovalentSearchModule] in your NgModule:</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        import { CovalentSearchModule } from '@covalent/core/search';
-        @NgModule({
-          imports: [
-            CovalentSearchModule,
-            ...
-          ],
-          ...
-        })
-        export class MyModule {}
-      ]]>
-    </td-highlight>
-  </mat-card-content>
-</mat-card>
-<mat-card>
-  <mat-card-title>TdSearchBoxComponent</mat-card-title>
-  <mat-card-subtitle>How to use this component</mat-card-subtitle>
-  <mat-divider></mat-divider>
-  <mat-card-content>
-    <h2><code><![CDATA[<td-search-box>]]></code></h2>
-    <p>Use <code><![CDATA[<td-search-box>]]></code> element to generate a search box with animations.</p>
-    <h3>Properties:</h3>
-    <p>The <code><![CDATA[<td-search-box>]]></code> component has {{searchBoxAttrs.length}} properties:</p>
-    <mat-list>
-      <ng-template let-attr let-last="last" ngFor [ngForOf]="searchBoxAttrs">
-        <a mat-list-item layout-align="row">
-          <h3 matLine> {{attr.name}}: <span>{{attr.type}}</span></h3>
-          <p matLine> {{attr.description}} </p>
-        </a>
-        <mat-divider *ngIf="!last"></mat-divider>
-      </ng-template>
-    </mat-list>
-    <h3>Example:</h3>
-    <p>HTML:</p>
-    <td-highlight lang="html">
-      <![CDATA[
-        <td-search-box backIcon="arrow_back" placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
-        </td-search-box>
-      ]]>
-    </td-highlight>
-  </mat-card-content>
-</mat-card>
+
+<td-readme-loader resourceUrl="platform/core/search/search-input/README.md"></td-readme-loader>
+
+<td-readme-loader resourceUrl="platform/core/search/search-box/README.md"></td-readme-loader>

src/platform/core/search/search-box/README.md

@@ -0,0 +1,59 @@
+# TdSearchBoxComponent: td-search-box
+
+`td-search-box` element to generate a search box with animations.
+
+## API Summary
+
+#### Inputs
+
++ backIcon?: string
+  + The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
++ searchIcon?: string
+  + The icon used to open/focus the search toggle. Defaults to 'search' icon.
++ clearIcon?: string
+  + The icon used to clear the search input. Defaults to 'cancel' icon.
++ showUnderline?: boolean
+  + Sets if the input underline should be visible. Defaults to 'false'.
++ debounce?: number
+  + Debounce timeout between keypresses. Defaults to 400.
++ alwaysVisible?: boolean
+  + Sets if the input should always be visible. Defaults to 'false'.
++ placeholder?: string
+  + Placeholder for the underlying input component.
+
+#### Events
+
++ searchDebounce?: string
+  + Event emitted after the [debounce] timeout.
+  + Emits a [string].
++ search?: string
+  + Event emitted after the key enter has been pressed.
+  + Emits a [string].
++ clear?: string
+  + Event emitted after the clear icon has been clicked.
+  + Emits [void].
+
+## Setup
+
+Import the [CovalentSearchModule] in your NgModule:
+
+```typescript
+import { CovalentSearchModule } from '@covalent/core/search';
+@NgModule({
+  imports: [
+    CovalentSearchModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for HTML usage:
+
+```html
+  <td-search-box backIcon="arrow_back" placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+  </td-search-box>
+```

src/platform/core/search/search-input/README.md

@@ -0,0 +1,62 @@
+# TdSearchInputComponent: td-search-input
+
+`td-search-input` element to generate a search input with its animated cancel button.
+
+## API Summary
+
+#### Inputs
+
++ debounce?: number
+  + Debounce timeout between keypresses. Defaults to 400.
++ placeholder?: string
+  + Placeholder for the underlying input component.
++ showUnderline?: boolean
+  + Sets if the input underline should be visible. Defaults to 'false'.
++ clearIcon?: string
+  + The icon used to clear the search input. Defaults to 'cancel' icon.
+
+#### Events
+
++ searchDebounce: function
+  + Event emitted after the [debounce] timeout.
+  + Emits a [string].
++ search: function
+  + Event emitted after the key enter has been pressed.
+  + Emits a [string].
++ clear: function
+  + Event emitted after the clear icon has been clicked.
+  + Emits [void].
++ blur: function
+  + Event emitted after the blur event has been called in underlying input.
+  + Emits [void].
+
+#### Methods
++ focus: function
+  + Method to focus to underlying input.
++ clearSearch: function
+  + Method to clear the underlying input. 
+
+  ## Setup
+
+Import the [CovalentSearchModule] in your NgModule:
+
+```typescript
+import { CovalentSearchModule } from '@covalent/core/search';
+@NgModule({
+  imports: [
+    CovalentSearchModule,
+    ...
+  ],
+  ...
+})
+export class MyModule {}
+```
+
+## Usage
+
+Example for HTML usage:
+
+```html
+    <td-search-input placeholder="Search here" [(ngModel)]="searchInputTerm" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
+    </td-search-input>
+```

src/platform/core/search/search-input/search-input.component.ts

@@ -141,6 +141,9 @@ export class TdSearchInputComponent extends _TdSearchInputMixinBase implements I
     this.onSearch.emit(this.value);
   }
 
+  /**
+   * Method to clear the underlying input.
+   */
   clearSearch(): void {
     this.value = '';
     this._changeDetectorRef.markForCheck();

src/platform/core/virtual-scroll/README.md

@@ -6,16 +6,23 @@
 
 ## API Summary
 
-Properties:
-
-| Name | Type | Description |
-| --- | --- | 650--- |
-| `data` | `any[]` | List of items to virtually iterate on.
-| `trackBy?` | `TrackByFunction` | This accepts the same trackBy function [ngFor] does. https://angular.io/api/core/TrackByFunction
-| `refresh` | `function()` | Method to refresh and recalculate the virtual rows
-| `scrollTo` | `function(row)` | Method to scroll to a specific row of the list.
-| `scrollToStart` | `function()` | Method to scroll to the start of the list.
-| `scrollToEnd` | `function()` | Method to scroll to the end of the list.
+#### Inputs
+
++ data?: any[]
+  + List of items to virtually iterate on.
++ trackBy?: TrackByFunction
+  + This accepts the same trackBy function [ngFor] does.
+
+#### Methods
+
++ refresh?: function()
+  + Method to refresh and recalculate the virtual rows
++ scrollTo?: function(row: number)
+  + Method to scroll to a specific row of the list.
++ scrollToStart?: function()
+  + Method to scroll to the start of the list.
++ scrollToEnd?: function()
+  + Method to scroll to the end of the list.
 
 ## Setup
 

src/platform/core/virtual-scroll/virtual-scroll-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, Directive, Input, Output, EventEmitter, ContentChild, AfterViewInit, ViewChild,
+import { Component, Directive, Input, EventEmitter, ContentChild, AfterViewInit, ViewChild,
          ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, ElementRef, HostListener,
          Renderer2, AfterViewChecked, OnDestroy, TrackByFunction } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
@@ -27,7 +27,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi
 
   private _fromRow: number = 0;
   private _toRow: number = 0;
-  
+
   private _data: any[];
   private _virtualData: any[];
 
@@ -129,7 +129,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi
       }
     }
   }
-  
+
   /**
    * Method to refresh and recalculate the virtual rows
    * e.g. after changing the [data] content
@@ -180,7 +180,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi
       this._fromRow = 0;
       this._toRow = 0;
     }
-  
+
     let offset: number = 0;
     if (this._scrollVerticalOffset > (TD_VIRTUAL_OFFSET * this.rowHeight)) {
       offset = this.fromRow * this.rowHeight;