sync chip

Author: tinayuangao

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

@@ -26,7 +26,7 @@ <h4>Advanced</h4>
 
         <md-chip color="warn" selected="true" *ngIf="visible"
                  (destroy)="alert('chip destroyed')" (remove)="toggleVisible()">
-          <md-icon md-chip-remove>cancel</md-icon>
+          <md-icon mdChipRemove>cancel</md-icon>
           With Events
         </md-chip>
       </md-chip-list>
@@ -44,18 +44,22 @@ <h4>Input Container</h4>
         <code>&lt;md-input-container&gt;</code>.
       </p>
 
-      <md-input-container [floatPlaceholder]="people.length > 0 ? 'always' : 'auto'">
-        <md-chip-list>
+      <md-input-container>
+        <md-chip-list mdPrefix #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..."
-                 mdChipInput (chipAdded)="add($event)"
-                 [separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
         </md-chip-list>
+        <input mdInput placeholder="New Contributor..."
+               [mdChipList] ="chipList" (chipAdded)="add($event)"
+               [separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
+      </md-input-container>
+
+      <md-input-container>
+        <input mdInput placeholder="New Contributor..."/>
       </md-input-container>
 
       <p>

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

@@ -24,4 +24,8 @@
   md-chip-list input {
     width: 150px;
   }
-}
+
+  .mat-chip-remove.mat-icon {
+    font-size: 18px;
+  }
+}

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

@@ -46,11 +46,6 @@ export class ChipsDemo {
     alert(message);
   }
 
-  add(input: HTMLInputElement): void {
-    if (input.value && input.value.trim() != '') {
-      this.people.push({ name: input.value.trim() });
-      input.value = '';
-=======
   add(event: MdChipInputEvent): void {
     let input = event.input;
     let value = event.value;
@@ -71,7 +66,6 @@ export class ChipsDemo {
 
     if (index >= 0) {
       this.people.splice(index, 1);
->>>>>>> feat(chips): Add remove functionality/styling.
     }
   }
 

src/lib/chips/_chips-theme.scss

@@ -22,7 +22,7 @@ $mat-chip-line-height: 16px;
 
   // The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
   // to standard background and foreground colors.
-  $unselected-background: if($is-dark-theme, #656565, #e0e0e0);
+  $unselected-background: if($is-dark-theme, mat-color($background, card), #e0e0e0);
   $unselected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-foreground);
 
   $selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080);
@@ -46,10 +46,10 @@ $mat-chip-line-height: 16px;
     .mat-chip-remove {
       color: $unselected-foreground;
       opacity: 0.3;
+    }
 
-      &:hover {
-        opacity: 0.54;
-      }
+    .mat-chip-remove:hover {
+      opacity: 0.54;
     }
   }
 
@@ -60,10 +60,10 @@ $mat-chip-line-height: 16px;
     .mat-chip-remove {
       color: $selected-foreground;
       opacity: 0.4;
+    }
 
-      &:hover {
-        opacity: 0.54;
-      }
+    .mat-chip-remove:hover {
+      opacity: 0.54;
     }
 
     &.mat-primary {
@@ -79,17 +79,16 @@ $mat-chip-line-height: 16px;
     &.mat-warn {
       background-color: mat-color($warn);
       color: mat-color($warn, default-contrast);
-      background-color: mat-color($primary, 500);
-      color: mat-contrast($primary, 500);
 
       .mat-chip-remove {
         color: mat-contrast($primary, 500);
         opacity: 0.4;
+      }
 
-        &:hover {
-          opacity: 0.54;
-        }
+      .mat-chip-remove:hover {
+        opacity: 0.54;
       }
+
     }
 
     &.mat-accent {
@@ -99,10 +98,10 @@ $mat-chip-line-height: 16px;
       .mat-chip-remove {
         color: mat-contrast($accent, 500);
         opacity: 0.4;
+      }
 
-        &:hover {
-          opacity: 0.54;
-        }
+      .mat-chip-remove:hover {
+        opacity: 0.54;
       }
     }
 
@@ -113,10 +112,10 @@ $mat-chip-line-height: 16px;
       .mat-chip-remove {
         color: mat-contrast($warn, 500);
         opacity: 0.4;
+      }
 
-        &:hover {
-          opacity: 0.54;
-        }
+      .mat-chip-remove:hover {
+        opacity: 0.54;
       }
     }
   }

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

@@ -4,7 +4,8 @@ import {Component, DebugElement} from '@angular/core';
 import {MdChipInput, MdChipInputEvent} from './chip-input';
 import {By} from '@angular/platform-browser';
 import {Dir} from '../core/rtl/dir';
-import {FakeKeyboardEvent} from './chip-list.spec';
+import {createKeyboardEvent} from '../core/testing/event-objects';
+
 import {ENTER, COMMA} from '../core/keyboard/keycodes';
 
 describe('MdChipInput', () => {
@@ -42,7 +43,7 @@ describe('MdChipInput', () => {
 
   describe('basic behavior', () => {
     it('emits the (chipAdded) on enter keyup', () => {
-      let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any;
+      let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any;
 
       spyOn(testChipInput, 'add');
 
@@ -75,7 +76,7 @@ describe('MdChipInput', () => {
 
   describe('[separatorKeys]', () => {
     it('does not emit (chipAdded) when a non-separator key is pressed', () => {
-      let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any;
+      let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any;
       spyOn(testChipInput, 'add');
 
       testChipInput.separatorKeys = [COMMA];
@@ -86,7 +87,7 @@ describe('MdChipInput', () => {
     });
 
     it('emits (chipAdded) when a custom separator keys is pressed', () => {
-      let COMMA_EVENT = new FakeKeyboardEvent(COMMA, inputNativeElement) as any;
+      let COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement) as any;
       spyOn(testChipInput, 'add');
 
       testChipInput.separatorKeys = [COMMA];

src/lib/chips/chip-input.ts

@@ -1,20 +1,33 @@
 import {Directive, Output, EventEmitter, Renderer, ElementRef, Input} from '@angular/core';
 import {ENTER} from '../core/keyboard/keycodes';
+import {MdChipList} from './chip-list';
 
 export interface MdChipInputEvent {
   input: HTMLInputElement;
   value: string;
 }
 
 @Directive({
-  selector: '[mdChipInput], [matChipInput]',
+  selector: 'input[mdChipList], input[matChipList]',
   host: {
+    'class': 'mat-chip-input',
     '(keydown)': '_keydown($event)',
     '(blur)': '_blur()'
   }
 })
 export class MdChipInput {
 
+  _chipList: MdChipList;
+
+  /** Register input for chip list */
+  @Input()
+  set mdChipList(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.
    *

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

@@ -1,24 +1,15 @@
 import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
 import {Component, DebugElement, QueryList} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MdChip, MdChipList, MdChipsModule} from './index';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
-import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes';
 import {createKeyboardEvent} from '../core/testing/event-objects';
 
 import {MdInputModule} from '../input/index';
-import {FakeEvent} from '../core/a11y/list-key-manager.spec';
-import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE} from '../core/keyboard/keycodes';
+import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes';
 import {Dir} from '../core/rtl/dir';
 
-export class FakeKeyboardEvent extends FakeEvent {
-  constructor(keyCode: number, protected target: HTMLElement) {
-    super(keyCode);
-
-    this.target = target;
-  }
-}
-
 describe('MdChipList', () => {
   let fixture: ComponentFixture<any>;
   let chipListDebugElement: DebugElement;
@@ -32,9 +23,9 @@ describe('MdChipList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdChipsModule, MdInputModule],
+      imports: [MdChipsModule, MdInputModule, NoopAnimationsModule],
       declarations: [
-        StaticChipList, StandardChipList, InputContainerChipList
+        StandardChipList, InputContainerChipList
       ],
       providers: [{
         provide: Dir, useFactory: () => {
@@ -122,10 +113,6 @@ describe('MdChipList', () => {
           expect(manager.activeItemIndex).toEqual(2);
         });
 
-      let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
-      let array = chips.toArray();
-      let lastIndex = array.length - 1;
-      let lastItem = array[lastIndex];
 
         it('focuses the previous item', () => {
           let array = chips.toArray();
@@ -153,15 +140,11 @@ describe('MdChipList', () => {
           manager = chipListInstance._keyManager;
         }));
 
-      let RIGHT_EVENT = createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
-      let array = chips.toArray();
-      let firstItem = array[0];
-
         it('LEFT ARROW focuses previous item', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
 
-          let LEFT_EVENT = new FakeKeyboardEvent(LEFT_ARROW, lastNativeChip) as any;
+          let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
           let array = chips.toArray();
           let lastIndex = array.length - 1;
           let lastItem = array[lastIndex];
@@ -183,7 +166,7 @@ describe('MdChipList', () => {
           let firstNativeChip = nativeChips[0] as HTMLElement;
 
           let RIGHT_EVENT: KeyboardEvent =
-                new FakeKeyboardEvent(RIGHT_ARROW, firstNativeChip) as any;
+            createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
           let array = chips.toArray();
           let firstItem = array[0];
 
@@ -208,17 +191,12 @@ describe('MdChipList', () => {
           manager = chipListInstance._keyManager;
         }));
 
-        let SPACE_EVENT = createKeyboardEvent('keydown', SPACE, firstNativeChip);
-        let firstChip: MdChip = chips.toArray()[0];
-
         it('RIGHT ARROW focuses previous item', () => {
-          fixture.detectChanges();
-
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
 
           let RIGHT_EVENT: KeyboardEvent =
-                new FakeKeyboardEvent(RIGHT_ARROW, lastNativeChip) as any;
+              createKeyboardEvent('keydown', RIGHT_ARROW, lastNativeChip);
           let array = chips.toArray();
           let lastIndex = array.length - 1;
           let lastItem = array[lastIndex];
@@ -239,7 +217,8 @@ describe('MdChipList', () => {
           let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
           let firstNativeChip = nativeChips[0] as HTMLElement;
 
-          let LEFT_EVENT: KeyboardEvent = new FakeKeyboardEvent(LEFT_ARROW, firstNativeChip) as any;
+          let LEFT_EVENT: KeyboardEvent =
+              createKeyboardEvent('keydown', LEFT_ARROW, firstNativeChip);
           let array = chips.toArray();
           let firstItem = array[0];
 
@@ -255,18 +234,17 @@ describe('MdChipList', () => {
           expect(manager.activeItemIndex).toEqual(1);
         });
 
-      });
-
-      it('allow focus to escape when tabbing away', fakeAsync(() => {
-        chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
+        it('allow focus to escape when tabbing away', fakeAsync(() => {
+          chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
 
-        expect(chipListInstance._tabIndex)
+          expect(chipListInstance._tabIndex)
             .toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
 
-        tick();
+          tick();
 
-        expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
-      }));
+          expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
+        }));
+      });
     });
   });
 
@@ -290,7 +268,8 @@ describe('MdChipList', () => {
 
         it('DELETE focuses the last chip', () => {
           let nativeInput = chipListNativeElement.querySelector('input');
-          let DELETE_EVENT: KeyboardEvent = new FakeKeyboardEvent(DELETE, nativeInput) as any;
+          let DELETE_EVENT: KeyboardEvent =
+              createKeyboardEvent('keydown', DELETE, nativeInput);
 
           // Focus the input
           nativeInput.focus();
@@ -306,7 +285,8 @@ describe('MdChipList', () => {
 
         it('BACKSPACE focuses the last chip', () => {
           let nativeInput = chipListNativeElement.querySelector('input');
-          let BACKSPACE_EVENT: KeyboardEvent = new FakeKeyboardEvent(BACKSPACE, nativeInput) as any;
+          let BACKSPACE_EVENT: KeyboardEvent =
+              createKeyboardEvent('keydown', BACKSPACE, nativeInput);
 
           // Focus the input
           nativeInput.focus();
@@ -376,7 +356,6 @@ class StandardChipList {
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
         <md-chip>Chip 1</md-chip>
-        
         <input mdInput name="test" />
       </md-chip-list>
     </md-input-container>