@angular/cdk 7.2.2 → 7.3.0

package/bundles/cdk-overlay.umd.js

@@ -1297,6 +1297,38 @@ OverlayRef = /** @class */ (function () {
         this._config = __assign({}, this._config, { direction: dir });
         this._updateElementDirection();
     };
+    /** Add a CSS class or an array of classes to the overlay pane. */
+    /**
+     * Add a CSS class or an array of classes to the overlay pane.
+     * @param {?} classes
+     * @return {?}
+     */
+    OverlayRef.prototype.addPanelClass = /**
+     * Add a CSS class or an array of classes to the overlay pane.
+     * @param {?} classes
+     * @return {?}
+     */
+    function (classes) {
+        if (this._pane) {
+            this._toggleClasses(this._pane, classes, true);
+        }
+    };
+    /** Remove a CSS class or an array of classes from the overlay pane. */
+    /**
+     * Remove a CSS class or an array of classes from the overlay pane.
+     * @param {?} classes
+     * @return {?}
+     */
+    OverlayRef.prototype.removePanelClass = /**
+     * Remove a CSS class or an array of classes from the overlay pane.
+     * @param {?} classes
+     * @return {?}
+     */
+    function (classes) {
+        if (this._pane) {
+            this._toggleClasses(this._pane, classes, false);
+        }
+    };
     /**
      * Returns the layout direction of the overlay panel.
      */
@@ -1767,7 +1799,7 @@ FlexibleConnectedPositionStrategy = /** @class */ (function () {
         // 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 {?} */
         var originRect = this._originRect;
@@ -1923,7 +1955,7 @@ FlexibleConnectedPositionStrategy = /** @class */ (function () {
      */
     function () {
         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 {?} */
@@ -2095,25 +2127,34 @@ FlexibleConnectedPositionStrategy = /** @class */ (function () {
         return (/** @type {?} */ (this));
     };
     /**
-     * Sets the origin element, relative to which to position the overlay.
-     * @param origin Reference to the new origin element.
+     * 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.
+     * @param origin Reference to the new origin.
      */
     /**
-     * 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}
      */
     FlexibleConnectedPositionStrategy.prototype.setOrigin = /**
-     * 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}
      */
     function (origin) {
-        (/** @type {?} */ (this))._origin = coercion.coerceElement(origin);
+        (/** @type {?} */ (this))._origin = origin;
         return (/** @type {?} */ (this));
     };
     /**
@@ -2941,7 +2982,7 @@ FlexibleConnectedPositionStrategy = /** @class */ (function () {
     function () {
         // Note: needs fresh rects since the position could've changed.
         /** @type {?} */
-        var originBounds = this._origin.getBoundingClientRect();
+        var originBounds = this._getOriginRect();
         /** @type {?} */
         var overlayBounds = this._pane.getBoundingClientRect();
         // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
@@ -3131,6 +3172,36 @@ FlexibleConnectedPositionStrategy = /** @class */ (function () {
             this._appliedPanelClasses = [];
         }
     };
+    /** Returns the ClientRect of the current origin. */
+    /**
+     * Returns the ClientRect of the current origin.
+     * @private
+     * @return {?}
+     */
+    FlexibleConnectedPositionStrategy.prototype._getOriginRect = /**
+     * Returns the ClientRect of the current origin.
+     * @private
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var origin = this._origin;
+        if (origin instanceof core.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
+        };
+    };
     return FlexibleConnectedPositionStrategy;
 }());
 /**
@@ -3942,20 +4013,20 @@ var OverlayPositionBuilder = /** @class */ (function () {
     };
     /**
      * Creates a flexible position strategy.
-     * @param elementRef
+     * @param origin Origin relative to which to position the overlay.
      */
     /**
      * Creates a flexible position strategy.
-     * @param {?} elementRef
+     * @param {?} origin Origin relative to which to position the overlay.
      * @return {?}
      */
     OverlayPositionBuilder.prototype.flexibleConnectedTo = /**
      * Creates a flexible position strategy.
-     * @param {?} elementRef
+     * @param {?} origin Origin relative to which to position the overlay.
      * @return {?}
      */
-    function (elementRef) {
-        return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document, this._platform, this._overlayContainer);
+    function (origin) {
+        return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document, this._platform, this._overlayContainer);
     };
     OverlayPositionBuilder.decorators = [
         { type: core.Injectable, args: [{ providedIn: 'root' },] },