@angular/cdk 11.0.3 → 11.1.1

package/fesm2015/overlay.js

@@ -3,9 +3,9 @@ export { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/scr
 import { DOCUMENT, Location } from '@angular/common';
 import { ɵɵdefineInjectable, ɵɵinject, NgZone, Injectable, Inject, Optional, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, InjectionToken, Directive, EventEmitter, TemplateRef, ViewContainerRef, Input, Output, NgModule } from '@angular/core';
 import { coerceCssPixelValue, coerceArray, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { supportsScrollBehavior, Platform } from '@angular/cdk/platform';
 import { Directionality, BidiModule } from '@angular/cdk/bidi';
 import { DomPortalOutlet, TemplatePortal, PortalModule } from '@angular/cdk/portal';
-import { Platform } from '@angular/cdk/platform';
 import { Subject, Subscription, merge } from 'rxjs';
 import { take, takeUntil, takeWhile } from 'rxjs/operators';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
@@ -17,6 +17,7 @@ import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
  * 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
  */
+const scrollBehaviorSupported = supportsScrollBehavior();
 /**
  * Strategy that will prevent the user from scrolling while the overlay is visible.
  */
@@ -60,10 +61,17 @@ class BlockScrollStrategy {
             html.classList.remove('cdk-global-scrollblock');
             // Disable user-defined smooth scrolling temporarily while we restore the scroll position.
             // See https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
-            htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
+            // Note that we don't mutate the property if the browser doesn't support `scroll-behavior`,
+            // because it can throw off feature detections in `supportsScrollBehavior` which
+            // checks for `'scrollBehavior' in documentElement.style`.
+            if (scrollBehaviorSupported) {
+                htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
+            }
             window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
-            htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
-            bodyStyle.scrollBehavior = previousBodyScrollBehavior;
+            if (scrollBehaviorSupported) {
+                htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
+                bodyStyle.scrollBehavior = previousBodyScrollBehavior;
+            }
         }
     }
     _canBeEnabled() {
@@ -1011,7 +1019,7 @@ class OverlayRef {
     }
     /** Toggles the pointer events for the overlay pane element. */
     _togglePointerEvents(enablePointer) {
-        this._pane.style.pointerEvents = enablePointer ? 'auto' : 'none';
+        this._pane.style.pointerEvents = enablePointer ? '' : 'none';
     }
     /** Attaches a backdrop for this overlay. */
     _attachBackdrop() {
@@ -1535,7 +1543,10 @@ class FlexibleConnectedPositionStrategy {
         };
     }
     /** Gets how well an overlay at the given point will fit within the viewport. */
-    _getOverlayFit(point, overlay, viewport, position) {
+    _getOverlayFit(point, rawOverlayRect, viewport, position) {
+        // Round the overlay rect when comparing against the
+        // viewport, because the viewport is always rounded.
+        const overlay = getRoundedBoundingClientRect(rawOverlayRect);
         let { x, y } = point;
         let offsetX = this._getOffset(position, 'x');
         let offsetY = this._getOffset(position, 'y');
@@ -1593,7 +1604,7 @@ class FlexibleConnectedPositionStrategy {
      * @returns The point at which to position the overlay after pushing. This is effectively a new
      *     originPoint.
      */
-    _pushOverlayOnScreen(start, overlay, scrollPosition) {
+    _pushOverlayOnScreen(start, rawOverlayRect, scrollPosition) {
         // If the position is locked and we've pushed the overlay already, reuse the previous push
         // amount, rather than pushing it again. If we were to continue pushing, the element would
         // remain in the viewport, which goes against the expectations when position locking is enabled.
@@ -1603,6 +1614,9 @@ class FlexibleConnectedPositionStrategy {
                 y: start.y + this._previousPushAmount.y
             };
         }
+        // Round the overlay rect when comparing against the
+        // viewport, because the viewport is always rounded.
+        const overlay = getRoundedBoundingClientRect(rawOverlayRect);
         const viewport = this._viewportRect;
         // Determine how much the overlay goes outside the viewport on each
         // side, which we'll use to decide which direction to push it.
@@ -2074,6 +2088,22 @@ function getPixelValue(input) {
     }
     return input || null;
 }
+/**
+ * Gets a version of an element's bounding `ClientRect` where all the values are rounded down to
+ * the nearest pixel. This allows us to account for the cases where there may be sub-pixel
+ * deviations in the `ClientRect` returned by the browser (e.g. when zoomed in with a percentage
+ * size, see #21350).
+ */
+function getRoundedBoundingClientRect(clientRect) {
+    return {
+        top: Math.floor(clientRect.top),
+        right: Math.floor(clientRect.right),
+        bottom: Math.floor(clientRect.bottom),
+        left: Math.floor(clientRect.left),
+        width: Math.floor(clientRect.width),
+        height: Math.floor(clientRect.height)
+    };
+}
 
 /**
  * @license