@angular/cdk 13.2.0-next.0 → 13.2.0-next.1

package/fesm2020/cdk.mjs

@@ -8,7 +8,7 @@ import { Version } from '@angular/core';
  * found in the LICENSE file at https://angular.io/license
  */
 /** Current version of the Angular Component Development Kit. */
-const VERSION = new Version('13.2.0-next.0');
+const VERSION = new Version('13.2.0-next.1');
 
 /**
  * @license

package/fesm2020/cdk.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.mjs","sources":["../../../../../../src/cdk/version.ts","../../../../../../src/cdk/public-api.ts","../../../../../../src/cdk/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('13.2.0-next.0');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './version';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;ACXtD;;;;;;;;ACAA;;;;;;;;;;"}
+{"version":3,"file":"cdk.mjs","sources":["../../../../../../src/cdk/version.ts","../../../../../../src/cdk/public-api.ts","../../../../../../src/cdk/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('13.2.0-next.1');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './version';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;ACXtD;;;;;;;;ACAA;;;;;;;;;;"}

package/fesm2020/overlay.mjs

@@ -1278,15 +1278,17 @@ class FlexibleConnectedPositionStrategy {
         this._clearPanelClasses();
         this._resetOverlayElementStyles();
         this._resetBoundingBoxStyles();
-        // We need the bounding rects for the origin and the overlay to determine how to position
+        // We need the bounding rects for the origin, the overlay and the container to determine how to position
         // 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._getOriginRect();
         this._overlayRect = this._pane.getBoundingClientRect();
+        this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
         const originRect = this._originRect;
         const overlayRect = this._overlayRect;
         const viewportRect = this._viewportRect;
+        const containerRect = this._containerRect;
         // Positions where the overlay will fit with flexible dimensions.
         const flexibleFits = [];
         // Fallback if none of the preferred positions fit within the viewport.
@@ -1295,7 +1297,7 @@ class FlexibleConnectedPositionStrategy {
         // If a good fit is found, it will be applied immediately.
         for (let pos of this._preferredPositions) {
             // Get the exact (x, y) coordinate for the point-of-origin on the origin element.
-            let originPoint = this._getOriginPoint(originRect, pos);
+            let originPoint = this._getOriginPoint(originRect, containerRect, pos);
             // From that point-of-origin, get the exact (x, y) coordinate for the top-left corner of the
             // overlay in this position. We use the top-left corner for calculations and later translate
             // this into an appropriate (top, left, bottom, right) style.
@@ -1402,8 +1404,9 @@ class FlexibleConnectedPositionStrategy {
             this._originRect = this._getOriginRect();
             this._overlayRect = this._pane.getBoundingClientRect();
             this._viewportRect = this._getNarrowedViewportRect();
+            this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
             const lastPosition = this._lastPosition || this._preferredPositions[0];
-            const originPoint = this._getOriginPoint(this._originRect, lastPosition);
+            const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
             this._applyPosition(lastPosition, originPoint);
         }
     }
@@ -1505,7 +1508,7 @@ class FlexibleConnectedPositionStrategy {
     /**
      * Gets the (x, y) coordinate of a connection point on the origin based on a relative position.
      */
-    _getOriginPoint(originRect, pos) {
+    _getOriginPoint(originRect, containerRect, pos) {
         let x;
         if (pos.originX == 'center') {
             // Note: when centering we should always use the `left`
@@ -1517,6 +1520,11 @@ class FlexibleConnectedPositionStrategy {
             const endX = this._isRtl() ? originRect.left : originRect.right;
             x = pos.originX == 'start' ? startX : endX;
         }
+        // When zooming in Safari the container rectangle contains negative values for the position
+        // and we need to re-add them to the calculated coordinates.
+        if (containerRect.left < 0) {
+            x -= containerRect.left;
+        }
         let y;
         if (pos.originY == 'center') {
             y = originRect.top + originRect.height / 2;
@@ -1524,6 +1532,14 @@ class FlexibleConnectedPositionStrategy {
         else {
             y = pos.originY == 'top' ? originRect.top : originRect.bottom;
         }
+        // Normally the containerRect's top value would be zero, however when the overlay is attached to an input
+        // (e.g. in an autocomplete), mobile browsers will shift everything in order to put the input in the middle
+        // of the screen and to make space for the virtual keyboard. We need to account for this offset,
+        // otherwise our positioning will be thrown off.
+        // Additionally, when zooming in Safari this fixes the vertical position.
+        if (containerRect.top < 0) {
+            y -= containerRect.top;
+        }
         return { x, y };
     }
     /**
@@ -1590,7 +1606,7 @@ class FlexibleConnectedPositionStrategy {
     /**
      * Whether the overlay can fit within the viewport when it may resize either its width or height.
      * @param fit How well the overlay fits in the viewport at some position.
-     * @param point The (x, y) coordinates of the overlat at some position.
+     * @param point The (x, y) coordinates of the overlay at some position.
      * @param viewport The geometry of the viewport.
      */
     _canFitWithFlexibleDimensions(fit, point, viewport) {
@@ -1611,7 +1627,7 @@ class FlexibleConnectedPositionStrategy {
      * right and bottom).
      *
      * @param start Starting point from which the overlay is pushed.
-     * @param overlay Dimensions of the overlay.
+     * @param rawOverlayRect Dimensions of the overlay.
      * @param scrollPosition Current viewport scroll position.
      * @returns The point at which to position the overlay after pushing. This is effectively a new
      *     originPoint.
@@ -1906,14 +1922,6 @@ class FlexibleConnectedPositionStrategy {
         if (this._isPushed) {
             overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
         }
-        let virtualKeyboardOffset = this._overlayContainer
-            .getContainerElement()
-            .getBoundingClientRect().top;
-        // Normally this would be zero, however when the overlay is attached to an input (e.g. in an
-        // autocomplete), mobile browsers will shift everything in order to put the input in the middle
-        // of the screen and to make space for the virtual keyboard. We need to account for this offset,
-        // otherwise our positioning will be thrown off.
-        overlayPoint.y -= virtualKeyboardOffset;
         // We want to set either `top` or `bottom` based on whether the overlay wants to appear
         // above or below the origin and the direction in which the element will expand.
         if (position.overlayY === 'bottom') {