feat(chips): chip templates + object list support + async loading support. (closes #252) (closes #359) (closes #601)

[emoralesb05]

Description

Addresses:
#359
#601
#252

Part of OnPush epic: #325

What's included?

• fix(chips): keep focused state as long as you keep clicking inside the chips context.

• fix(chips): make underline animate the same way as material

• feat(chips): ability to use object lists and set templates for both autocomplete and chips
  this will be the base to support contact chips.

Usage

<td-chips [items]="objects"
          [(ngModel)]="objectsModel"
          placeholder="Enter autocomplete strings"
          requireMatch>
  <ng-template td-basic-chip let-chip="chip">
    {{chip.city}}, (Pop: {{chip.population}})
  </ng-template>
  <ng-template td-autocomplete-option let-option="option">
    <md-icon>location_city</md-icon> {{option.city}}
  </ng-template>
</td-chips>

• BREAKING CHANGE feat(chips): abstract the autocomplete filtering and add [debounce] input and (inputChange) output to implement filtering locally or server side.

it makes more sense to have the filtering done outside of chips and we also provide examples on how to achieve it since this way chips are agnostic of local vs server side filtering + string vs object filtering

Usage

<td-chips [items]="filteredStrings"
          [(ngModel)]="stringsModel"
          placeholder="Enter autocomplete strings"
          (inputChange)="filterStrings($event)"
          requireMatch>
</td-chips>

strings: string[] = [
    'stepper',
    'expansion-panel',
    'markdown',
    'highlight',
    'loading',
    'media',
    'chips',
    'http',
    'json-formatter',
    'pipes',
    'need more?',
  ];

  filteredStrings: string[];

  stringsModel: string[] = this.strings.slice(0, 6);

  ngOnInit(): void {
    this.filterStrings('');
  }

  filterStrings(value: string): void {
    this.filteredStrings = this.strings.filter((item: any) => {
      return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
    }).filter((filteredItem: any) => {
      return this.stringsModel ? this.stringsModel.indexOf(filteredItem) < 0 : true;
    });
  }

• perf(chips): support OnPush change detection
• docs(chips): update docs with more examples on how to use all this.

Test Steps

• ng serve
• Go to http://localhost:4200/#/components/chips
• Play around with all demos (a11y, click selections, filtering, etc etc)

General Tests for Every PR

• ng serve --aot still works.
• npm run lint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.