comments addressed

Author: tinayuangao

src/demo-app/chips/chips-demo.html

@@ -53,8 +53,10 @@ <h4>Input Container</h4>
             <md-icon mdChipRemove>cancel</md-icon>
           </md-chip>
           <input mdInput placeholder="New Contributor..."
-                 [mdChipList]="chipList" (mdChipEnd)="add($event)"
-                 [separatorKeysCodes]="separatorKeysCodes" [mdChipListAddOnBlur]="addOnBlur" />
+                 [mdChipInputFor]="chipList"
+                 [mdChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                 [mdChipInputAddOnBlur]="addOnBlur"
+                 (mdChipInputTokenEnd)="add($event)" />
         </md-chip-list>
       </md-input-container>
 

src/lib/chips/chip-input.spec.ts

@@ -102,8 +102,10 @@ describe('MdChipInput', () => {
 @Component({
   template: `
     <md-chip-list>
-        <input mdInput mdChipList [mdChipListAddOnBlur]="addOnBlur" [separatorKeysCodes]="separatorKeys"
-       (mdChipEnd)="add($event)" />
+        <input mdInput mdChipInputFor
+              [mdChipInputAddOnBlur]="addOnBlur"
+              [mdChipInputSeparatorKeyCodes]="separatorKeys"
+              (mdChipInputTokenEnd)="add($event)" />
     </md-chip-list>
   `
 })

src/lib/chips/chip-input.ts

@@ -9,7 +9,7 @@ export interface MdChipInputEvent {
 }
 
 @Directive({
-  selector: 'input[mdChipList], input[matChipList]',
+  selector: 'input[mdChipInputFor], input[matChipInputFor]',
   host: {
     'class': 'mat-chip-input',
     '(keydown)': '_keydown($event)',
@@ -21,7 +21,7 @@ export class MdChipInput {
   _chipList: MdChipList;
 
   /** Register input for chip list */
-  @Input('mdChipList')
+  @Input('mdChipInputFor')
   set chipList(value: MdChipList) {
     if (value) {
       this._chipList = value;
@@ -32,7 +32,7 @@ export class MdChipInput {
   /**
    * Whether or not the chipEnd event will be emitted when the input is blurred.
    */
-  @Input('mdChipListAddOnBlur')
+  @Input('mdChipInputAddOnBlur')
   get addOnBlur() { return this._addOnBlur; }
   set addOnBlur(value) { this._addOnBlur = coerceBooleanProperty(value); }
   _addOnBlur: boolean = false;
@@ -43,19 +43,23 @@ export class MdChipInput {
    * Defaults to `[ENTER]`.
    */
   // TODO(tinayuangao): Support Set here
-  @Input() separatorKeysCodes: number[] = [ENTER];
+  @Input('mdChipInputSeparatorKeyCodes') separatorKeyCodes: number[] = [ENTER];
 
   /** Emitted when a chip is to be added. */
-  @Output('mdChipEnd')
+  @Output('mdChipInputTokenEnd')
   chipEnd = new EventEmitter<MdChipInputEvent>();
 
-  @Input('matChipList')
+  @Input('matChipInputFor')
   set matChipList(value: MdChipList) { this.chipList = value; }
 
-  @Input('matChipListAddOnBlur')
+  @Input('matChipInputAddOnBlur')
   get matAddOnBlur() { return this._addOnBlur; }
   set matAddOnBlur(value) { this.addOnBlur = value; }
 
+  @Input('matChipInputSeparatorKeyCodes')
+  get matSeparatorKeyCodes() { return this.separatorKeyCodes; }
+  set matSeparatorKeyCodes(v: number[]) { this.separatorKeyCodes = v; }
+
   /** The native input element to which this directive is attached. */
   protected _inputElement: HTMLInputElement;
 
@@ -77,7 +81,7 @@ export class MdChipInput {
 
   /** Checks to see if the (chipEnd) event needs to be emitted. */
   _emitChipEnd(event?: KeyboardEvent) {
-    if (!event || this.separatorKeysCodes.indexOf(event.keyCode) > -1) {
+    if (!event || this.separatorKeyCodes.indexOf(event.keyCode) > -1) {
       this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
 
       if (event) {

src/lib/chips/chip-list.spec.ts

@@ -350,7 +350,7 @@ class StandardChipList {
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
-        <input mdInput name="test" [mdChipList]="chipList"/>
+        <input mdInput name="test" [mdChipInputFor]="chipList"/>
       </md-chip-list>
     </md-input-container>
   `

src/lib/chips/chip-list.ts

@@ -73,7 +73,7 @@ function _isInputEmpty(element: HTMLElement): boolean {
 export class MdChipList implements AfterContentInit, OnDestroy {
 
   /** When a chip is destroyed, we track the index so we can focus the appropriate next chip. */
-  protected _destroyedIndex: number = null;
+  protected _lastDestroyedIndex: number = null;
 
   /** Track which chips we're listening to for focus/destruction. */
   protected _chipSet: WeakMap<MdChip, boolean> = new WeakMap();
@@ -121,14 +121,14 @@ export class MdChipList implements AfterContentInit, OnDestroy {
 
       // If we have 0 chips, attempt to focus an input (if available)
       if (chips.length == 0) {
-        this.focusInput();
+        this._focusInput();
       }
 
       // Check to see if we need to update our tab index
       this._checkTabIndex();
 
       // Check to see if we have a destroyed chip and need to refocus
-      this._checkDestroyedFocus();
+      this._updateFocusForDestroyedChips();
     });
   }
 
@@ -138,6 +138,10 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     }
   }
 
+  /**
+   * Whether or not this chip is selectable. When a chip is not selectable,
+   * it's selected state is always ignored.
+   */
   @Input()
   get selectable(): boolean { return this._selectable; }
   set selectable(value: boolean) {
@@ -150,20 +154,20 @@ export class MdChipList implements AfterContentInit, OnDestroy {
   }
 
   /**
-   * Programmatically focus the chip list. This in turn focuses the first non-disabled chip in this
-   * chip list, or the input if available and there are 0 chips.
+   * Focuses the the first non-disabled chip in this chip list, or the associated input when there
+   * are no eligible chips.
    */
-  // TODO: ARIA says this should focus the first `selected` chip if any are selected.
   focus(event?: Event) {
+    // TODO: ARIA says this should focus the first `selected` chip if any are selected.
     if (this.chips.length > 0) {
       this._keyManager.setFirstItemActive();
     } else {
-      this.focusInput();
+      this._focusInput();
     }
   }
 
   /** Attempt to focus an input if we have one. */
-  focusInput() {
+  _focusInput() {
     if (this._inputElement) {
       this._inputElement.focus();
     }
@@ -262,7 +266,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
         } else if (chipIndex - 1 >= 0) {
           this._keyManager.setActiveItem(chipIndex - 1);
         }
-        this._destroyedIndex = chipIndex;
+        this._lastDestroyedIndex = chipIndex;
       }
 
       this._chipSet.delete(chip);
@@ -276,17 +280,14 @@ export class MdChipList implements AfterContentInit, OnDestroy {
    * Checks to see if a focus chip was recently destroyed so that we can refocus the next closest
    * one.
    */
-  protected _checkDestroyedFocus() {
+  protected _updateFocusForDestroyedChips() {
     let chipsArray = this.chips;
     let focusChip: MdChip;
 
-    if (this._destroyedIndex != null && chipsArray.length > 0) {
+    if (this._lastDestroyedIndex != null && chipsArray.length > 0) {
       // Check whether the destroyed chip was the last item
-      if (this._destroyedIndex >= chipsArray.length) {
-        this._keyManager.setActiveItem(chipsArray.length - 1);
-      } else if (this._destroyedIndex >= 0) {
-        this._keyManager.setActiveItem(this._destroyedIndex);
-      }
+      const newFocusIndex = Math.min(this._lastDestroyedIndex, chipsArray.length - 1);
+      this._keyManager.setActiveItem(newFocusIndex);
 
       // Focus the chip
       if (focusChip) {
@@ -295,7 +296,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     }
 
     // Reset our destroyed index
-    this._destroyedIndex = null;
+    this._lastDestroyedIndex = null;
   }
 
   /**