Skip to content

Commit 33174bb

Browse files
tinayuangaotinayuangao
committed
sync chip
1 parent aca09a6 commit 33174bb

File tree

12 files changed

+108
-128
lines changed

12 files changed

+108
-128
lines changed

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,22 @@ <h4>Input Container</h4>
4444
<code>&lt;md-input-container&gt;</code>.
4545
</p>
4646

47-
<md-input-container [floatPlaceholder]="people.length > 0 ? 'always' : 'auto'">
48-
<md-chip-list>
47+
<md-input-container>
48+
<md-chip-list mdPrefix #chipList>
4949
<md-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
5050
[removable]="removable" (remove)="remove(person)">
5151
{{person.name}}
5252
<md-icon mdChipRemove>cancel</md-icon>
5353
</md-chip>
5454

55-
<input mdInput placeholder="New Contributor..."
56-
mdChipInput (chipAdded)="add($event)"
57-
[separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
5855
</md-chip-list>
56+
<input mdInput placeholder="New Contributor..."
57+
[mdChipList] ="chipList" (chipAdded)="add($event)"
58+
[separatorKeys]="separatorKeys" [addOnBlur]="addOnBlur" />
59+
</md-input-container>
60+
61+
<md-input-container>
62+
<input mdInput placeholder="New Contributor..."/>
5963
</md-input-container>
6064

6165
<p>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@
2424
md-chip-list input {
2525
width: 150px;
2626
}
27-
}
27+
28+
.mat-chip-remove.mat-icon {
29+
font-size: 18px;
30+
}
31+
}

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,6 @@ export class ChipsDemo {
4646
alert(message);
4747
}
4848

49-
add(input: HTMLInputElement): void {
50-
if (input.value && input.value.trim() != '') {
51-
this.people.push({ name: input.value.trim() });
52-
input.value = '';
53-
=======
5449
add(event: MdChipInputEvent): void {
5550
let input = event.input;
5651
let value = event.value;
@@ -71,7 +66,6 @@ export class ChipsDemo {
7166

7267
if (index >= 0) {
7368
this.people.splice(index, 1);
74-
>>>>>>> feat(chips): Add remove functionality/styling.
7569
}
7670
}
7771

‎src/lib/chips/_chips-theme.scss‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $mat-chip-line-height: 16px;
2222

2323
// The spec only provides guidance for light-themed chips. When inside of a dark theme, fall back
2424
// to standard background and foreground colors.
25-
$unselected-background: if($is-dark-theme, #656565, #e0e0e0);
25+
$unselected-background: if($is-dark-theme, mat-color($background, card), #e0e0e0);
2626
$unselected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-foreground);
2727

2828
$selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080);
@@ -46,10 +46,10 @@ $mat-chip-line-height: 16px;
4646
.mat-chip-remove {
4747
color: $unselected-foreground;
4848
opacity: 0.3;
49+
}
4950

50-
&:hover {
51-
opacity: 0.54;
52-
}
51+
.mat-chip-remove:hover {
52+
opacity: 0.54;
5353
}
5454
}
5555

@@ -60,10 +60,10 @@ $mat-chip-line-height: 16px;
6060
.mat-chip-remove {
6161
color: $selected-foreground;
6262
opacity: 0.4;
63+
}
6364

64-
&:hover {
65-
opacity: 0.54;
66-
}
65+
.mat-chip-remove:hover {
66+
opacity: 0.54;
6767
}
6868

6969
&.mat-primary {
@@ -79,17 +79,16 @@ $mat-chip-line-height: 16px;
7979
&.mat-warn {
8080
background-color: mat-color($warn);
8181
color: mat-color($warn, default-contrast);
82-
background-color: mat-color($primary, 500);
83-
color: mat-contrast($primary, 500);
8482

8583
.mat-chip-remove {
8684
color: mat-contrast($primary, 500);
8785
opacity: 0.4;
86+
}
8887

89-
&:hover {
90-
opacity: 0.54;
91-
}
88+
.mat-chip-remove:hover {
89+
opacity: 0.54;
9290
}
91+
9392
}
9493

9594
&.mat-accent {
@@ -99,10 +98,10 @@ $mat-chip-line-height: 16px;
9998
.mat-chip-remove {
10099
color: mat-contrast($accent, 500);
101100
opacity: 0.4;
101+
}
102102

103-
&:hover {
104-
opacity: 0.54;
105-
}
103+
.mat-chip-remove:hover {
104+
opacity: 0.54;
106105
}
107106
}
108107

@@ -113,10 +112,10 @@ $mat-chip-line-height: 16px;
113112
.mat-chip-remove {
114113
color: mat-contrast($warn, 500);
115114
opacity: 0.4;
115+
}
116116

117-
&:hover {
118-
opacity: 0.54;
119-
}
117+
.mat-chip-remove:hover {
118+
opacity: 0.54;
120119
}
121120
}
122121
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {Component, DebugElement} from '@angular/core';
44
import {MdChipInput, MdChipInputEvent} from './chip-input';
55
import {By} from '@angular/platform-browser';
66
import {Dir} from '../core/rtl/dir';
7-
import {FakeKeyboardEvent} from './chip-list.spec';
7+
import {createKeyboardEvent} from '../core/testing/event-objects';
8+
89
import {ENTER, COMMA} from '../core/keyboard/keycodes';
910

1011
describe('MdChipInput', () => {
@@ -42,7 +43,7 @@ describe('MdChipInput', () => {
4243

4344
describe('basic behavior', () => {
4445
it('emits the (chipAdded) on enter keyup', () => {
45-
let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any;
46+
let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any;
4647

4748
spyOn(testChipInput, 'add');
4849

@@ -75,7 +76,7 @@ describe('MdChipInput', () => {
7576

7677
describe('[separatorKeys]', () => {
7778
it('does not emit (chipAdded) when a non-separator key is pressed', () => {
78-
let ENTER_EVENT = new FakeKeyboardEvent(ENTER, inputNativeElement) as any;
79+
let ENTER_EVENT = createKeyboardEvent('keydown', ENTER, inputNativeElement) as any;
7980
spyOn(testChipInput, 'add');
8081

8182
testChipInput.separatorKeys = [COMMA];
@@ -86,7 +87,7 @@ describe('MdChipInput', () => {
8687
});
8788

8889
it('emits (chipAdded) when a custom separator keys is pressed', () => {
89-
let COMMA_EVENT = new FakeKeyboardEvent(COMMA, inputNativeElement) as any;
90+
let COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement) as any;
9091
spyOn(testChipInput, 'add');
9192

9293
testChipInput.separatorKeys = [COMMA];

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
import {Directive, Output, EventEmitter, Renderer, ElementRef, Input} from '@angular/core';
22
import {ENTER} from '../core/keyboard/keycodes';
3+
import {MdChipList} from './chip-list';
34

45
export interface MdChipInputEvent {
56
input: HTMLInputElement;
67
value: string;
78
}
89

910
@Directive({
10-
selector: '[mdChipInput], [matChipInput]',
11+
selector: 'input[mdChipList], input[matChipList]',
1112
host: {
13+
'class': 'mat-chip-input',
1214
'(keydown)': '_keydown($event)',
1315
'(blur)': '_blur()'
1416
}
1517
})
1618
export class MdChipInput {
1719

20+
_chipList: MdChipList;
21+
22+
/** Register input for chip list */
23+
@Input()
24+
set mdChipList(value: MdChipList) {
25+
if (value) {
26+
this._chipList = value;
27+
this._chipList.registerInput(this._inputElement);
28+
}
29+
}
30+
1831
/**
1932
* Whether or not the chipAdded event will be emitted when the input is blurred.
2033
*

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

Lines changed: 20 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,15 @@
11
import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
22
import {Component, DebugElement, QueryList} from '@angular/core';
33
import {By} from '@angular/platform-browser';
4+
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
45
import {MdChip, MdChipList, MdChipsModule} from './index';
56
import {FocusKeyManager} from '../core/a11y/focus-key-manager';
6-
import {SPACE, LEFT_ARROW, RIGHT_ARROW, TAB} from '../core/keyboard/keycodes';
77
import {createKeyboardEvent} from '../core/testing/event-objects';
88

99
import {MdInputModule} from '../input/index';
10-
import {FakeEvent} from '../core/a11y/list-key-manager.spec';
11-
import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE} from '../core/keyboard/keycodes';
10+
import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes';
1211
import {Dir} from '../core/rtl/dir';
1312

14-
export class FakeKeyboardEvent extends FakeEvent {
15-
constructor(keyCode: number, protected target: HTMLElement) {
16-
super(keyCode);
17-
18-
this.target = target;
19-
}
20-
}
21-
2213
describe('MdChipList', () => {
2314
let fixture: ComponentFixture<any>;
2415
let chipListDebugElement: DebugElement;
@@ -32,9 +23,9 @@ describe('MdChipList', () => {
3223

3324
beforeEach(async(() => {
3425
TestBed.configureTestingModule({
35-
imports: [MdChipsModule, MdInputModule],
26+
imports: [MdChipsModule, MdInputModule, NoopAnimationsModule],
3627
declarations: [
37-
StaticChipList, StandardChipList, InputContainerChipList
28+
StandardChipList, InputContainerChipList
3829
],
3930
providers: [{
4031
provide: Dir, useFactory: () => {
@@ -103,10 +94,6 @@ describe('MdChipList', () => {
10394
expect(manager.activeItemIndex).toEqual(2);
10495
});
10596

106-
let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
107-
let array = chips.toArray();
108-
let lastIndex = array.length - 1;
109-
let lastItem = array[lastIndex];
11097

11198
it('focuses the previous item', () => {
11299
let array = chips.toArray();
@@ -134,15 +121,11 @@ describe('MdChipList', () => {
134121
manager = chipListInstance._keyManager;
135122
}));
136123

137-
let RIGHT_EVENT = createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
138-
let array = chips.toArray();
139-
let firstItem = array[0];
140-
141124
it('LEFT ARROW focuses previous item', () => {
142125
let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
143126
let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
144127

145-
let LEFT_EVENT = new FakeKeyboardEvent(LEFT_ARROW, lastNativeChip) as any;
128+
let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
146129
let array = chips.toArray();
147130
let lastIndex = array.length - 1;
148131
let lastItem = array[lastIndex];
@@ -164,7 +147,7 @@ describe('MdChipList', () => {
164147
let firstNativeChip = nativeChips[0] as HTMLElement;
165148

166149
let RIGHT_EVENT: KeyboardEvent =
167-
new FakeKeyboardEvent(RIGHT_ARROW, firstNativeChip) as any;
150+
createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
168151
let array = chips.toArray();
169152
let firstItem = array[0];
170153

@@ -189,17 +172,12 @@ describe('MdChipList', () => {
189172
manager = chipListInstance._keyManager;
190173
}));
191174

192-
let SPACE_EVENT = createKeyboardEvent('keydown', SPACE, firstNativeChip);
193-
let firstChip: MdChip = chips.toArray()[0];
194-
195175
it('RIGHT ARROW focuses previous item', () => {
196-
fixture.detectChanges();
197-
198176
let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
199177
let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;
200178

201179
let RIGHT_EVENT: KeyboardEvent =
202-
new FakeKeyboardEvent(RIGHT_ARROW, lastNativeChip) as any;
180+
createKeyboardEvent('keydown', RIGHT_ARROW, lastNativeChip);
203181
let array = chips.toArray();
204182
let lastIndex = array.length - 1;
205183
let lastItem = array[lastIndex];
@@ -220,7 +198,8 @@ describe('MdChipList', () => {
220198
let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
221199
let firstNativeChip = nativeChips[0] as HTMLElement;
222200

223-
let LEFT_EVENT: KeyboardEvent = new FakeKeyboardEvent(LEFT_ARROW, firstNativeChip) as any;
201+
let LEFT_EVENT: KeyboardEvent =
202+
createKeyboardEvent('keydown', LEFT_ARROW, firstNativeChip);
224203
let array = chips.toArray();
225204
let firstItem = array[0];
226205

@@ -236,18 +215,17 @@ describe('MdChipList', () => {
236215
expect(manager.activeItemIndex).toEqual(1);
237216
});
238217

239-
});
240-
241-
it('allow focus to escape when tabbing away', fakeAsync(() => {
242-
chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
218+
it('allow focus to escape when tabbing away', fakeAsync(() => {
219+
chipListInstance._keyManager.onKeydown(createKeyboardEvent('keydown', TAB));
243220

244-
expect(chipListInstance._tabIndex)
221+
expect(chipListInstance._tabIndex)
245222
.toBe(-1, 'Expected tabIndex to be set to -1 temporarily.');
246223

247-
tick();
224+
tick();
248225

249-
expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
250-
}));
226+
expect(chipListInstance._tabIndex).toBe(0, 'Expected tabIndex to be reset back to 0');
227+
}));
228+
});
251229
});
252230
});
253231

@@ -271,7 +249,8 @@ describe('MdChipList', () => {
271249

272250
it('DELETE focuses the last chip', () => {
273251
let nativeInput = chipListNativeElement.querySelector('input');
274-
let DELETE_EVENT: KeyboardEvent = new FakeKeyboardEvent(DELETE, nativeInput) as any;
252+
let DELETE_EVENT: KeyboardEvent =
253+
createKeyboardEvent('keydown', DELETE, nativeInput);
275254

276255
// Focus the input
277256
nativeInput.focus();
@@ -287,7 +266,8 @@ describe('MdChipList', () => {
287266

288267
it('BACKSPACE focuses the last chip', () => {
289268
let nativeInput = chipListNativeElement.querySelector('input');
290-
let BACKSPACE_EVENT: KeyboardEvent = new FakeKeyboardEvent(BACKSPACE, nativeInput) as any;
269+
let BACKSPACE_EVENT: KeyboardEvent =
270+
createKeyboardEvent('keydown', BACKSPACE, nativeInput);
291271

292272
// Focus the input
293273
nativeInput.focus();
@@ -360,7 +340,6 @@ class StandardChipList {
360340
<md-chip>Chip 1</md-chip>
361341
<md-chip>Chip 1</md-chip>
362342
<md-chip>Chip 1</md-chip>
363-
364343
<input mdInput name="test" />
365344
</md-chip-list>
366345
</md-input-container>

0 commit comments

Comments
 (0)