fix(chips): using debounce as output instead of input in demo (#647)

* fix(chips): using debounce as output instead of input in demo

* Updating demo code to explain use of timeout in chips

* chore(chips): add single source of truth for removal state `canRemoveChip` flag

* chore(): add code block for canRemoveChip flag

* fix(): fix padding issue with not removal state in chips

src/app/components/components/chips/chips.component.html

@@ -200,10 +200,10 @@
       <div class="push">
         <div class="md-body-1">Type and see how it will load items async:</div>
         <td-chips [items]="filteredAsync"
+                  [debounce]="500"
                   [(ngModel)]="asyncModel"
                   placeholder="Enter autocomplete strings"
                   (inputChange)="filterAsync($event)"
-                  (debounce)="1000"
                   requireMatch>
           <md-progress-bar [style.height.px]="2" *ngIf="filteringAsync" mode="indeterminate"></md-progress-bar>
         </td-chips>
@@ -216,10 +216,10 @@
         <td-highlight lang="html">
           <![CDATA[
             <td-chips [items]="filteredAsync"
+                      [debounce]="500"
                       [(ngModel)]="asyncModel"
                       placeholder="Enter autocomplete strings"
                       (inputChange)="filterAsync($event)"
-                      (debounce)="1000"
                       requireMatch>
               <md-progress-bar [style.height.px]="2" *ngIf="filteringAsync" mode="indeterminate"></md-progress-bar>
             </td-chips>
@@ -253,6 +253,7 @@
                 this.filteredAsync = undefined;
                 if (value) {
                   this.filteringAsync = true;
+                  // Timeout isn't actually needed here, only added for demo to simulate async behavior
                   setTimeout(() => {
                     this.filteredAsync = this.strings.filter((item: any) => {
                       return item.toLowerCase().indexOf(value.toLowerCase()) > -1;

src/app/components/components/chips/chips.component.ts

@@ -90,6 +90,7 @@ export class ChipsDemoComponent implements OnInit {
     this.filteredAsync = undefined;
     if (value) {
       this.filteringAsync = true;
+      // Timeout isn't actually needed here, only added for demo to simulate async behavior
       setTimeout(() => {
         this.filteredAsync = this.strings.filter((item: any) => {
           return item.toLowerCase().indexOf(value.toLowerCase()) > -1;

src/platform/core/chips/README.md

@@ -16,7 +16,7 @@ Properties:
 | `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false.
 | `placeholder?` | `string` | Placeholder for the autocomplete input.
 | `chipAddition` | `boolean` | Disables the ability to add chips. When setting readOnly as true, this will be overriden. Defaults to true.
-| `chipRemoval` | `boolean` | Disables the ability to remove chips. If it doesn't exist chipRemoval defaults to true. readyOnly must be false for this option to work.
+| `chipRemoval` | `boolean` | Disables the ability to remove chips. When setting readOnly 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.

src/platform/core/chips/chips.component.html

@@ -1,6 +1,7 @@
 <div class="td-chips-wrapper" [class.td-chips-stacked]="stacked">
   <ng-template let-chip let-first="first" let-index="index" ngFor [ngForOf]="value">
-    <md-basic-chip [class.td-chip-disabled]="readOnly || !chipRemoval"
+    <md-basic-chip [class.td-chip-disabled]="readOnly"
+                   [class.td-chip-after-pad]="!canRemoveChip"
                    [color]="color"
                    (keydown)="_chipKeydown($event, index)"
                    (focus)="setFocusedState()">
@@ -13,7 +14,7 @@
             [ngOutletContext]="{ chip: chip }">
           </ng-template>
         </div>
-        <md-icon *ngIf="!readOnly && chipRemoval" class="td-chip-removal" (click)="_internalClick = removeChip(index)">
+        <md-icon *ngIf="canRemoveChip" class="td-chip-removal" (click)="_internalClick = removeChip(index)">
           cancel
         </md-icon>
       </div>

src/platform/core/chips/chips.component.scss

@@ -33,7 +33,7 @@
       box-sizing: border-box;
       max-width: 100%;
       position: relative;
-      &.td-chip-disabled {
+      &.td-chip-after-pad {
         @include rtl(padding, 0 12px 0 0, 0 0 0 12px);
       }
       md-icon.td-chip-removal {

src/platform/core/chips/chips.component.ts

@@ -180,6 +180,14 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
     return this._chipRemoval;
   }
 
+  /**
+   * Checks if not in readOnly state and if chipRemoval is set to 'true'
+   * States if a chip can be removed
+   */
+  get canRemoveChip(): boolean {
+    return this.chipRemoval && !this.readOnly;
+  }
+
   /**
    * placeholder?: string
    * Placeholder for the autocomplete input.
@@ -391,11 +399,11 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
    */
   addChip(value: any): boolean {
     /**
-     * add a 200 ms delay when reopening the autocomplete to give it time
+     * add a debounce ms delay when reopening the autocomplete to give it time
      * to rerender the next list and at the correct spot
      */
     this._closeAutocomplete();
-    Observable.timer(200).toPromise().then(() => {
+    Observable.timer(this.debounce).toPromise().then(() => {
       this.setFocusedState();
       this._setFirstOptionActive();
       this._openAutocomplete();
@@ -532,15 +540,9 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit,
     switch (event.keyCode) {
       case DELETE:
       case BACKSPACE:
-        /** Check to see if not in [readOnly] state to delete a chip */
-        if (!this.readOnly) {
-          /** 
-           * Checks [chipRemoval] state to delete a chips
-           * To enable [chipRemoval] the [readOnly] state must be true.
-           */
-          if (this.chipRemoval) {
-            this.removeChip(index);
-          }
+        /** Check to see if we can delete a chip */
+        if (this.canRemoveChip) {
+         this.removeChip(index);
         }
         break;
       case UP_ARROW: