@angular/cdk 7.2.2 → 7.3.0

package/esm5/overlay.es5.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 { __assign, __extends } from 'tslib';
 import { Observable, Subject, merge, Subscription } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
@@ -1264,6 +1264,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.
      */
@@ -1734,7 +1766,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;
@@ -1890,7 +1922,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 {?} */
@@ -2062,25 +2094,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 = coerceElement(origin);
+        (/** @type {?} */ (this))._origin = origin;
         return (/** @type {?} */ (this));
     };
     /**
@@ -2908,7 +2949,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
@@ -3098,6 +3139,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 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;
 }());
 /**
@@ -3909,20 +3980,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: Injectable, args: [{ providedIn: 'root' },] },