feat(docs): support list in pretty markdown to showcase API's better (#…

…1073)

also added example in chips README.md

src/app/documentation-tools/index.ts

@@ -2,12 +2,14 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+import { MatListModule } from '@angular/material/list';
 import { MatCardModule } from '@angular/material/card';
 
 import { CovalentDataTableModule, TdDataTableComponent } from '../../platform/core';
 import { CovalentHighlightModule, TdHighlightComponent } from '../../platform/highlight';
 import { CovalentMarkdownModule, TdMarkdownComponent } from '../../platform/markdown';
 
+import { TdFlavoredListComponent } from './pretty-markdown/cfm-list/cfm-list.component';
 import { TdPrettyMarkdownComponent, TdPrettyMarkdownContainerDirective } from './pretty-markdown/pretty-markdown.component';
 import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component';
 
@@ -16,11 +18,13 @@ import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component
     CommonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatListModule,
     CovalentDataTableModule,
     CovalentHighlightModule,
     CovalentMarkdownModule,
   ],
   declarations: [
+    TdFlavoredListComponent,
     TdPrettyMarkdownComponent,
     TdPrettyMarkdownContainerDirective,
     TdReadmeLoaderComponent,
@@ -30,7 +34,7 @@ import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component
     TdPrettyMarkdownContainerDirective,
     TdReadmeLoaderComponent,
   ],
-  entryComponents: [ TdDataTableComponent, TdMarkdownComponent, TdHighlightComponent, MatCheckbox ],
+  entryComponents: [TdDataTableComponent, TdMarkdownComponent, TdHighlightComponent, MatCheckbox, TdFlavoredListComponent ],
 })
 export class DocumentationToolsModule {
 }

src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.html

@@ -0,0 +1,13 @@
+<mat-list [attr.dense]="dense ? true : null">
+  <ng-template let-line let-last="last" ngFor [ngForOf]="lines">
+    <mat-list-item>
+      <h4 matLine>
+        {{line.line}}
+      </h4>
+      <p *ngFor="let subline of line.sublines" matLine>
+        {{subline}}
+      </p>
+    </mat-list-item>
+    <mat-divider *ngIf="!last"></mat-divider>
+  </ng-template>
+</mat-list>

src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.ts

@@ -0,0 +1,19 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+
+export interface IFlavoredListItem {
+  line: string;
+  sublines?: string[];
+}
+
+@Component({
+  selector: 'cfm-list',
+  styleUrls: ['./cfm-list.component.scss'],
+  templateUrl: './cfm-list.component.html',
+})
+export class TdFlavoredListComponent {
+  @Input() lines: IFlavoredListItem[];
+  @Input() dense: boolean = false;
+}

src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts

@@ -3,6 +3,7 @@ import { Component, Directive, AfterViewInit, ElementRef, Input, Renderer2, Secu
 import { DomSanitizer } from '@angular/platform-browser';
 
 import { MatCheckbox } from '@angular/material/checkbox';
+import { TdFlavoredListComponent, IFlavoredListItem } from './cfm-list/cfm-list.component';
 import { TdHighlightComponent } from '@covalent/highlight';
 import { TdMarkdownComponent } from '@covalent/markdown';
 import { TdDataTableComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumnWidth } from '@covalent/core';
@@ -75,6 +76,7 @@ export class TdPrettyMarkdownComponent implements AfterViewInit {
       markdown = lines.join('\n');
       markdown = this._replaceCheckbox(markdown);
       markdown = this._replaceTables(markdown);
+      markdown = this._replaceLists(markdown);
       markdown = this._replaceCodeBlocks(markdown);
       let keys: string[] = Object.keys(this._components);
       // need to sort the placeholders in order of encounter in markdown content
@@ -204,4 +206,24 @@ export class TdPrettyMarkdownComponent implements AfterViewInit {
       });
     });
   }
+
+  private _replaceLists(markdown: string): string {
+    let listRegExp: RegExp = /(?:^|\n)(( *\+)[ |\t](.*)\n)+/g;
+    return this._replaceComponent(markdown, TdFlavoredListComponent, listRegExp,
+      (componentRef: ComponentRef<TdFlavoredListComponent>, match: string) => {
+        let lineTexts: string[] = match.split(new RegExp('\\n {' + (match.indexOf('+') - 1).toString() + '}\\+[ |\\t]'));
+        lineTexts.shift();
+        let lines: IFlavoredListItem[] = [];
+        lineTexts.forEach((text: string, index: number) => {
+          let sublineTexts: string[] = text.split(/\n *\+ /);
+          lines.push({
+            line: sublineTexts.shift(),
+            sublines: sublineTexts.map((subline: string) => {
+              return subline.trim();
+            }),
+          });
+        });
+        componentRef.instance.lines = lines;
+      });
+  }
 }

src/platform/core/chips/README.md

@@ -8,25 +8,41 @@ Leverage the templates to create your own chip or contact chip.
 
 ## API Summary
 
-Properties:
+#### Inputs
 
-| Name | Type | Description |
-| --- | --- | 650--- |
-| `color?` | `'primary', 'accent' or 'warn'` | color for the input and focus state of the chips. Defaults to 'primary'
-| `items?` | `any[]` | Renders the `mat-autocomplete` with the provided list to display as options.
-| `requireMatch?` | `boolean` | Blocks custom inputs and only allows selections from the autocomplete list.
-| `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false.
-| `inputPosition?` | 'before' or 'after' | Set input position before or after the chips. Defaults to 'after'.
-| `placeholder?` | `string` | Placeholder for the autocomplete input.
-| `disabled?` | `boolean` | Sets disabled state and disabled addition/removal of chips.
-| `chipAddition` | `boolean` | Disables the ability to add chips. When setting disabled as true, this will be overriden. Defaults to true.
-| `chipRemoval` | `boolean` | Disables the ability to remove chips. When setting disabled as true, this will be overriden. Defaults to true.
-| `debounce` | `string` | Debounce timeout between keypresses. Defaults to 200.
-| `add?` | `function` | Method to be executed when a chip is added. Sends chip value as event.
-| `remove?` | `function` | Method to be executed when a chip is removed. Sends chip value as event.
-| `chipBlur?` | `function` | Method to be executed when a chip is blurred. Sends chip value as event.
-| `chipFocus?` | `function` | Method to be executed when a chip is focused. Sends chip value as event.
-| `inputChange?` | `function` | Method to be executed when the value in the autocomplete input changes. Sends string value as event.
++ color?: 'primary' | 'accent' | 'warn'
+  + color for the input and focus state of the chips. Defaults to 'primary'
++ items?: any[]
+  + Renders the `mat-autocomplete` with the provided list to display as options.
++ requireMatch?: boolean
+  + Blocks custom inputs and only allows selections from the autocomplete list.
++ stacked?: boolean
+  + Set stacked or horizontal chips depending on value. Defaults to false.
++ inputPosition?: before | after
+  + Set input position before or after the chips. Defaults to 'after'.
++ placeholder?: string
+  + Placeholder for the autocomplete input.
++ disabled?: boolean
+  + Sets disabled state and disabled addition/removal of chips.
++ chipAddition?: boolean
+  + Enables the ability to add chips. When setting disabled as true, this will be overriden. 
++ chipRemoval?: boolean
+  + Enables the ability to remove chips. When setting disabled as true, this will be overriden. 
++ debounce?: number
+  + Debounce timeout between keypresses. Defaults to 200.
+
+#### Events
+
++ add?: function
+  + Method to be executed when a chip is added. Sends chip value as event.
++ remove?: function
+  + Method to be executed when a chip is removed. Sends chip value as event.
++ chipBlur?: function
+  + Method to be executed when a chip is blurred. Sends chip value as event.
++ chipFocus?: function
+  + Method to be executed when a chip is focused. Sends chip value as event.
++ inputChange?: function
+  + Method to be executed when the value in the autocomplete input changes. Sends string value as event.
 
 ## Setup