refactor(overlay): allow HTMLElement to be passed in directly to connected position

Allows for an `HTMLElement` to be passed in directly to the `FlexibleConnectedPositionStrategy`, in addition to one wrapped in an `ElementRef`.

Fixes #11320.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -57,7 +57,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
   }
 
   it('should throw when attempting to attach to multiple different overlays', () => {
-    const origin = new ElementRef(document.createElement('div'));
+    const origin = document.createElement('div');
     const positionStrategy = overlay.position()
         .flexibleConnectedTo(origin)
         .withPositions([{
@@ -68,16 +68,16 @@ describe('FlexibleConnectedPositionStrategy', () => {
         }]);
 
     // Needs to be in the DOM for IE not to throw an "Unspecified error".
-    document.body.appendChild(origin.nativeElement);
+    document.body.appendChild(origin);
     attachOverlay({positionStrategy});
 
     expect(() => attachOverlay({positionStrategy})).toThrow();
 
-    document.body.removeChild(origin.nativeElement);
+    document.body.removeChild(origin);
   });
 
   it('should not throw when trying to apply after being disposed', () => {
-    const origin = new ElementRef(document.createElement('div'));
+    const origin = document.createElement('div');
     const positionStrategy = overlay.position()
         .flexibleConnectedTo(origin)
         .withPositions([{
@@ -88,17 +88,17 @@ describe('FlexibleConnectedPositionStrategy', () => {
         }]);
 
     // Needs to be in the DOM for IE not to throw an "Unspecified error".
-    document.body.appendChild(origin.nativeElement);
+    document.body.appendChild(origin);
     attachOverlay({positionStrategy});
     overlayRef.dispose();
 
     expect(() => positionStrategy.apply()).not.toThrow();
 
-    document.body.removeChild(origin.nativeElement);
+    document.body.removeChild(origin);
   });
 
   it('should not throw when trying to re-apply the last position after being disposed', () => {
-    const origin = new ElementRef(document.createElement('div'));
+    const origin = document.createElement('div');
     const positionStrategy = overlay.position()
         .flexibleConnectedTo(origin)
         .withPositions([{
@@ -109,13 +109,13 @@ describe('FlexibleConnectedPositionStrategy', () => {
         }]);
 
     // Needs to be in the DOM for IE not to throw an "Unspecified error".
-    document.body.appendChild(origin.nativeElement);
+    document.body.appendChild(origin);
     attachOverlay({positionStrategy});
     overlayRef.dispose();
 
     expect(() => positionStrategy.reapplyLastPosition()).not.toThrow();
 
-    document.body.removeChild(origin.nativeElement);
+    document.body.removeChild(origin);
   });
 
   describe('without flexible dimensions and pushing', () => {
@@ -132,7 +132,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
       positionStrategy = overlay.position()
-          .flexibleConnectedTo(new ElementRef(originElement))
+          .flexibleConnectedTo(originElement)
           .withFlexibleDimensions(false)
           .withPush(false);
     });
@@ -984,7 +984,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
       positionStrategy = overlay.position()
-          .flexibleConnectedTo(new ElementRef(originElement))
+          .flexibleConnectedTo(originElement)
           .withFlexibleDimensions(false)
           .withPush();
     });
@@ -1113,7 +1113,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
     beforeEach(() => {
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
-      positionStrategy = overlay.position().flexibleConnectedTo(new ElementRef(originElement));
+      positionStrategy = overlay.position().flexibleConnectedTo(originElement);
     });
 
     afterEach(() => {
@@ -1532,7 +1532,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
 
       // Create a strategy with knowledge of the scrollable container
       const strategy = overlay.position()
-        .flexibleConnectedTo(new ElementRef(originElement))
+        .flexibleConnectedTo(originElement)
         .withPush(false)
         .withPositions([{
           originX: 'start',
@@ -1611,7 +1611,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
     beforeEach(() => {
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
-      positionStrategy = overlay.position().flexibleConnectedTo(new ElementRef(originElement));
+      positionStrategy = overlay.position().flexibleConnectedTo(originElement);
     });
 
     afterEach(() => {
@@ -1721,7 +1721,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
     beforeEach(() => {
       originElement = createPositionedBlockElement();
       document.body.appendChild(originElement);
-      positionStrategy = overlay.position().flexibleConnectedTo(new ElementRef(originElement));
+      positionStrategy = overlay.position().flexibleConnectedTo(originElement);
     });
 
     afterEach(() => {

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -22,7 +22,6 @@ import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scrol
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 
-
 // TODO: refactor clipping detection into a separate thing (part of scrolling module)
 // TODO: doesn't handle both flexible width and height when it has to scroll along both axis.
 
@@ -119,12 +118,12 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   }
 
   constructor(
-    private _connectedTo: ElementRef,
+    connectedTo: ElementRef | HTMLElement,
     private _viewportRuler: ViewportRuler,
     private _document: Document,
     // @deletion-target 7.0.0 `_platform` parameter to be made required.
     private _platform?: Platform) {
-    this._origin = this._connectedTo.nativeElement;
+    this.setOrigin(connectedTo);
   }
 
   /** Attaches this position strategy to an overlay. */
@@ -370,8 +369,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    * Sets the origin element, relative to which to position the overlay.
    * @param origin Reference to the new origin element.
    */
-  setOrigin(origin: ElementRef): this {
-    this._origin = origin.nativeElement;
+  setOrigin(origin: ElementRef | HTMLElement): this {
+    this._origin = origin instanceof ElementRef ? origin.nativeElement : origin;
     return this;
   }
 

src/cdk/overlay/position/overlay-position-builder.ts

@@ -53,7 +53,7 @@ export class OverlayPositionBuilder {
    * Creates a flexible position strategy.
    * @param elementRef
    */
-  flexibleConnectedTo(elementRef: ElementRef): FlexibleConnectedPositionStrategy {
+  flexibleConnectedTo(elementRef: ElementRef | HTMLElement): FlexibleConnectedPositionStrategy {
     return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document,
         this._platform);
   }