@angular/cdk 7.2.2 → 7.3.0

package/esm2015/overlay.js

@@ -5,11 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { coerceCssPixelValue, coerceArray, coerceElement, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceCssPixelValue, coerceArray, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ScrollDispatcher, ViewportRuler, ScrollingModule, VIEWPORT_RULER_PROVIDER } from '@angular/cdk/scrolling';
 export { ViewportRuler, VIEWPORT_RULER_PROVIDER, CdkScrollable, ScrollDispatcher } from '@angular/cdk/scrolling';
 import { DOCUMENT, Location } from '@angular/common';
-import { Inject, Injectable, NgZone, Optional, NgModule, SkipSelf, ApplicationRef, ComponentFactoryResolver, Injector, Directive, ElementRef, EventEmitter, InjectionToken, Input, Output, TemplateRef, ViewContainerRef, defineInjectable, inject } from '@angular/core';
+import { Inject, Injectable, NgZone, Optional, NgModule, SkipSelf, ApplicationRef, ComponentFactoryResolver, Injector, ElementRef, Directive, EventEmitter, InjectionToken, Input, Output, TemplateRef, ViewContainerRef, defineInjectable, inject } from '@angular/core';
 import { Observable, Subject, merge, Subscription } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { Platform } from '@angular/cdk/platform';
@@ -1034,6 +1034,26 @@ class OverlayRef {
         this._config = Object.assign({}, this._config, { direction: dir });
         this._updateElementDirection();
     }
+    /**
+     * Add a CSS class or an array of classes to the overlay pane.
+     * @param {?} classes
+     * @return {?}
+     */
+    addPanelClass(classes) {
+        if (this._pane) {
+            this._toggleClasses(this._pane, classes, true);
+        }
+    }
+    /**
+     * Remove a CSS class or an array of classes from the overlay pane.
+     * @param {?} classes
+     * @return {?}
+     */
+    removePanelClass(classes) {
+        if (this._pane) {
+            this._toggleClasses(this._pane, classes, false);
+        }
+    }
     /**
      * Returns the layout direction of the overlay panel.
      * @return {?}
@@ -1390,7 +1410,7 @@ class FlexibleConnectedPositionStrategy {
         // the overlay relative to the origin.
         // We use the viewport rect to determine whether a position would go off-screen.
         this._viewportRect = this._getNarrowedViewportRect();
-        this._originRect = this._origin.getBoundingClientRect();
+        this._originRect = this._getOriginRect();
         this._overlayRect = this._pane.getBoundingClientRect();
         /** @type {?} */
         const originRect = this._originRect;
@@ -1525,7 +1545,7 @@ class FlexibleConnectedPositionStrategy {
      */
     reapplyLastPosition() {
         if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
-            this._originRect = this._origin.getBoundingClientRect();
+            this._originRect = this._getOriginRect();
             this._overlayRect = this._pane.getBoundingClientRect();
             this._viewportRect = this._getNarrowedViewportRect();
             /** @type {?} */
@@ -1620,14 +1640,17 @@ class FlexibleConnectedPositionStrategy {
         return (/** @type {?} */ (this));
     }
     /**
-     * Sets the origin element, relative to which to position the overlay.
+     * Sets the origin, relative to which to position the overlay.
+     * Using an element origin is useful for building components that need to be positioned
+     * relatively to a trigger (e.g. dropdown menus or tooltips), whereas using a point can be
+     * used for cases like contextual menus which open relative to the user's pointer.
      * @template THIS
      * @this {THIS}
-     * @param {?} origin Reference to the new origin element.
+     * @param {?} origin Reference to the new origin.
      * @return {THIS}
      */
     setOrigin(origin) {
-        (/** @type {?} */ (this))._origin = coerceElement(origin);
+        (/** @type {?} */ (this))._origin = origin;
         return (/** @type {?} */ (this));
     }
     /**
@@ -2245,7 +2268,7 @@ class FlexibleConnectedPositionStrategy {
     _getScrollVisibility() {
         // Note: needs fresh rects since the position could've changed.
         /** @type {?} */
-        const originBounds = this._origin.getBoundingClientRect();
+        const originBounds = this._getOriginRect();
         /** @type {?} */
         const overlayBounds = this._pane.getBoundingClientRect();
         // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
@@ -2376,6 +2399,30 @@ class FlexibleConnectedPositionStrategy {
             this._appliedPanelClasses = [];
         }
     }
+    /**
+     * Returns the ClientRect of the current origin.
+     * @private
+     * @return {?}
+     */
+    _getOriginRect() {
+        /** @type {?} */
+        const origin = this._origin;
+        if (origin instanceof ElementRef) {
+            return origin.nativeElement.getBoundingClientRect();
+        }
+        if (origin instanceof HTMLElement) {
+            return origin.getBoundingClientRect();
+        }
+        // If the origin is a point, return a client rect as if it was a 0x0 element at the point.
+        return {
+            top: origin.y,
+            bottom: origin.y,
+            left: origin.x,
+            right: origin.x,
+            height: 0,
+            width: 0
+        };
+    }
 }
 /**
  * Shallow-extends a stylesheet object with another stylesheet object.
@@ -2875,11 +2922,11 @@ class OverlayPositionBuilder {
     }
     /**
      * Creates a flexible position strategy.
-     * @param {?} elementRef
+     * @param {?} origin Origin relative to which to position the overlay.
      * @return {?}
      */
-    flexibleConnectedTo(elementRef) {
-        return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document, this._platform, this._overlayContainer);
+    flexibleConnectedTo(origin) {
+        return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);
     }
 }
 OverlayPositionBuilder.decorators = [