feat(cdk/scrolling): update ScrollDispatcher to allow HTMLElement parameters

Update ScrollDispatcher API to take elements of either ElementRef or HTMLElement. This is
to maintain consistency with newer APIs.

Author: BobobUnicorn

src/cdk/scrolling/scroll-dispatcher.spec.ts

@@ -159,6 +159,14 @@ describe('ScrollDispatcher', () => {
       expect(scrollableElementIds).toEqual(['scrollable-1', 'scrollable-1a']);
     });
 
+    it('allows a raw HTMLElement', () => {
+      const scrollContainers = scroll.getAncestorScrollContainers(element.nativeElement);
+      const scrollableElementIds =
+          scrollContainers.map(scrollable => scrollable.getElementRef().nativeElement.id);
+
+      expect(scrollableElementIds).toEqual(['scrollable-1', 'scrollable-1a']);
+    });
+
     it('should emit when one of the ancestor scrollable containers is scrolled', () => {
       const spy = jasmine.createSpy('scroll spy');
       const subscription = scroll.ancestorScrolled(element, 0).subscribe(spy);
@@ -173,6 +181,22 @@ describe('ScrollDispatcher', () => {
       subscription.unsubscribe();
     });
 
+    it('should emit when one of the ancestor scrollable containers is scrolled (HTMLElement API)',
+      () => {
+        const spy = jasmine.createSpy('scroll spy');
+        const subscription = scroll.ancestorScrolled(element.nativeElement, 0).subscribe(spy);
+        const grandparent = fixture.debugElement.nativeElement.querySelector('#scrollable-1');
+
+        dispatchFakeEvent(grandparent, 'scroll', false);
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        dispatchFakeEvent(window.document, 'scroll', false);
+        expect(spy).toHaveBeenCalledTimes(2);
+
+        subscription.unsubscribe();
+      });
+
+
     it('should not emit when a non-ancestor is scrolled', () => {
       const spy = jasmine.createSpy('scroll spy');
       const subscription = scroll.ancestorScrolled(element, 0).subscribe(spy);

src/cdk/scrolling/scroll-dispatcher.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceElement} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 import {ElementRef, Injectable, NgZone, OnDestroy, Optional, Inject} from '@angular/core';
 import {fromEvent, of as observableOf, Subject, Subscription, Observable, Observer} from 'rxjs';
@@ -119,23 +120,25 @@ export class ScrollDispatcher implements OnDestroy {
   /**
    * Returns an observable that emits whenever any of the
    * scrollable ancestors of an element are scrolled.
-   * @param elementRef Element whose ancestors to listen for.
+   * @param elementOrElementRef Element whose ancestors to listen for.
    * @param auditTimeInMs Time to throttle the scroll events.
    */
-  ancestorScrolled(elementRef: ElementRef, auditTimeInMs?: number): Observable<CdkScrollable|void> {
-    const ancestors = this.getAncestorScrollContainers(elementRef);
+  ancestorScrolled(
+      elementOrElementRef: ElementRef|HTMLElement,
+      auditTimeInMs?: number): Observable<CdkScrollable|void> {
+    const ancestors = this.getAncestorScrollContainers(elementOrElementRef);
 
     return this.scrolled(auditTimeInMs).pipe(filter(target => {
       return !target || ancestors.indexOf(target) > -1;
     }));
   }
 
   /** Returns all registered Scrollables that contain the provided element. */
-  getAncestorScrollContainers(elementRef: ElementRef): CdkScrollable[] {
+  getAncestorScrollContainers(elementOrElementRef: ElementRef|HTMLElement): CdkScrollable[] {
     const scrollingContainers: CdkScrollable[] = [];
 
     this.scrollContainers.forEach((_subscription: Subscription, scrollable: CdkScrollable) => {
-      if (this._scrollableContainsElement(scrollable, elementRef)) {
+      if (this._scrollableContainsElement(scrollable, elementOrElementRef)) {
         scrollingContainers.push(scrollable);
       }
     });
@@ -149,8 +152,10 @@ export class ScrollDispatcher implements OnDestroy {
   }
 
   /** Returns true if the element is contained within the provided Scrollable. */
-  private _scrollableContainsElement(scrollable: CdkScrollable, elementRef: ElementRef): boolean {
-    let element: HTMLElement | null = elementRef.nativeElement;
+  private _scrollableContainsElement(
+      scrollable: CdkScrollable,
+      elementOrElementRef: ElementRef|HTMLElement): boolean {
+    let element: HTMLElement | null = coerceElement(elementOrElementRef);
     let scrollableElement = scrollable.getElementRef().nativeElement;
 
     // Traverse through the element parents until we reach null, checking if any of the elements

tools/public_api_guard/cdk/scrolling.d.ts

@@ -170,9 +170,9 @@ export declare class ScrollDispatcher implements OnDestroy {
     _globalSubscription: Subscription | null;
     scrollContainers: Map<CdkScrollable, Subscription>;
     constructor(_ngZone: NgZone, _platform: Platform, document: any);
-    ancestorScrolled(elementRef: ElementRef, auditTimeInMs?: number): Observable<CdkScrollable | void>;
+    ancestorScrolled(elementOrElementRef: ElementRef | HTMLElement, auditTimeInMs?: number): Observable<CdkScrollable | void>;
     deregister(scrollable: CdkScrollable): void;
-    getAncestorScrollContainers(elementRef: ElementRef): CdkScrollable[];
+    getAncestorScrollContainers(elementOrElementRef: ElementRef | HTMLElement): CdkScrollable[];
     ngOnDestroy(): void;
     register(scrollable: CdkScrollable): void;
     scrolled(auditTimeInMs?: number): Observable<CdkScrollable | void>;