fix(cdk/overlay): add missing transform origin directive input (#17489)

Author: wenqi73

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

@@ -480,6 +480,29 @@ describe('Overlay directives', () => {
       expect(pane.style.height).toBe('100px');
     });
 
+    it('should be able to set transform origin selector', () => {
+      const trigger = fixture.nativeElement.querySelector('#trigger');
+
+      trigger.style.position = 'fixed';
+      trigger.style.top = '200px';
+      trigger.style.left = '200px';
+
+      fixture.componentInstance.positionOverrides = [{
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+      }];
+
+      fixture.componentInstance.transformOriginSelector = '.cdk-test-panel-class';
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      const target = overlayContainerElement.querySelector('.cdk-test-panel-class')! as HTMLElement;
+
+      expect(target.style.transformOrigin).toContain('left bottom');
+    });
+
   });
 
   describe('outputs', () => {
@@ -569,7 +592,8 @@ describe('Overlay directives', () => {
             (overlayKeydown)="keydownHandler($event)"
             [cdkConnectedOverlayMinWidth]="minWidth"
             [cdkConnectedOverlayMinHeight]="minHeight"
-            [cdkConnectedOverlayPositions]="positionOverrides">
+            [cdkConnectedOverlayPositions]="positionOverrides"
+            [cdkConnectedOverlayTransformOriginOn]="transformOriginSelector">
     <p>Menu content</p>
   </ng-template>`,
 })
@@ -601,6 +625,7 @@ class ConnectedOverlayDirectiveTest {
   });
   detachHandler = jasmine.createSpy('detachHandler');
   attachResult: HTMLElement;
+  transformOriginSelector: string;
 }
 
 @Component({

src/cdk/overlay/overlay-directives.ts

@@ -171,6 +171,9 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   /** Whether the overlay is open. */
   @Input('cdkConnectedOverlayOpen') open: boolean = false;
 
+  /** CSS selector which to set the transform origin. */
+  @Input('cdkConnectedOverlayTransformOriginOn') transformOriginSelector: string;
+
   /** Whether or not the overlay should attach a backdrop. */
   @Input('cdkConnectedOverlayHasBackdrop')
   get hasBackdrop() { return this._hasBackdrop; }
@@ -338,7 +341,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       .withPush(this.push)
       .withGrowAfterOpen(this.growAfterOpen)
       .withViewportMargin(this.viewportMargin)
-      .withLockedPosition(this.lockPosition);
+      .withLockedPosition(this.lockPosition)
+      .withTransformOriginOn(this.transformOriginSelector);
   }
 
   /** Returns the position strategy of the overlay to be set on the overlay config */

tools/public_api_guard/cdk/overlay.d.ts

@@ -29,6 +29,7 @@ export declare class CdkConnectedOverlay implements OnDestroy, OnChanges {
     positions: ConnectedPosition[];
     push: boolean;
     scrollStrategy: ScrollStrategy;
+    transformOriginSelector: string;
     viewportMargin: number;
     width: number | string;
     constructor(_overlay: Overlay, templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef, scrollStrategyFactory: any, _dir: Directionality);