Skip to content

Commit 94e4ea8

Browse files
authored
feat(chips): add ripple to chips (#9761)
1 parent 442a872 commit 94e4ea8

File tree

2 files changed

+58
-6
lines changed

2 files changed

+58
-6
lines changed

src/lib/chips/chip.ts

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,33 @@
99
import {FocusableOption} from '@angular/cdk/a11y';
1010
import {coerceBooleanProperty} from '@angular/cdk/coercion';
1111
import {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';
12+
import {Platform} from '@angular/cdk/platform';
1213
import {
1314
ContentChild,
1415
Directive,
1516
ElementRef,
1617
EventEmitter,
1718
forwardRef,
19+
Inject,
1820
Input,
21+
NgZone,
1922
OnDestroy,
23+
Optional,
2024
Output,
2125
} from '@angular/core';
22-
import {CanColor, CanDisable, mixinColor, mixinDisabled} from '@angular/material/core';
26+
import {
27+
CanColor,
28+
CanDisable,
29+
CanDisableRipple,
30+
MAT_RIPPLE_GLOBAL_OPTIONS,
31+
mixinColor,
32+
mixinDisabled,
33+
mixinDisableRipple,
34+
RippleConfig,
35+
RippleGlobalOptions,
36+
RippleRenderer,
37+
RippleTarget
38+
} from '@angular/material/core';
2339
import {Subject} from 'rxjs/Subject';
2440

2541

@@ -47,7 +63,7 @@ export class MatChipBase {
4763
constructor(public _elementRef: ElementRef) {}
4864
}
4965

50-
export const _MatChipMixinBase = mixinColor(mixinDisabled(MatChipBase), 'primary');
66+
export const _MatChipMixinBase = mixinColor(mixinDisableRipple(mixinDisabled(MatChipBase)), 'primary');
5167

5268
const CHIP_ATTRIBUTE_NAMES = ['mat-basic-chip'];
5369

@@ -76,7 +92,7 @@ export class MatChipTrailingIcon {}
7692
*/
7793
@Directive({
7894
selector: `mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
79-
inputs: ['color', 'disabled'],
95+
inputs: ['color', 'disabled', 'disableRipple'],
8096
exportAs: 'matChip',
8197
host: {
8298
'class': 'mat-chip',
@@ -85,6 +101,7 @@ export class MatChipTrailingIcon {}
85101
'[class.mat-chip-selected]': 'selected',
86102
'[class.mat-chip-with-avatar]': 'avatar',
87103
'[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
104+
'[class.mat-chip-disabled]': 'disabled',
88105
'[attr.disabled]': 'disabled || null',
89106
'[attr.aria-disabled]': 'disabled.toString()',
90107
'[attr.aria-selected]': 'ariaSelected',
@@ -93,10 +110,26 @@ export class MatChipTrailingIcon {}
93110
'(focus)': '_hasFocus = true',
94111
'(blur)': '_blur()',
95112
},
96-
97113
})
98114
export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor,
99-
CanDisable {
115+
CanDisable, CanDisableRipple, RippleTarget {
116+
/**
117+
* Ripple configuration for ripples that are launched on pointer down.
118+
* @docs-private
119+
*/
120+
rippleConfig: RippleConfig = {};
121+
122+
/** Reference to the RippleRenderer for the chip. */
123+
private _chipRipple: RippleRenderer;
124+
125+
/**
126+
* Whether ripples are disabled on interaction
127+
* @docs-private
128+
*/
129+
get rippleDisabled(): boolean {
130+
return this.disabled || this.disableRipple;
131+
}
132+
100133
/** Whether the chip has focus. */
101134
_hasFocus: boolean = false;
102135

@@ -188,10 +221,23 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
188221
return this.selectable ? this.selected.toString() : null;
189222
}
190223

191-
constructor(public _elementRef: ElementRef) {
224+
constructor(public _elementRef: ElementRef,
225+
ngZone: NgZone,
226+
platform: Platform,
227+
@Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions) {
192228
super(_elementRef);
193229

194230
this._addHostClassName();
231+
232+
this._chipRipple = new RippleRenderer(this, ngZone, _elementRef, platform);
233+
this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
234+
235+
if (globalOptions) {
236+
this.rippleConfig = {
237+
speedFactor: globalOptions.baseSpeedFactor,
238+
animation: globalOptions.animation,
239+
};
240+
}
195241
}
196242

197243
_addHostClassName() {
@@ -208,6 +254,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
208254

209255
ngOnDestroy() {
210256
this.destroyed.emit({chip: this});
257+
this._chipRipple._removeTriggerEvents();
211258
}
212259

213260
/** Selects the chip. */

src/lib/chips/chips.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ $mat-chip-input-margin: 3px;
2020
$mat-chip-avatar-size: 32px;
2121
$mat-chip-remove-size: 18px;
2222

23+
.mat-chip {
24+
position: relative;
25+
overflow: hidden;
26+
}
27+
2328
.mat-standard-chip {
2429
@include mat-elevation-transition;
2530
display: inline-flex;

0 commit comments

Comments
 (0)