Switch to tree-shakeable overlay APIs

goldens/material/autocomplete/index.api.md

@@ -23,7 +23,6 @@ import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
 import { QueryList } from '@angular/core';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { SimpleChanges } from '@angular/core';
@@ -43,12 +42,12 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
 export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 
 // @public @deprecated
-export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
 
 // @public @deprecated
 export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
+    deps: any[];
     useFactory: typeof MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
 };
 

goldens/material/datepicker/index.api.md

@@ -33,7 +33,6 @@ import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
 import { Portal } from '@angular/cdk/portal';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { SimpleChanges } from '@angular/core';
@@ -94,12 +93,12 @@ export const MAT_DATE_RANGE_SELECTION_STRATEGY: InjectionToken<MatDateRangeSelec
 export const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 
 // @public @deprecated
-export function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+export function MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
 
 // @public @deprecated
 export const MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
+    deps: any[];
     useFactory: typeof MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY;
 };
 

goldens/material/menu/index.api.md

@@ -18,7 +18,6 @@ import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
 import { QueryList } from '@angular/core';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { Subject } from 'rxjs';
@@ -42,7 +41,7 @@ export const MAT_MENU_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 // @public @deprecated
 export const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
+    deps: any[];
     useFactory: typeof MAT_MENU_SCROLL_STRATEGY_FACTORY;
 };
 

goldens/material/select/index.api.md

@@ -35,7 +35,6 @@ import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
 import { QueryList } from '@angular/core';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -52,12 +51,12 @@ export const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 // @public @deprecated
 export const MAT_SELECT_SCROLL_STRATEGY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
+    deps: any[];
     useFactory: typeof MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY;
 };
 
 // @public @deprecated
-export function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy;
+export function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(_overlay: unknown): () => ScrollStrategy;
 
 // @public
 export const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;

goldens/material/tooltip/index.api.md

@@ -19,7 +19,6 @@ import { NumberInput } from '@angular/cdk/coercion';
 import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
 import { OriginConnectionPosition } from '@angular/cdk/overlay';
-import { Overlay } from '@angular/cdk/overlay';
 import { OverlayConnectionPosition } from '@angular/cdk/overlay';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { ScrollStrategy } from '@angular/cdk/overlay';
@@ -37,12 +36,12 @@ export function MAT_TOOLTIP_DEFAULT_OPTIONS_FACTORY(): MatTooltipDefaultOptions;
 export const MAT_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 
 // @public @deprecated
-export function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+export function MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY(_overlay: unknown): () => ScrollStrategy;
 
 // @public @deprecated
 export const MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
-    deps: (typeof Overlay)[];
+    deps: any[];
     useFactory: typeof MAT_TOOLTIP_SCROLL_STRATEGY_FACTORY;
 };
 

src/cdk-experimental/column-resize/resizable.ts

@@ -23,7 +23,12 @@ import {
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {Overlay, OverlayRef} from '@angular/cdk/overlay';
+import {
+  createFlexibleConnectedPositionStrategy,
+  createOverlayRef,
+  createRepositionScrollStrategy,
+  OverlayRef,
+} from '@angular/cdk/overlay';
 import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
 import {merge, Subject} from 'rxjs';
 import {distinctUntilChanged, filter, take, takeUntil} from 'rxjs/operators';
@@ -64,14 +69,14 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   protected abstract readonly eventDispatcher: HeaderRowEventDispatcher;
   protected abstract readonly injector: Injector;
   protected abstract readonly ngZone: NgZone;
-  protected abstract readonly overlay: Overlay;
   protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;
   protected abstract readonly resizeStrategy: ResizeStrategy;
   protected abstract readonly styleScheduler: _CoalescedStyleScheduler;
   protected abstract readonly viewContainerRef: ViewContainerRef;
   protected abstract readonly changeDetectorRef: ChangeDetectorRef;
 
   protected readonly columnSizeStore = inject(ColumnSizeStore, {optional: true});
+  private _injector = inject(Injector);
 
   private _viewInitialized = false;
   private _isDestroyed = false;
@@ -146,9 +151,10 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     // over both cells and extending it down the table as needed.
 
     const isRtl = this.directionality.value === 'rtl';
-    const positionStrategy = this.overlay
-      .position()
-      .flexibleConnectedTo(this.elementRef.nativeElement!)
+    const positionStrategy = createFlexibleConnectedPositionStrategy(
+      this._injector,
+      this.elementRef.nativeElement!,
+    )
       .withFlexibleDimensions(false)
       .withGrowAfterOpen(false)
       .withPush(false)
@@ -162,12 +168,12 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
         },
       ]);
 
-    return this.overlay.create({
+    return createOverlayRef(this._injector, {
       // Always position the overlay based on left-indexed coordinates.
       direction: 'ltr',
       disposeOnNavigation: true,
       positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      scrollStrategy: createRepositionScrollStrategy(this._injector),
       width: '16px',
     });
   }

src/cdk-experimental/combobox/combobox.ts

@@ -10,8 +10,10 @@ import {BooleanInput, coerceArray, coerceBooleanProperty} from '@angular/cdk/coe
 import {DOWN_ARROW, ENTER, ESCAPE, TAB} from '@angular/cdk/keycodes';
 import {
   ConnectedPosition,
+  createBlockScrollStrategy,
+  createFlexibleConnectedPositionStrategy,
+  createOverlayRef,
   FlexibleConnectedPositionStrategy,
-  Overlay,
   OverlayConfig,
   OverlayRef,
 } from '@angular/cdk/overlay';
@@ -64,7 +66,6 @@ export const CDK_COMBOBOX = new InjectionToken<CdkCombobox>('CDK_COMBOBOX');
 export class CdkCombobox<T = unknown> implements OnDestroy {
   private readonly _tagName = inject(HOST_TAG_NAME);
   private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlay = inject(Overlay);
   protected readonly _viewContainerRef = inject(ViewContainerRef);
   private readonly _injector = inject(Injector);
   private readonly _doc = inject(DOCUMENT);
@@ -191,7 +192,8 @@ export class CdkCombobox<T = unknown> implements OnDestroy {
   open() {
     if (!this.isOpen() && !this.disabled) {
       this.opened.next();
-      this._overlayRef = this._overlayRef || this._overlay.create(this._getOverlayConfig());
+      this._overlayRef =
+        this._overlayRef || createOverlayRef(this._injector, this._getOverlayConfig());
       this._overlayRef.attach(this._getPanelContent());
       this._changeDetectorRef.markForCheck();
       if (!this._isTextTrigger()) {
@@ -255,16 +257,15 @@ export class CdkCombobox<T = unknown> implements OnDestroy {
   private _getOverlayConfig() {
     return new OverlayConfig({
       positionStrategy: this._getOverlayPositionStrategy(),
-      scrollStrategy: this._overlay.scrollStrategies.block(),
+      scrollStrategy: createBlockScrollStrategy(this._injector),
       direction: this._directionality || undefined,
     });
   }
 
   private _getOverlayPositionStrategy(): FlexibleConnectedPositionStrategy {
-    return this._overlay
-      .position()
-      .flexibleConnectedTo(this._elementRef)
-      .withPositions(this._getOverlayPositions());
+    return createFlexibleConnectedPositionStrategy(this._injector, this._elementRef).withPositions(
+      this._getOverlayPositions(),
+    );
   }
 
   private _getOverlayPositions(): ConnectedPosition[] {

src/cdk-experimental/popover-edit/edit-services.ts

@@ -9,7 +9,6 @@
 import {Injectable, NgZone, inject} from '@angular/core';
 import {FocusTrapFactory} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
-import {Overlay} from '@angular/cdk/overlay';
 import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 
 import {EditEventDispatcher} from './edit-event-dispatcher';
@@ -29,7 +28,6 @@ export class EditServices {
   readonly focusDispatcher = inject(FocusDispatcher);
   readonly focusTrapFactory = inject(FocusTrapFactory);
   readonly ngZone = inject(NgZone);
-  readonly overlay = inject(Overlay);
   readonly scrollDispatcher = inject(ScrollDispatcher);
   readonly viewportRuler = inject(ViewportRuler);
 }

src/cdk-experimental/popover-edit/table-directives.ts

@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import {FocusTrap} from '@angular/cdk/a11y';
-import {OverlayRef, OverlaySizeConfig, PositionStrategy} from '@angular/cdk/overlay';
+import {
+  createFlexibleConnectedPositionStrategy,
+  createOverlayRef,
+  createRepositionScrollStrategy,
+  OverlayRef,
+  OverlaySizeConfig,
+  PositionStrategy,
+} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
   afterNextRender,
@@ -15,6 +22,7 @@ import {
   ElementRef,
   EmbeddedViewRef,
   inject,
+  Injector,
   ListenerOptions,
   NgZone,
   OnDestroy,
@@ -240,6 +248,7 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   protected readonly services = inject(EditServices);
   protected readonly elementRef = inject(ElementRef);
   protected readonly viewContainerRef = inject(ViewContainerRef);
+  private _injector = inject(Injector);
 
   /** The edit lens template shown over the cell on edit. */
   template: TemplateRef<any> | null = null;
@@ -344,11 +353,11 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   }
 
   private _createEditOverlay(): void {
-    this.overlayRef = this.services.overlay.create({
+    this.overlayRef = createOverlayRef(this._injector, {
       disposeOnNavigation: true,
       panelClass: this.panelClass(),
       positionStrategy: this._getPositionStrategy(),
-      scrollStrategy: this.services.overlay.scrollStrategies.reposition(),
+      scrollStrategy: createRepositionScrollStrategy(this._injector),
       direction: this.services.directionality,
     });
 
@@ -402,9 +411,7 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
 
   private _getPositionStrategy(): PositionStrategy {
     const cells = this._getOverlayCells();
-    return this.services.overlay
-      .position()
-      .flexibleConnectedTo(cells[0])
+    return createFlexibleConnectedPositionStrategy(this._injector, cells[0])
       .withGrowAfterOpen()
       .withPush()
       .withViewportMargin(16)

src/cdk/a11y/live-announcer/live-announcer.spec.ts

@@ -1,7 +1,6 @@
 import {MutationObserverFactory} from '../../observers';
-import {Overlay} from '../../overlay';
 import {ComponentPortal} from '../../portal';
-import {Component, inject} from '@angular/core';
+import {Component, inject, Injector} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {A11yModule} from '../index';
@@ -11,10 +10,10 @@ import {
   LIVE_ANNOUNCER_ELEMENT_TOKEN,
   LiveAnnouncerDefaultOptions,
 } from './live-announcer-tokens';
+import {createOverlayRef} from '@angular/cdk/overlay';
 
 describe('LiveAnnouncer', () => {
   let announcer: LiveAnnouncer;
-  let overlay: Overlay;
   let ariaLiveElement: Element;
   let fixture: ComponentFixture<TestApp>;
 
@@ -26,7 +25,6 @@ describe('LiveAnnouncer', () => {
     );
 
     beforeEach(fakeAsync(() => {
-      overlay = TestBed.inject(Overlay);
       announcer = TestBed.inject(LiveAnnouncer);
       ariaLiveElement = getLiveElement();
       fixture = TestBed.createComponent(TestApp);
@@ -172,7 +170,7 @@ describe('LiveAnnouncer', () => {
 
     it('should add aria-owns to open aria-modal elements', fakeAsync(() => {
       const portal = new ComponentPortal(TestModal);
-      const overlayRef = overlay.create();
+      const overlayRef = createOverlayRef(TestBed.inject(Injector));
       const componentRef = overlayRef.attach(portal);
       const modal = componentRef.location.nativeElement;
       fixture.detectChanges();
@@ -192,7 +190,7 @@ describe('LiveAnnouncer', () => {
 
     it('should expand aria-owns of open aria-modal elements', fakeAsync(() => {
       const portal = new ComponentPortal(TestModal);
-      const overlayRef = overlay.create();
+      const overlayRef = createOverlayRef(TestBed.inject(Injector));
       const componentRef = overlayRef.attach(portal);
       const modal = componentRef.location.nativeElement;
       fixture.detectChanges();

src/cdk/dialog/dialog-injectors.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {InjectionToken, inject} from '@angular/core';
-import {Overlay, ScrollStrategy} from '../overlay';
+import {InjectionToken, Injector, inject} from '@angular/core';
+import {createBlockScrollStrategy, ScrollStrategy} from '../overlay';
 import {DialogConfig} from './dialog-config';
 
 /** Injection token for the Dialog's ScrollStrategy. */
@@ -16,8 +16,8 @@ export const DIALOG_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   {
     providedIn: 'root',
     factory: () => {
-      const overlay = inject(Overlay);
-      return () => overlay.scrollStrategies.block();
+      const injector = inject(Injector);
+      return () => createBlockScrollStrategy(injector);
     },
   },
 );