fix(list, option): ripples disable mouse events on user content (#4503)

Currently when a user places an element, that changes its color on hover, inside of a `md-option` or `md-list-item` the hover effect will never occur.

This is because the ripples are overlying the user content and all pointer events are blocked accidentally.

Fixes #4480

Author: devversion

src/lib/core/option/_option.scss

@@ -26,6 +26,11 @@
     bottom: 0;
     right: 0;
 
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
+
     // In high contrast mode this completely covers the text.
     @include cdk-high-contrast {
       opacity: 0.5;

src/lib/list/list-item.html

@@ -1,5 +1,9 @@
 <div class="mat-list-item-content" [class.mat-list-item-focus]="_hasFocus">
-  <div class="mat-list-item-ripple" md-ripple [mdRippleDisabled]="!isRippleEnabled()"></div>
+  <div class="mat-list-item-ripple" md-ripple
+       [mdRippleTrigger]="_getHostElement()"
+       [mdRippleDisabled]="!isRippleEnabled()">
+  </div>
+
   <ng-content
       select="[md-list-avatar],[md-list-icon], [mat-list-avatar], [mat-list-icon]"></ng-content>
   <div class="mat-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>

src/lib/list/list.scss

@@ -54,6 +54,11 @@ $mat-dense-list-icon-size: 20px;
     top: 0;
     right: 0;
     bottom: 0;
+
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
   }
 
   &.mat-list-item-avatar .mat-list-item-content {

src/lib/list/list.ts

@@ -172,4 +172,9 @@ export class MdListItem implements AfterContentInit {
   _handleBlur() {
     this._hasFocus = false;
   }
+
+  /** Retrieves the DOM element of the component host. */
+  _getHostElement(): HTMLElement {
+    return this._element.nativeElement;
+  }
 }