feat(chips): ability to disable chip addition (input). (closes #500)

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

@@ -7,7 +7,7 @@
       <ng-template md-tab-label>Demo</ng-template>
       <div class="push">
         <div class="md-body-1">Type and select a preset option:</div>
-        <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+        <td-chips [autoComplete]="autoComplete" [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
       </div>
     </md-tab>
     <md-tab>
@@ -16,7 +16,7 @@
         <p>HTML:</p>
         <td-highlight lang="html">
           <![CDATA[
-            <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+            <td-chips [items]="items" [autoComplete]="autoComplete" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
           ]]>
         </td-highlight>
         <p>Typescript:</p>
@@ -53,6 +53,7 @@
   <md-divider></md-divider>
   <md-card-actions>
     <button md-button color="primary" (click)="toggleReadOnly()" class="text-upper">Toggle ReadOnly</button>
+    <button md-button color="primary" (click)="toggleAutocomplete()" class="text-upper">Toggle Autocomplete</button>
   </md-card-actions>
 </md-card>
 <md-card>

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

@@ -40,9 +40,14 @@ export class ChipsDemoComponent {
                   Sends chip value as event.`,
     name: 'remove?',
     type: 'function',
+  },  {
+    description: `Disables autocomplete. If it doesn't exist autocomplete defaults to true.`,
+    name: 'autocomplete?',
+    type: 'boolean',
   }];
 
   readOnly: boolean = false;
+  autoComplete: boolean = true;
 
   items: string[] = [
     'stepper',
@@ -63,5 +68,8 @@ export class ChipsDemoComponent {
   toggleReadOnly(): void {
     this.readOnly = !this.readOnly;
   }
+  toggleAutocomplete(): void {
+    this.autoComplete = !this.autoComplete;
+  }
 
 }

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

@@ -9,6 +9,7 @@
         </md-icon>
       </md-basic-chip>
     </ng-template>
+    <div *ngIf="autoComplete">
     <md-input-container floatPlaceholder="never"
                         [style.width.px]="readOnly ? 0 : null"
                         [color]="matches ? 'primary' : 'warn'">
@@ -23,11 +24,13 @@
               (focus)="handleFocus()"
               (blur)="handleBlur()">
     </md-input-container>
+
     <md-autocomplete #autocomplete="mdAutocomplete">
       <ng-template let-item ngFor [ngForOf]="filteredItems | async">
         <md-option (click)="addChip(input.value)" [value]="item">{{item}}</md-option>
       </ng-template>
     </md-autocomplete>
+    </div>
   </md-chip-list>
   <div class="mat-input-underline"
        [class.mat-disabled]="readOnly">

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

@@ -65,6 +65,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
    * Enables Autocompletion with the provided list of strings.
    */
   @Input('items') items: string[] = [];
+
 
   /**
    * requireMatch?: boolean
@@ -79,6 +80,8 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
     return this._requireMatch;
   }
 
+
+
   /**
    * readOnly?: boolean
    * Disables the chips input and chip removal icon.
@@ -96,6 +99,12 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
     return this._readOnly;
   }
 
+    /**
+   * autoComplete?: boolean
+   * Disables autocomplete. If it doesn't exist autocomplete defaults to true.
+   */
+  @Input('autoComplete') autoComplete: boolean = true;
+
   /**
    * placeholder?: string
    * Placeholder for the autocomplete input.
@@ -227,6 +236,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
       case DELETE:
       case BACKSPACE:
         /** Check to see if input is empty when pressing left arrow to move to the last chip */
+
         if (!this._inputChild.value) {
           this._focusLastChip();
           event.preventDefault();
@@ -257,7 +267,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
            * Checks if deleting last single chip, to focus input afterwards
            * Else check if its not the last chip of the list to focus the next one.
            */
-          if (index === (this._totalChips - 1) && index === 0) {
+          if (index === (this._totalChips - 1) && index === 0 && this.autoComplete) {
             this.focus();
           } else if (index < (this._totalChips - 1)) {
             this._focusChip(index + 1);
@@ -267,20 +277,22 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
         break;
       case LEFT_ARROW:
         /** Check to see if left arrow was pressed while focusing the first chip to focus input next */
-        if (index === 0) {
+        if (index === 0 && this.autoComplete) {
           this.focus();
           event.stopPropagation();
         }
         break;
       case RIGHT_ARROW:
         /** Check to see if right arrow was pressed while focusing the last chip to focus input next */
-        if (index === (this._totalChips - 1)) {
+        if (index === (this._totalChips - 1) && this.autoComplete) {
           this.focus();
           event.stopPropagation();
         }
         break;
       case ESCAPE:
+        if (this.autoComplete) {
         this.focus();
+        }
         break;
       default:
         // default