From 33174bb22a958fa3ef6483598cf0a1d6c62f155d Mon Sep 17 00:00:00 2001
From: Yuan Gao Input Container
<md-input-container>
.
diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss
index 80a953ed8beb..66082bb19203 100644
--- a/src/demo-app/chips/chips-demo.scss
+++ b/src/demo-app/chips/chips-demo.scss
@@ -24,4 +24,8 @@
md-chip-list input {
width: 150px;
}
-}
\ No newline at end of file
+
+ .mat-chip-remove.mat-icon {
+ font-size: 18px;
+ }
+}
diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts
index 76c4030d1889..2b68de3b771c 100644
--- a/src/demo-app/chips/chips-demo.ts
+++ b/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.
}
}
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index 196b8519232c..36203c6c1195 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/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;
}
}
}
diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts
index 78549d4fe608..401a7f025c45 100644
--- a/src/lib/chips/chip-input.spec.ts
+++ b/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];
diff --git a/src/lib/chips/chip-input.ts b/src/lib/chips/chip-input.ts
index 9e4e30de9fd2..4a8a1d7f219e 100644
--- a/src/lib/chips/chip-input.ts
+++ b/src/lib/chips/chip-input.ts
@@ -1,5 +1,6 @@
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;
@@ -7,14 +8,26 @@ export interface MdChipInputEvent {
}
@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.
*
diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts
index c982ea4a23c6..399c183166e1 100644
--- a/src/lib/chips/chip-list.spec.ts
+++ b/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