feat(cdk/overlay): accept PositionStrategy in cdkConnectedOverlay (#16374)

Author: mertdeg2

src/cdk/overlay/overlay-directives.spec.ts

@@ -8,7 +8,7 @@ import {
   dispatchEvent,
 } from '@angular/cdk/testing/private';
 import {ESCAPE, A} from '@angular/cdk/keycodes';
-import {CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin} from './index';
+import {Overlay, CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin} from './index';
 import {OverlayContainer} from './overlay-container';
 import {
   ConnectedOverlayPositionChange,
@@ -18,6 +18,7 @@ import {FlexibleConnectedPositionStrategy} from './position/flexible-connected-p
 
 
 describe('Overlay directives', () => {
+  let overlay: Overlay;
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
   let fixture: ComponentFixture<ConnectedOverlayDirectiveTest>;
@@ -36,8 +37,9 @@ describe('Overlay directives', () => {
     fixture.detectChanges();
   });
 
-  beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
+  beforeEach(inject([OverlayContainer, Overlay], (oc: OverlayContainer, o: Overlay) => {
     overlayContainer = oc;
+    overlay = o;
     overlayContainerElement = oc.getContainerElement();
   }));
 
@@ -62,6 +64,27 @@ describe('Overlay directives', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
+  it('can change positionStrategy via input', () => {
+    const expectedPositionStrategy =
+        overlay.position()
+            .flexibleConnectedTo(document.body)
+            .withFlexibleDimensions(true)
+            .withPositions([
+
+              {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top'},
+            ]);
+    fixture.componentInstance.isOpen = true;
+    fixture.componentInstance.positionStrategy = expectedPositionStrategy;
+    fixture.detectChanges();
+
+    const testComponent: ConnectedOverlayDirectiveTest = fixture.debugElement.componentInstance;
+    const overlayDirective = testComponent.connectedOverlayDirective;
+    const actualPositionStrategy = overlayDirective.overlayRef.getConfig().positionStrategy as
+        FlexibleConnectedPositionStrategy;
+
+    expect(expectedPositionStrategy).toBe(actualPositionStrategy);
+  });
+
   it('should destroy the overlay when the directive is destroyed', () => {
     fixture.componentInstance.isOpen = true;
     fixture.detectChanges();
@@ -575,6 +598,7 @@ describe('Overlay directives', () => {
             [cdkConnectedOverlayOpen]="isOpen"
             [cdkConnectedOverlayWidth]="width"
             [cdkConnectedOverlayHeight]="height"
+            [cdkConnectedOverlayPositionStrategy]="positionStrategy"
             [cdkConnectedOverlayOrigin]="triggerOverride || trigger"
             [cdkConnectedOverlayHasBackdrop]="hasBackdrop"
             [cdkConnectedOverlayViewportMargin]="viewportMargin"
@@ -606,6 +630,7 @@ class ConnectedOverlayDirectiveTest {
   width: number | string;
   height: number | string;
   minWidth: number | string;
+  positionStrategy: FlexibleConnectedPositionStrategy;
   minHeight: number | string;
   offsetX: number;
   offsetY: number;

src/cdk/overlay/overlay-directives.ts

@@ -122,6 +122,12 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   /** Registered connected position pairs. */
   @Input('cdkConnectedOverlayPositions') positions: ConnectedPosition[];
 
+  /**
+   * This input overrides the positions input if specified. It lets users pass
+   * in arbitrary positioning strategies.
+   */
+  @Input('cdkConnectedOverlayPositionStrategy') positionStrategy: FlexibleConnectedPositionStrategy;
+
   /** The offset in pixels for the overlay connection point on the x-axis */
   @Input('cdkConnectedOverlayOffsetX')
   get offsetX(): number { return this._offsetX; }
@@ -287,7 +293,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   /** Builds the overlay config based on the directive's inputs */
   private _buildConfig(): OverlayConfig {
-    const positionStrategy = this._position = this._createPositionStrategy();
+    const positionStrategy = this._position =
+      this.positionStrategy || this._createPositionStrategy();
     const overlayConfig = new OverlayConfig({
       direction: this._dir,
       positionStrategy,

tools/public_api_guard/cdk/overlay.d.ts

@@ -26,6 +26,7 @@ export declare class CdkConnectedOverlay implements OnDestroy, OnChanges {
     readonly overlayRef: OverlayRef;
     panelClass: string | string[];
     positionChange: EventEmitter<ConnectedOverlayPositionChange>;
+    positionStrategy: FlexibleConnectedPositionStrategy;
     positions: ConnectedPosition[];
     push: boolean;
     scrollStrategy: ScrollStrategy;
@@ -40,7 +41,7 @@ export declare class CdkConnectedOverlay implements OnDestroy, OnChanges {
     static ngAcceptInputType_hasBackdrop: boolean | string | null | undefined;
     static ngAcceptInputType_lockPosition: boolean | string | null | undefined;
     static ngAcceptInputType_push: boolean | string | null | undefined;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkConnectedOverlay, "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", ["cdkConnectedOverlay"], { 'origin': "cdkConnectedOverlayOrigin", 'positions': "cdkConnectedOverlayPositions", 'offsetX': "cdkConnectedOverlayOffsetX", 'offsetY': "cdkConnectedOverlayOffsetY", 'width': "cdkConnectedOverlayWidth", 'height': "cdkConnectedOverlayHeight", 'minWidth': "cdkConnectedOverlayMinWidth", 'minHeight': "cdkConnectedOverlayMinHeight", 'backdropClass': "cdkConnectedOverlayBackdropClass", 'panelClass': "cdkConnectedOverlayPanelClass", 'viewportMargin': "cdkConnectedOverlayViewportMargin", 'scrollStrategy': "cdkConnectedOverlayScrollStrategy", 'open': "cdkConnectedOverlayOpen", 'transformOriginSelector': "cdkConnectedOverlayTransformOriginOn", 'hasBackdrop': "cdkConnectedOverlayHasBackdrop", 'lockPosition': "cdkConnectedOverlayLockPosition", 'flexibleDimensions': "cdkConnectedOverlayFlexibleDimensions", 'growAfterOpen': "cdkConnectedOverlayGrowAfterOpen", 'push': "cdkConnectedOverlayPush" }, { 'backdropClick': "backdropClick", 'positionChange': "positionChange", 'attach': "attach", 'detach': "detach", 'overlayKeydown': "overlayKeydown" }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkConnectedOverlay, "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", ["cdkConnectedOverlay"], { 'origin': "cdkConnectedOverlayOrigin", 'positions': "cdkConnectedOverlayPositions", 'positionStrategy': "cdkConnectedOverlayPositionStrategy", 'offsetX': "cdkConnectedOverlayOffsetX", 'offsetY': "cdkConnectedOverlayOffsetY", 'width': "cdkConnectedOverlayWidth", 'height': "cdkConnectedOverlayHeight", 'minWidth': "cdkConnectedOverlayMinWidth", 'minHeight': "cdkConnectedOverlayMinHeight", 'backdropClass': "cdkConnectedOverlayBackdropClass", 'panelClass': "cdkConnectedOverlayPanelClass", 'viewportMargin': "cdkConnectedOverlayViewportMargin", 'scrollStrategy': "cdkConnectedOverlayScrollStrategy", 'open': "cdkConnectedOverlayOpen", 'transformOriginSelector': "cdkConnectedOverlayTransformOriginOn", 'hasBackdrop': "cdkConnectedOverlayHasBackdrop", 'lockPosition': "cdkConnectedOverlayLockPosition", 'flexibleDimensions': "cdkConnectedOverlayFlexibleDimensions", 'growAfterOpen': "cdkConnectedOverlayGrowAfterOpen", 'push': "cdkConnectedOverlayPush" }, { 'backdropClick': "backdropClick", 'positionChange': "positionChange", 'attach': "attach", 'detach': "detach", 'overlayKeydown': "overlayKeydown" }, never>;
     static ɵfac: i0.ɵɵFactoryDef<CdkConnectedOverlay>;
 }