From e817c6118dd1ea05b5665f9d449eed386f293ae8 Mon Sep 17 00:00:00 2001 From: Austin Date: Tue, 12 Sep 2017 17:20:45 -0500 Subject: [PATCH 1/2] chore(chips): update API per #6677 --- src/demo-app/chips/chips-demo.html | 6 ++-- src/lib/chips/chip.spec.ts | 6 ++-- src/lib/chips/chip.ts | 52 ++++++++++++++++++++++++------ 3 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html index 860caedb0c2b..e7e530112dc9 100644 --- a/src/demo-app/chips/chips-demo.html +++ b/src/demo-app/chips/chips-demo.html @@ -25,7 +25,7 @@

Advanced

Selected/Colored + (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()"> With Events cancel @@ -49,7 +49,7 @@

Form Field

+ [removable]="removable" (removed)="remove(person)"> {{person.name}} cancel @@ -70,7 +70,7 @@

Form Field

+ [removable]="removable" (removed)="remove(person)"> {{person.name}} cancel diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 9565c178c56a..70fe98fae429 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -280,9 +280,9 @@ describe('Chips', () => {
+ (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)" + (selectionChange)="chipSelect($event)" (deselected)="chipDeselect($event)" + (removed)="chipRemove($event)"> {{name}}
diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index a0ec3bc28c5f..d97f527fc37b 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -77,7 +77,13 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr @Input() get selected(): boolean { return this._selected; } set selected(value: boolean) { this._selected = coerceBooleanProperty(value); - (this.selected ? this.select : this.deselect).emit({chip: this}); + if (this.selected) { + this.select.emit({chip: this}); + this.selectionChange.emit({chip: this}); + } else { + this.deselect.emit({chip: this}); + this.deselected.emit({chip: this}); + } } protected _selected: boolean = false; @@ -112,15 +118,42 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr /** Emits when the chip is focused. */ _onFocus = new Subject(); - /** Emitted when the chip is selected. */ + /** + * Emitted when the chip is selected. + * @deprecated Use `selectionChange` instead. + */ @Output() select = new EventEmitter(); - /** Emitted when the chip is deselected. */ + /** Emitted when the chip is selected. */ + @Output() selectionChange = new EventEmitter(); + + /** + * Emitted when the chip is deselected. + * @deprecated Use `deselected` instead. + */ @Output() deselect = new EventEmitter(); - /** Emitted when the chip is destroyed. */ + /** Emitted when the chip is deselected. */ + @Output() deselected = new EventEmitter(); + + /** + * Emitted when the chip is destroyed. + * @deprecated Use `destroyed` instead. + */ @Output() destroy = new EventEmitter(); + /** Emitted when the chip is destroyed. */ + @Output() destroyed = new EventEmitter(); + + /** + * Emitted when a chip is to be removed. + * @deprecated Use `removed` instead. + */ + @Output('remove') onRemove = new EventEmitter(); + + /** Emitted when a chip is to be removed. */ + @Output() removed = new EventEmitter(); + get ariaSelected(): string | null { return this.selectable ? this.selected.toString() : null; } @@ -129,11 +162,9 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr super(renderer, elementRef); } - /** Emitted when a chip is to be removed. */ - @Output('remove') onRemove = new EventEmitter(); - ngOnDestroy(): void { this.destroy.emit({chip: this}); + this.destroyed.emit({chip: this}); } /** Toggles the current selected state of this chip. */ @@ -156,12 +187,13 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr */ remove(): void { if (this.removable) { + this.removed.emit({chip: this}); this.onRemove.emit({chip: this}); } } /** Ensures events fire properly upon click. */ - _handleClick(event: Event) { + _handleClick(event: Event): void { // Check disabled if (this.disabled) { return; @@ -174,7 +206,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr } /** Handle custom key presses. */ - _handleKeydown(event: KeyboardEvent) { + _handleKeydown(event: KeyboardEvent): void { if (this.disabled) { return; } @@ -225,7 +257,7 @@ export class MdChipRemove { constructor(protected _parentChip: MdChip) {} /** Calls the parent chip's public `remove()` method if applicable. */ - _handleClick() { + _handleClick(): void { if (this._parentChip.removable) { this._parentChip.remove(); } From 4fd14c84a38e0e1c2e84572c1618527eedd55083 Mon Sep 17 00:00:00 2001 From: Austin Date: Thu, 14 Sep 2017 17:39:16 -0500 Subject: [PATCH 2/2] =?UTF-8?q?chore(nit):=20remove=20=E2=80=98deselected?= =?UTF-8?q?=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/chips/chip.spec.ts | 18 ++++++++---------- src/lib/chips/chip.ts | 15 ++++++++------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 70fe98fae429..e111b11f9404 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -2,7 +2,7 @@ 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 {MdChipList, MdChip, MdChipEvent, MdChipSelectionEvent, MdChipsModule} from './index'; import {SPACE, DELETE, BACKSPACE} from '../core/keyboard/keycodes'; import {Directionality} from '../core'; @@ -120,7 +120,7 @@ describe('Chips', () => { fixture.detectChanges(); expect(chipNativeElement.classList).toContain('mat-chip-selected'); - expect(testComponent.chipSelect).toHaveBeenCalledWith({chip: chipInstance}); + expect(testComponent.chipSelect).toHaveBeenCalledWith({chip: chipInstance, selected: true}); }); it('allows removal', () => { @@ -143,26 +143,25 @@ describe('Chips', () => { it('should selects/deselects the currently focused chip on SPACE', () => { const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent; - const CHIP_EVENT: MdChipEvent = {chip: chipInstance}; + const CHIP_SELECT_EVENT: MdChipSelectionEvent = {chip: chipInstance, selected: true}; + const CHIP_DESELECT_EVENT: MdChipSelectionEvent = {chip: chipInstance, selected: false}; spyOn(testComponent, 'chipSelect'); - spyOn(testComponent, 'chipDeselect'); // Use the spacebar to select the chip chipInstance._handleKeydown(SPACE_EVENT); fixture.detectChanges(); expect(chipInstance.selected).toBeTruthy(); - expect(testComponent.chipSelect).toHaveBeenCalledTimes(1); - expect(testComponent.chipSelect).toHaveBeenCalledWith(CHIP_EVENT); + expect(testComponent.chipSelect).toHaveBeenCalledWith(CHIP_SELECT_EVENT); // Use the spacebar to deselect the chip chipInstance._handleKeydown(SPACE_EVENT); fixture.detectChanges(); expect(chipInstance.selected).toBeFalsy(); - expect(testComponent.chipDeselect).toHaveBeenCalledTimes(1); - expect(testComponent.chipDeselect).toHaveBeenCalledWith(CHIP_EVENT); + expect(testComponent.chipSelect).toHaveBeenCalledWith(CHIP_DESELECT_EVENT); + expect(testComponent.chipSelect).toHaveBeenCalledTimes(2); }); it('should have correct aria-selected', () => { @@ -281,7 +280,7 @@ describe('Chips', () => { {{name}} @@ -300,7 +299,6 @@ class SingleChip { chipFocus: (event?: MdChipEvent) => void = () => {}; chipDestroy: (event?: MdChipEvent) => void = () => {}; chipSelect: (event?: MdChipEvent) => void = () => {}; - chipDeselect: (event?: MdChipEvent) => void = () => {}; chipRemove: (event?: MdChipEvent) => void = () => {}; } diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index d97f527fc37b..c58ba4fbdd0a 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -28,6 +28,11 @@ export interface MdChipEvent { chip: MdChip; } +export interface MdChipSelectionEvent { + chip: MdChip; + selected: boolean; +} + // Boilerplate for applying mixins to MdChip. /** @docs-private */ export class MdChipBase { @@ -79,11 +84,10 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr this._selected = coerceBooleanProperty(value); if (this.selected) { this.select.emit({chip: this}); - this.selectionChange.emit({chip: this}); } else { this.deselect.emit({chip: this}); - this.deselected.emit({chip: this}); } + this.selectionChange.emit({chip: this, selected: this.selected}); } protected _selected: boolean = false; @@ -125,17 +129,14 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr @Output() select = new EventEmitter(); /** Emitted when the chip is selected. */ - @Output() selectionChange = new EventEmitter(); + @Output() selectionChange = new EventEmitter(); /** * Emitted when the chip is deselected. - * @deprecated Use `deselected` instead. + * @deprecated Use `selectionChange` instead. */ @Output() deselect = new EventEmitter(); - /** Emitted when the chip is deselected. */ - @Output() deselected = new EventEmitter(); - /** * Emitted when the chip is destroyed. * @deprecated Use `destroyed` instead.