diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index 0d045cc2d46..3b857e57369 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -41,6 +41,7 @@ import { } from '@angular/material/core'; import {Subject} from 'rxjs'; import {take} from 'rxjs/operators'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; /** Represents an event fired on an individual `mat-chip`. */ @@ -105,6 +106,7 @@ export class MatChipTrailingIcon {} '[class.mat-chip-with-avatar]': 'avatar', '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon', '[class.mat-chip-disabled]': 'disabled', + '[class._mat-animation-noopable]': '_animationsDisabled', '[attr.disabled]': 'disabled || null', '[attr.aria-disabled]': 'disabled.toString()', '[attr.aria-selected]': 'ariaSelected', @@ -139,6 +141,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes /** Whether the chip has focus. */ _hasFocus: boolean = false; + /** Whether animations for the chip are enabled. */ + _animationsDisabled: boolean; + /** Whether the chip list is selectable */ chipListSelectable: boolean = true; @@ -224,11 +229,13 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes this.selected.toString() : null; } - constructor(public _elementRef: ElementRef, + constructor(public _elementRef: ElementRef, private _ngZone: NgZone, platform: Platform, @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) - globalRippleOptions: RippleGlobalOptions | null) { + globalRippleOptions: RippleGlobalOptions | null, + // @breaking-change 8.0.0 `animationMode` parameter to become required. + @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) { super(_elementRef); this._addHostClassName(); @@ -236,6 +243,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes this._chipRipple = new RippleRenderer(this, _ngZone, _elementRef, platform); this._chipRipple.setupTriggerEvents(_elementRef.nativeElement); this.rippleConfig = globalRippleOptions || {}; + this._animationsDisabled = animationMode === 'NoopAnimations'; } _addHostClassName() { diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss index 00a33bac799..5704e3b9169 100644 --- a/src/material/chips/chips.scss +++ b/src/material/chips/chips.scss @@ -1,6 +1,7 @@ @import '../core/style/variables'; @import '../core/style/elevation'; @import '../core/style/layout-common'; +@import '../core/style/noop-animation'; @import '../../cdk/a11y/a11y'; $mat-chip-min-height: 32px; @@ -36,6 +37,7 @@ $mat-chip-remove-size: 18px; .mat-standard-chip { @include mat-elevation-transition; + @include _noop-animation; display: inline-flex; padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding; border-radius: 16px; diff --git a/tools/public_api_guard/material/chips.d.ts b/tools/public_api_guard/material/chips.d.ts index c0d350a9c64..def31b1cf55 100644 --- a/tools/public_api_guard/material/chips.d.ts +++ b/tools/public_api_guard/material/chips.d.ts @@ -1,8 +1,9 @@ export declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken; export declare class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor, CanDisable, CanDisableRipple, RippleTarget { + _animationsDisabled: boolean; _chipListMultiple: boolean; - _elementRef: ElementRef; + _elementRef: ElementRef; _hasFocus: boolean; readonly _onBlur: Subject; readonly _onFocus: Subject; @@ -24,7 +25,7 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio readonly selectionChange: EventEmitter; trailingIcon: MatChipTrailingIcon; value: any; - constructor(_elementRef: ElementRef, _ngZone: NgZone, platform: Platform, globalRippleOptions: RippleGlobalOptions | null); + constructor(_elementRef: ElementRef, _ngZone: NgZone, platform: Platform, globalRippleOptions: RippleGlobalOptions | null, animationMode?: string); _addHostClassName(): void; _blur(): void; _handleClick(event: Event): void;