chore(chips): update chip output names for consistency (#7156)

Related to #6677
This commit is contained in:
Austin
2017-09-20 18:18:19 -05:00
committed by Jeremy Elbourn
parent 2b61eb6f97
commit fdf68ba567
4 changed files with 68 additions and 24 deletions
+1 -1
View File
@@ -278,7 +278,7 @@ export class MdChipList implements MdFormFieldControl<any>, ControlValueAccessor
/** Combined stream of all of the child chips' selection change events. */
get chipSelectionChanges(): Observable<MdChipSelectionChange> {
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. */
+17 -7
View File
@@ -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', () => {
<div *ngIf="shouldShow">
<md-chip [selectable]="selectable" [removable]="removable"
[color]="color" [selected]="selected" [disabled]="disabled"
(focus)="chipFocus($event)" (destroy)="chipDestroy($event)"
(onSelectionChange)="chipSelectionChange($event)"
(remove)="chipRemove($event)">
(focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
(selectionChange)="chipSelectionChange($event)"
(removed)="chipRemove($event)">
{{name}}
</md-chip>
</div>
+49 -15
View File
@@ -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 <md-chip> tags. */
@@ -132,13 +136,25 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr
_onBlur = new Subject<MdChipEvent>();
/** Emitted when the chip is selected or deselected. */
@Output() onSelectionChange = new EventEmitter<MdChipSelectionChange>();
@Output() selectionChange = new EventEmitter<MdChipSelectionChange>();
/** Emitted when the chip is destroyed. */
@Output() destroy = new EventEmitter<MdChipEvent>();
@Output() destroyed = new EventEmitter<MdChipEvent>();
/**
* 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<MdChipEvent>();
@Output() removed = new EventEmitter<MdChipEvent>();
/**
* 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();
}
+1 -1
View File
@@ -23,7 +23,7 @@ Chips can be selected via the `selected` property. Selection can be disabled by
`selectable` to `false` on the `<md-chip-list>`.
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,