diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html index 7b7bd87d9706..d068c4b50e61 100644 --- a/src/demo-app/chips/chips-demo.html +++ b/src/demo-app/chips/chips-demo.html @@ -51,7 +51,7 @@

Input Container

{{person.name}} - cancel + cancel Input Container {{person.name}} - cancel + cancel diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss index 7a8e4c6d913b..4e4f1e959a1b 100644 --- a/src/lib/chips/_chips-theme.scss +++ b/src/lib/chips/_chips-theme.scss @@ -45,19 +45,8 @@ $mat-chip-line-height: 16px; $selected-background: if($is-dark-theme, mat-color($background, app-bar), #808080); $selected-foreground: if($is-dark-theme, mat-color($foreground, text), $light-selected-foreground); - $focus-color: mat-color($foreground, secondary-text); - .mat-chip { @include mat-chips-color($unselected-foreground, $unselected-background); - - .mat-chip-focus-border { - pointer-events: none; - } - - &:focus { - outline: none; - border: 2px solid $focus-color; - } } .mat-chip.mat-chip-selected { diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts index fea71eb40a86..513d7eaf5e5a 100644 --- a/src/lib/chips/chip-input.spec.ts +++ b/src/lib/chips/chip-input.spec.ts @@ -4,9 +4,11 @@ import {Component, DebugElement} from '@angular/core'; import {MdChipInput, MdChipInputEvent} from './chip-input'; import {By} from '@angular/platform-browser'; import {Directionality} from '../core'; -import {createKeyboardEvent} from '../core/testing/event-objects'; +import {createKeyboardEvent} from '@angular/cdk/testing'; -import {ENTER, COMMA} from '../core/keyboard/keycodes'; +import {ENTER} from '../core/keyboard/keycodes'; + +const COMMA = 188; describe('MdChipInput', () => { let fixture: ComponentFixture; diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 8a607017d997..f3b91356d9c9 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -2,13 +2,12 @@ import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/t 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 {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 '@angular/cdk/testing'; import {MdInputModule} from '../input/index'; -import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, SPACE, TAB} from '../core/keyboard/keycodes'; +import {LEFT_ARROW, RIGHT_ARROW, BACKSPACE, DELETE, TAB} from '../core/keyboard/keycodes'; import {Directionality} from '../core'; describe('MdChipList', () => { @@ -17,7 +16,7 @@ describe('MdChipList', () => { let chipListNativeElement: HTMLElement; let chipListInstance: MdChipList; let testComponent: StandardChipList; - let chips: QueryList; + let chips: QueryList; let manager: FocusKeyManager; let dir = 'ltr'; diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 6acaf32bbcdb..feb65ebcf7a0 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -22,21 +22,10 @@ import { import {MdChip} from './chip'; import {FocusKeyManager} from '../core/a11y/focus-key-manager'; -import {BACKSPACE, DELETE, SPACE, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes'; +import {BACKSPACE, DELETE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW} from '../core/keyboard/keycodes'; import {coerceBooleanProperty, Directionality} from '@angular/cdk'; import {Subscription} from 'rxjs/Subscription'; -/** Utility to check if an input element has no value. */ -function _isInputEmpty(element: HTMLElement): boolean { - if (element && element.nodeName.toLowerCase() == 'input') { - let input = element as HTMLInputElement; - - return !input.value; - } - - return false; -} - /** * A material design chips component (named ChipList for it's similarity to the List component). * @@ -116,7 +105,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { this._subscribeChips(chips); // If we have 0 chips, attempt to focus an input (if available) - if (chips.length == 0) { + if (chips.length === 0) { this._focusInput(); } @@ -139,7 +128,10 @@ export class MdChipList implements AfterContentInit, OnDestroy { * it's selected state is always ignored. */ @Input() - get selectable(): boolean { return this._selectable; } + get selectable(): boolean { + return this._selectable; + } + set selectable(value: boolean) { this._selectable = coerceBooleanProperty(value); } @@ -175,13 +167,12 @@ export class MdChipList implements AfterContentInit, OnDestroy { _keydown(event: KeyboardEvent) { let code = event.keyCode; let target = event.target as HTMLElement; - let isInputEmpty = _isInputEmpty(target); + let isInputEmpty = this._isInputEmpty(target); let isRtl = this._dir && this._dir.value == 'rtl'; - let isPrevKey = (code == (isRtl ? RIGHT_ARROW : LEFT_ARROW)); - let isNextKey = (code == (isRtl ? LEFT_ARROW : RIGHT_ARROW)); - let isBackKey = (code == BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey); - let isForwardKey = (code == DOWN_ARROW || isNextKey); + let isPrevKey = (code === (isRtl ? RIGHT_ARROW : LEFT_ARROW)); + let isNextKey = (code === (isRtl ? LEFT_ARROW : RIGHT_ARROW)); + let isBackKey = (code === BACKSPACE || code == DELETE || code == UP_ARROW || isPrevKey); // If they are on an empty input and hit backspace/delete/left arrow, focus the last chip if (isInputEmpty && isBackKey) { this._keyManager.setLastItemActive(); @@ -189,12 +180,6 @@ export class MdChipList implements AfterContentInit, OnDestroy { return; } - let focusedIndex = this._keyManager.activeItemIndex; - - if (typeof focusedIndex === 'number' && this._isValidIndex(focusedIndex)) { - let focusedChip: MdChip = this.chips.toArray()[focusedIndex]; - } - // If they are on a chip, check for space/left/right, otherwise pass to our key manager (like // up/down keys) if (target && target.classList.contains('mat-chip')) { @@ -225,7 +210,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { */ protected _updateTabIndex(): void { // If we have 0 chips, we should not allow keyboard focus - this._tabIndex = (this.chips.length == 0 ? -1 : 0); + this._tabIndex = (this.chips.length === 0 ? -1 : 0); } /** @@ -263,7 +248,7 @@ export class MdChipList implements AfterContentInit, OnDestroy { this._keyManager.setActiveItem(chipIndex - 1); } } - if (this._keyManager.activeItemIndex == chipIndex) { + if (this._keyManager.activeItemIndex === chipIndex) { this._lastDestroyedIndex = chipIndex; } @@ -308,4 +293,14 @@ export class MdChipList implements AfterContentInit, OnDestroy { private _isValidIndex(index: number): boolean { return index >= 0 && index < this.chips.length; } + + private _isInputEmpty(element: HTMLElement): boolean { + if (element && element.nodeName.toLowerCase() === 'input') { + let input = element as HTMLInputElement; + + return !input.value; + } + + return false; + } } diff --git a/src/lib/chips/chip-remove.spec.ts b/src/lib/chips/chip-remove.spec.ts index c99bc51dbc3b..39450a639438 100644 --- a/src/lib/chips/chip-remove.spec.ts +++ b/src/lib/chips/chip-remove.spec.ts @@ -48,20 +48,6 @@ describe('Chip Remove', () => { expect(testChip.didRemove).toHaveBeenCalled(); }); - - it(`should monitors the parent chip's [removable] property`, () => { - let hrefElement = chipNativeElement.querySelector('a')!; - - testChip.removable = true; - fixture.detectChanges(); - - expect(hrefElement.classList).not.toContain('mat-chip-remove-hidden'); - - testChip.removable = false; - fixture.detectChanges(); - - expect(hrefElement.classList).toContain('mat-chip-remove-hidden'); - }); }); }); diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index d210a7136474..cbf45dc3df7c 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -1,9 +1,9 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; +import {createKeyboardEvent} from '@angular/cdk/testing'; import {MdChipList, MdChip, MdChipEvent, MdChipsModule} from './index'; import {SPACE, DELETE, BACKSPACE} from '../core/keyboard/keycodes'; -import {createKeyboardEvent} from '../core/testing/event-objects'; import {Directionality} from '../core'; describe('Chips', () => { diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss index cd4823b0eeac..314e0223fd2c 100644 --- a/src/lib/chips/chips.scss +++ b/src/lib/chips/chips.scss @@ -2,6 +2,7 @@ $mat-chip-vertical-padding: 8px; $mat-chip-horizontal-padding: 12px; +$mat-chip-remove-margin: -4px; $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4; @@ -63,3 +64,7 @@ $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4; .mat-input-prefix .mat-chip-list-wrapper { margin-bottom: $mat-chip-vertical-padding; } + +.mat-chip-remove { + margin: 0 $mat-chip-remove-margin 0 0; +}