9
9
import { FocusableOption } from '@angular/cdk/a11y' ;
10
10
import { coerceBooleanProperty } from '@angular/cdk/coercion' ;
11
11
import { BACKSPACE , DELETE , SPACE } from '@angular/cdk/keycodes' ;
12
+ import { Platform } from '@angular/cdk/platform' ;
12
13
import {
13
14
ContentChild ,
14
15
Directive ,
15
16
ElementRef ,
16
17
EventEmitter ,
17
18
forwardRef ,
19
+ Inject ,
18
20
Input ,
21
+ NgZone ,
19
22
OnDestroy ,
23
+ Optional ,
20
24
Output ,
21
25
} 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' ;
23
39
import { Subject } from 'rxjs/Subject' ;
24
40
25
41
@@ -47,7 +63,7 @@ export class MatChipBase {
47
63
constructor ( public _elementRef : ElementRef ) { }
48
64
}
49
65
50
- export const _MatChipMixinBase = mixinColor ( mixinDisabled ( MatChipBase ) , 'primary' ) ;
66
+ export const _MatChipMixinBase = mixinColor ( mixinDisableRipple ( mixinDisabled ( MatChipBase ) ) , 'primary' ) ;
51
67
52
68
const CHIP_ATTRIBUTE_NAMES = [ 'mat-basic-chip' ] ;
53
69
@@ -76,7 +92,7 @@ export class MatChipTrailingIcon {}
76
92
*/
77
93
@Directive ( {
78
94
selector : `mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]` ,
79
- inputs : [ 'color' , 'disabled' ] ,
95
+ inputs : [ 'color' , 'disabled' , 'disableRipple' ] ,
80
96
exportAs : 'matChip' ,
81
97
host : {
82
98
'class' : 'mat-chip' ,
@@ -85,6 +101,7 @@ export class MatChipTrailingIcon {}
85
101
'[class.mat-chip-selected]' : 'selected' ,
86
102
'[class.mat-chip-with-avatar]' : 'avatar' ,
87
103
'[class.mat-chip-with-trailing-icon]' : 'trailingIcon || removeIcon' ,
104
+ '[class.mat-chip-disabled]' : 'disabled' ,
88
105
'[attr.disabled]' : 'disabled || null' ,
89
106
'[attr.aria-disabled]' : 'disabled.toString()' ,
90
107
'[attr.aria-selected]' : 'ariaSelected' ,
@@ -93,10 +110,26 @@ export class MatChipTrailingIcon {}
93
110
'(focus)' : '_hasFocus = true' ,
94
111
'(blur)' : '_blur()' ,
95
112
} ,
96
-
97
113
} )
98
114
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
+
100
133
/** Whether the chip has focus. */
101
134
_hasFocus : boolean = false ;
102
135
@@ -188,10 +221,23 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
188
221
return this . selectable ? this . selected . toString ( ) : null ;
189
222
}
190
223
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 ) {
192
228
super ( _elementRef ) ;
193
229
194
230
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
+ }
195
241
}
196
242
197
243
_addHostClassName ( ) {
@@ -208,6 +254,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
208
254
209
255
ngOnDestroy ( ) {
210
256
this . destroyed . emit ( { chip : this } ) ;
257
+ this . _chipRipple . _removeTriggerEvents ( ) ;
211
258
}
212
259
213
260
/** Selects the chip. */
0 commit comments