diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 0643aeb9978c..8c63197451c2 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -277,7 +277,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor /** Combined stream of all of the child chips' selection change events. */ get chipSelectionChanges(): Observable { - return merge(...this.chips.map(chip => chip.onSelectionChange)); + return merge(...this.chips.map(chip => chip.selectionChange)); } /** Combined stream of all of the child chips' focus change events. */ diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index cb8b6f506658..240ceec898d6 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -121,7 +121,7 @@ describe('Chips', () => { expect(chipNativeElement.classList).toContain('mat-chip-selected'); expect(testComponent.chipSelectionChange) - .toHaveBeenCalledWith({source: chipInstance, isUserInput: false}); + .toHaveBeenCalledWith({source: chipInstance, isUserInput: false, selected: true}); }); it('allows removal', () => { @@ -144,7 +144,17 @@ describe('Chips', () => { it('should selects/deselects the currently focused chip on SPACE', () => { const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent; - const CHIP_EVENT: MdChipSelectionChange = {source: chipInstance, isUserInput: true}; + const CHIP_SELECTED_EVENT: MdChipSelectionChange = { + source: chipInstance, + isUserInput: true, + selected: true + }; + + const CHIP_DESELECTED_EVENT: MdChipSelectionChange = { + source: chipInstance, + isUserInput: true, + selected: false + }; spyOn(testComponent, 'chipSelectionChange'); @@ -154,7 +164,7 @@ describe('Chips', () => { expect(chipInstance.selected).toBeTruthy(); expect(testComponent.chipSelectionChange).toHaveBeenCalledTimes(1); - expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_EVENT); + expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_SELECTED_EVENT); // Use the spacebar to deselect the chip chipInstance._handleKeydown(SPACE_EVENT); @@ -162,7 +172,7 @@ describe('Chips', () => { expect(chipInstance.selected).toBeFalsy(); expect(testComponent.chipSelectionChange).toHaveBeenCalledTimes(2); - expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_EVENT); + expect(testComponent.chipSelectionChange).toHaveBeenCalledWith(CHIP_DESELECTED_EVENT); }); it('should have correct aria-selected', () => { @@ -280,9 +290,9 @@ describe('Chips', () => {
+ (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)" + (selectionChange)="chipSelectionChange($event)" + (removed)="chipRemove($event)"> {{name}}
diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 26ab43c56e4c..a7cdfaebb43b 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -34,7 +34,7 @@ export interface MdChipEvent { /** Event object emitted by MdChip when selected or deselected. */ export class MdChipSelectionChange { - constructor(public source: MdChip, public isUserInput = false) { } + constructor(public source: MdChip, public selected: boolean, public isUserInput = false) { } } @@ -98,7 +98,11 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr get selected(): boolean { return this._selected; } set selected(value: boolean) { this._selected = coerceBooleanProperty(value); - this.onSelectionChange.emit({source: this, isUserInput: false}); + this.selectionChange.emit({ + source: this, + isUserInput: false, + selected: value + }); } /** The value of the chip. Defaults to the content inside tags. */ @@ -132,13 +136,25 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr _onBlur = new Subject(); /** Emitted when the chip is selected or deselected. */ - @Output() onSelectionChange = new EventEmitter(); + @Output() selectionChange = new EventEmitter(); /** Emitted when the chip is destroyed. */ - @Output() destroy = new EventEmitter(); + @Output() destroyed = new EventEmitter(); + + /** + * Emitted when the chip is destroyed. + * @deprecated Use 'destroyed' instead. + */ + @Output() destroy = this.destroyed; /** Emitted when a chip is to be removed. */ - @Output('remove') onRemove = new EventEmitter(); + @Output() removed = new EventEmitter(); + + /** + * Emitted when a chip is to be removed. + * @deprecated Use `removed` instead. + */ + @Output('remove') onRemove = this.removed; get ariaSelected(): string | null { return this.selectable ? this.selected.toString() : null; @@ -149,32 +165,50 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr } ngOnDestroy(): void { - this.destroy.emit({chip: this}); + this.destroyed.emit({chip: this}); } /** Selects the chip. */ select(): void { this._selected = true; - this.onSelectionChange.emit({source: this, isUserInput: false}); + this.selectionChange.emit({ + source: this, + isUserInput: false, + selected: true + }); } /** Deselects the chip. */ deselect(): void { this._selected = false; - this.onSelectionChange.emit({source: this, isUserInput: false}); + this.selectionChange.emit({ + source: this, + isUserInput: false, + selected: false + }); } /** Select this chip and emit selected event */ - selectViaInteraction() { + selectViaInteraction(): void { this._selected = true; // Emit select event when selected changes. - this.onSelectionChange.emit({source: this, isUserInput: true}); + this.selectionChange.emit({ + source: this, + isUserInput: true, + selected: true + }); } /** Toggles the current selected state of this chip. */ toggleSelected(isUserInput: boolean = false): boolean { this._selected = !this.selected; - this.onSelectionChange.emit({source: this, isUserInput}); + + this.selectionChange.emit({ + source: this, + isUserInput, + selected: this._selected + }); + return this.selected; } @@ -192,7 +226,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr */ remove(): void { if (this.removable) { - this.onRemove.emit({chip: this}); + this.removed.emit({chip: this}); } } @@ -210,7 +244,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr } /** Handle custom key presses. */ - _handleKeydown(event: KeyboardEvent) { + _handleKeydown(event: KeyboardEvent): void { if (this.disabled) { return; } @@ -235,7 +269,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr } } - _blur() { + _blur(): void { this._hasFocus = false; this._onBlur.next({chip: this}); } @@ -266,7 +300,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(); } diff --git a/src/lib/chips/chips.md b/src/lib/chips/chips.md index 6b7760f77ac1..db4dfdeef6be 100644 --- a/src/lib/chips/chips.md +++ b/src/lib/chips/chips.md @@ -23,7 +23,7 @@ Chips can be selected via the `selected` property. Selection can be disabled by `selectable` to `false` on the ``. Whenever the selection state changes, a `ChipSelectionChange` event will be emitted via -`(onSelectionChange)`. +`(selectionChange)`. ### Disabled chips Individual chips may be disabled by applying the `disabled` attribute to the chip. When disabled,