Address comments

Author: tinayuangao

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

@@ -25,11 +25,12 @@ <h4>Advanced</h4>
         <md-chip color="accent" selected="true">Selected/Colored</md-chip>
 
         <md-chip color="warn" selected="true" *ngIf="visible"
-                 (destroy)="alert('chip destroyed')" (remove)="toggleVisible()">
-          <md-icon mdChipRemove>cancel</md-icon>
+                 (destroy)="displayMessage('chip destroyed')" (remove)="toggleVisible()">
           With Events
+          <md-icon mdChipRemove>cancel</md-icon>
         </md-chip>
       </md-chip-list>
+      <div>{{message}}</div>
     </md-card-content>
   </md-card>
 
@@ -44,17 +45,17 @@ <h4>Input Container</h4>
         <code>&lt;md-input-container&gt;</code>.
       </p>
 
-      <md-input-container mdChipListContainer>
-        <md-chip-list mdPrefix #chipList>
+      <md-input-container [floatPlaceholder]="people.length > 0 ? 'always' : 'auto'">
+        <md-chip-list #chipList>
           <md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                    [removable]="removable" (remove)="remove(person)">
             {{person.name}}
             <md-icon mdChipRemove>cancel</md-icon>
           </md-chip>
+          <input mdInput placeholder="New Contributor..."
+                 [mdChipList]="chipList" (mdChipEnd)="add($event)"
+                 [separatorKeysCodes]="separatorKeysCodes" [mdChipListAddOnBlur]="addOnBlur" />
         </md-chip-list>
-        <input mdInput placeholder="New Contributor..."
-               [mdChipList] ="chipList" (chipAdded)="add($event)"
-               [separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
       </md-input-container>
 
       <p>

src/demo-app/chips/chips-demo.scss

@@ -27,5 +27,8 @@
 
   .mat-chip-remove.mat-icon {
     font-size: 18px;
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
   }
 }

src/demo-app/chips/chips-demo.ts

@@ -22,9 +22,10 @@ export class ChipsDemo {
   selectable: boolean = true;
   removable: boolean = true;
   addOnBlur: boolean = true;
+  message: string = '';
 
   // Enter, comma, semi-colon
-  separatorKeys = [ENTER, COMMA, 186];
+  separatorKeysCodes = [ENTER, COMMA, 186];
 
   people: Person[] = [
     { name: 'Kara' },
@@ -42,16 +43,16 @@ export class ChipsDemo {
     { name: 'Warn', color: 'warn' }
   ];
 
-  alert(message: string): void {
-    alert(message);
+  displayMessage(message: string): void {
+    this.message = message;
   }
 
   add(event: MdChipInputEvent): void {
     let input = event.input;
     let value = event.value;
 
     // Add our person
-    if (value && value.trim() != '') {
+    if ((value || '').trim()) {
       this.people.push({ name: value.trim() });
     }
 

src/lib/chips/_chips-theme.scss

@@ -6,6 +6,23 @@
 $mat-chip-font-size: 13px;
 $mat-chip-line-height: 16px;
 
+@mixin mat-chips-theme-color($color) {
+  @include mat-chips-color(mat-contrast($color, 500), mat-color($color, 500));
+}
+
+@mixin mat-chips-color($foreground, $background) {
+  background-color: $background;
+  color: $foreground;
+
+  .mat-chip-remove {
+    color: $foreground;
+    opacity: 0.4;
+  }
+
+  .mat-chip-remove:hover {
+    opacity: 0.54;
+  }
+}
 
 @mixin mat-chips-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
@@ -30,9 +47,8 @@ $mat-chip-line-height: 16px;
 
   $focus-color: mat-color($foreground, secondary-text);
 
-  .mat-chip:not(.mat-basic-chip) {
-    background-color: $unselected-background;
-    color: $unselected-foreground;
+  .mat-chip {
+    @include mat-chips-color($unselected-foreground, $unselected-background);
 
     .mat-chip-focus-border {
       pointer-events: none;
@@ -42,87 +58,27 @@ $mat-chip-line-height: 16px;
       outline: none;
       border: 2px solid $focus-color;
     }
-
-    .mat-chip-remove {
-      color: $unselected-foreground;
-      opacity: 0.3;
-    }
-
-    .mat-chip-remove:hover {
-      opacity: 0.54;
-    }
   }
 
-  .mat-chip.mat-chip-selected:not(.mat-basic-chip) {
-    background-color: $selected-background;
-    color: $selected-foreground;
-
-    .mat-chip-remove {
-      color: $selected-foreground;
-      opacity: 0.4;
-    }
-
-    .mat-chip-remove:hover {
-      opacity: 0.54;
-    }
+  .mat-chip.mat-chip-selected {
+    @include mat-chips-color($selected-foreground, $selected-background);
 
     &.mat-primary {
-      background-color: mat-color($primary);
-      color: mat-color($primary, default-contrast);
-    }
-
-    &.mat-accent {
-      background-color: mat-color($accent);
-      color: mat-color($accent, default-contrast);
+      @include mat-chips-theme-color($primary);
     }
 
     &.mat-warn {
-      background-color: mat-color($warn);
-      color: mat-color($warn, default-contrast);
-
-      .mat-chip-remove {
-        color: mat-contrast($primary, 500);
-        opacity: 0.4;
-      }
-
-      .mat-chip-remove:hover {
-        opacity: 0.54;
-      }
-
+      @include mat-chips-theme-color($warn);
     }
 
     &.mat-accent {
-      background-color: mat-color($accent, 500);
-      color: mat-contrast($accent, 500);
-
-      .mat-chip-remove {
-        color: mat-contrast($accent, 500);
-        opacity: 0.4;
-      }
-
-      .mat-chip-remove:hover {
-        opacity: 0.54;
-      }
-    }
-
-    &.mat-warn {
-      background-color: mat-color($warn, 500);
-      color: mat-contrast($warn, 500);
-
-      .mat-chip-remove {
-        color: mat-contrast($warn, 500);
-        opacity: 0.4;
-      }
-
-      .mat-chip-remove:hover {
-        opacity: 0.54;
-      }
+      @include mat-chips-theme-color($accent);
     }
   }
 }
 
 @mixin mat-chips-typography($config) {
-  .mat-chip:not(.mat-basic-chip) {
+  .mat-chip{
     font-size: $mat-chip-font-size;
     line-height: $mat-chip-line-height;
   }

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

@@ -42,7 +42,7 @@ describe('MdChipInput', () => {
   }));
 
   describe('basic behavior', () => {
-    it('emits the (chipAdded) on enter keyup', () => {
+    it('emits the (chipEnd) on enter keyup', () => {
       let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any;
 
       spyOn(testChipInput, 'add');
@@ -53,7 +53,7 @@ describe('MdChipInput', () => {
   });
 
   describe('[addOnBlur]', () => {
-    it('allows (chipAdded) when true', () => {
+    it('allows (chipEnd) when true', () => {
       spyOn(testChipInput, 'add');
 
       testChipInput.addOnBlur = true;
@@ -63,7 +63,7 @@ describe('MdChipInput', () => {
       expect(testChipInput.add).toHaveBeenCalled();
     });
 
-    it('disallows (chipAdded) when false', () => {
+    it('disallows (chipEnd) when false', () => {
       spyOn(testChipInput, 'add');
 
       testChipInput.addOnBlur = false;
@@ -74,8 +74,8 @@ describe('MdChipInput', () => {
     });
   });
 
-  describe('[separatorKeys]', () => {
-    it('does not emit (chipAdded) when a non-separator key is pressed', () => {
+  describe('[separatorKeysCodes]', () => {
+    it('does not emit (chipEnd) when a non-separator key is pressed', () => {
       let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any;
       spyOn(testChipInput, 'add');
 
@@ -86,7 +86,7 @@ describe('MdChipInput', () => {
       expect(testChipInput.add).not.toHaveBeenCalled();
     });
 
-    it('emits (chipAdded) when a custom separator keys is pressed', () => {
+    it('emits (chipEnd) when a custom separator keys is pressed', () => {
       let COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement) as any;
       spyOn(testChipInput, 'add');
 
@@ -102,9 +102,9 @@ describe('MdChipInput', () => {
 @Component({
   template: `
     <md-chip-list>
+        <input mdInput mdChipList [mdChipListAddOnBlur]="addOnBlur" [separatorKeysCodes]="separatorKeys"
+       (mdChipEnd)="add($event)" />
     </md-chip-list>
-    <input mdInput mdChipList [addOnBlur]="addOnBlur" [separatorKeys]="separatorKeys"
-       (chipAdded)="add($event)" />
   `
 })
 class TestChipInput {

src/lib/chips/chip-input.ts

@@ -1,4 +1,5 @@
-import {Directive, Output, EventEmitter, Renderer, ElementRef, Input} from '@angular/core';
+import {Directive, Output, EventEmitter, ElementRef, Input} from '@angular/core';
+import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 import {ENTER} from '../core/keyboard/keycodes';
 import {MdChipList} from './chip-list';
 
@@ -20,66 +21,64 @@ export class MdChipInput {
   _chipList: MdChipList;
 
   /** Register input for chip list */
-  @Input()
-  set mdChipList(value: MdChipList) {
+  @Input('mdChipList')
+  set chipList(value: MdChipList) {
     if (value) {
       this._chipList = value;
       this._chipList.registerInput(this._inputElement);
     }
   }
 
   /**
-   * Whether or not the chipAdded event will be emitted when the input is blurred.
-   *
-   * Default `false`.
+   * Whether or not the chipEnd event will be emitted when the input is blurred.
    */
-  @Input() addOnBlur = false;
+  @Input('mdChipListAddOnBlur')
+  get addOnBlur() { return this._addOnBlur; }
+  set addOnBlur(value) { this._addOnBlur = coerceBooleanProperty(value); }
+  _addOnBlur: boolean = false;
 
   /**
-   * The list of key codes that will trigger a chipAdded event.
+   * The list of key codes that will trigger a chipEnd event.
    *
    * Defaults to `[ENTER]`.
    */
-  @Input() separatorKeys: number[] = [ENTER];
+  // TODO(tinayuangao): Support Set here
+  @Input() separatorKeysCodes: number[] = [ENTER];
 
   /** Emitted when a chip is to be added. */
-  @Output() chipAdded = new EventEmitter<MdChipInputEvent>();
+  @Output('mdChipEnd')
+  chipEnd = new EventEmitter<MdChipInputEvent>();
+
+  @Input('matChipList')
+  set matChipList(value: MdChipList) { this.chipList = value; }
+
+  @Input('matChipListAddOnBlur')
+  get matAddOnBlur() { return this._addOnBlur; }
+  set matAddOnBlur(value) { this.addOnBlur = value; }
 
   /** The native input element to which this directive is attached. */
   protected _inputElement: HTMLInputElement;
 
-  constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {
+  constructor(protected _elementRef: ElementRef) {
     this._inputElement = this._elementRef.nativeElement as HTMLInputElement;
   }
 
-  /**
-   * Utility method to make host definition/tests more clear.
-   *
-   * @private
-   */
+  /** Utility method to make host definition/tests more clear. */
   _keydown(event?: KeyboardEvent) {
-    this._add(event);
+    this._emitChipEnd(event);
   }
 
-  /**
-   * Checks to see if the blur should emit the (chipAdded) event.
-   *
-   * @private
-   */
+  /** Checks to see if the blur should emit the (chipEnd) event. */
   _blur() {
     if (this.addOnBlur) {
-      this._add();
+      this._emitChipEnd();
     }
   }
 
-  /**
-   * Checks to see if the (chipAdded) event needs to be emitted.
-   *
-   * @private
-   */
-  _add(event?: KeyboardEvent) {
-    if (!event || this.separatorKeys.indexOf(event.keyCode) > -1) {
-      this.chipAdded.emit({ input: this._inputElement, value: this._inputElement.value });
+  /** Checks to see if the (chipEnd) event needs to be emitted. */
+  _emitChipEnd(event?: KeyboardEvent) {
+    if (!event || this.separatorKeysCodes.indexOf(event.keyCode) > -1) {
+      this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
 
       if (event) {
         event.preventDefault();

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

@@ -331,12 +331,12 @@ class StandardChipList {
 @Component({
   template: `
     <md-input-container>
-      <md-chip-list mdPrefix #chipList>
+      <md-chip-list #chipList>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
+        <input mdInput name="test" [mdChipList]="chipList"/>
       </md-chip-list>
-      <input mdInput name="test" [mdChipList]="chipList"/>
     </md-input-container>
   `
 })