Ripple working, style margins fixed

Author: vanessanschmitt

src/material-experimental/mdc-chips/chip-cell.html

@@ -1,4 +1,4 @@
-<div class="mdc-chip" [ngClass]="_classes" tabindex="0">
+<div #wrapper class="mdc-chip" [ngClass]="_classes" tabindex="0">
   <div class="mdc-chip__text"><ng-content></ng-content></div>
 </div>
 

src/material-experimental/mdc-chips/chip-cell.ts

@@ -6,13 +6,29 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AfterContentInit, AfterViewInit, Component, ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
+import {AfterContentInit, AfterViewInit, Component, ChangeDetectorRef, ContentChild, Directive, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Output, ViewChild} from '@angular/core';
+import {RippleRenderer, RippleTarget} from '@angular/material/core';
 import {MDCChipAdapter, MDCChipFoundation} from '@material/chips';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
 let uid = 0;
 
+const rippleTarget: RippleTarget = {
+  rippleConfig: {
+    animation: {
+      // TODO(mmalerba): Use the MDC constants once they are exported separately from the
+      // foundation. Grabbing them off the foundation prevents the foundation class from being
+      // tree-shaken. There is an open PR for this:
+      // https://github.com/material-components/material-components-web/pull/4593
+      enterDuration: 225 /* MDCRippleFoundation.numbers.DEACTIVATION_TIMEOUT_MS */,
+      exitDuration: 150 /* MDCRippleFoundation.numbers.FG_DEACTIVATION_MS */,
+    },
+  },
+  rippleDisabled: false
+};
+
 /**
  * Dummy directive to add CSS class to chip leading icon.
  * @docs-private
@@ -113,12 +129,16 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
   /** Subject that emits when the component has been destroyed. */
   private _destroyed = new Subject<void>();
 
+  /** The ripple renderer for this chip. */
+  private _rippleRenderer: RippleRenderer;
+
   /** The chip's leading icon. */
   @ContentChild(MatChipAvatar, {static: false}) leadingIcon: MatChipAvatar;
 
   /** The chip's trailing icon. */
   @ContentChild(MatChipTrailingIcon, {static: false}) trailingIcon: MatChipTrailingIcon;
 
+  @ViewChild('wrapper') _wrapper!: ElementRef;
   /**
    * Implementation of the MDC chip adapter interface.
    * These methods are called by the chip foundation.
@@ -149,7 +169,9 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
 
  constructor(
     private _changeDetectorRef: ChangeDetectorRef,
-    private _elementRef: ElementRef) {
+    readonly _elementRef: ElementRef,
+    private _platform: Platform,
+    private _ngZone: NgZone) {
     this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
   }
 
@@ -162,6 +184,7 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
+    this._initRipple();
     this._chipFoundation.init();
   }
 
@@ -185,5 +208,12 @@ export class MatChipCell implements AfterContentInit, AfterViewInit, OnDestroy {
     this._classes[cssClass] = active;
     this._changeDetectorRef.markForCheck();
   }
+
+  /** Initializes the ripple renderer. */
+  private _initRipple() {
+    this._rippleRenderer =
+      new RippleRenderer(rippleTarget, this._ngZone, this._wrapper, this._platform);
+    this._rippleRenderer.setupTriggerEvents(this._wrapper.nativeElement);
+  }
 }
 

src/material-experimental/mdc-chips/chips.scss

@@ -2,4 +2,4 @@
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-chip-without-ripple($query: $mat-base-styles-query);
-@include mdc-chip-core-styles($query: $mat-base-styles-query);
+@include mdc-chip-set-core-styles($query: $mat-base-styles-query);