refactor(cdk-experimental/popover-edit): switch to standalone

Reworks `cdk-experimental/popover-edit` to support standalone. Includes removing one provider whose default was provided in an `NgModule`.

Author: crisbeto

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

@@ -14,7 +14,6 @@ import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 
 import {EditEventDispatcher} from './edit-event-dispatcher';
 import {FocusDispatcher} from './focus-dispatcher';
-import {PopoverEditPositionStrategyFactory} from './popover-edit-position-strategy-factory';
 import {EditRef} from './edit-ref';
 
 /**
@@ -32,7 +31,6 @@ export class EditServices {
     readonly focusTrapFactory: FocusTrapFactory,
     readonly ngZone: NgZone,
     readonly overlay: Overlay,
-    readonly positionFactory: PopoverEditPositionStrategyFactory,
     readonly scrollDispatcher: ScrollDispatcher,
     readonly viewportRuler: ViewportRuler,
   ) {}

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

@@ -36,6 +36,7 @@ export type PopoverEditClickOutBehavior = 'close' | 'submit' | 'noop';
     '(document:click)': 'handlePossibleClickOut($event)',
     '(keydown)': '_handleKeydown($event)',
   },
+  standalone: true,
 })
 export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
   protected readonly destroyed = new Subject<void>();
@@ -60,7 +61,10 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
    */
   ignoreSubmitUnlessValid = true;
 
-  constructor(protected readonly elementRef: ElementRef, readonly editRef: EditRef<FormValue>) {}
+  constructor(
+    protected readonly elementRef: ElementRef,
+    readonly editRef: EditRef<FormValue>,
+  ) {}
 
   ngOnInit(): void {
     this.editRef.init(this.preservedFormValue);
@@ -140,9 +144,10 @@ export class CdkEditControl<FormValue> implements OnDestroy, OnInit {
 @Directive({
   selector: 'button[cdkEditRevert]',
   host: {
-    'type': 'button', // Prevents accidental form submits.
+    'type': 'button',
     '(click)': 'revertEdit()',
   },
+  standalone: true,
 })
 export class CdkEditRevert<FormValue> {
   /** Type of the button. Defaults to `button` to avoid accident form submits. */
@@ -163,6 +168,7 @@ export class CdkEditRevert<FormValue> {
     '(keydown.enter)': 'closeEdit()',
     '(keydown.space)': 'closeEdit()',
   },
+  standalone: true,
 })
 export class CdkEditClose<FormValue> {
   constructor(

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

@@ -16,10 +16,6 @@ import {
   CdkEditOpen,
 } from './table-directives';
 import {CdkEditControl, CdkEditRevert, CdkEditClose} from './lens-directives';
-import {
-  DefaultPopoverEditPositionStrategyFactory,
-  PopoverEditPositionStrategyFactory,
-} from './popover-edit-position-strategy-factory';
 
 const EXPORTED_DECLARATIONS = [
   CdkPopoverEdit,
@@ -33,14 +29,7 @@ const EXPORTED_DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [OverlayModule],
+  imports: [OverlayModule, ...EXPORTED_DECLARATIONS],
   exports: EXPORTED_DECLARATIONS,
-  declarations: EXPORTED_DECLARATIONS,
-  providers: [
-    {
-      provide: PopoverEditPositionStrategyFactory,
-      useClass: DefaultPopoverEditPositionStrategyFactory,
-    },
-  ],
 })
 export class CdkPopoverEditModule {}

src/cdk-experimental/popover-edit/popover-edit-position-strategy-factory.ts

@@ -1,7 +1,7 @@
 import {DataSource} from '@angular/cdk/collections';
 import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/keycodes';
 import {CdkTableModule} from '@angular/cdk/table';
-import {dispatchKeyboardEvent} from '../../cdk/testing/private';
+import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {CommonModule} from '@angular/common';
 import {Component, Directive, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';

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

@@ -12,7 +12,6 @@ export * from './focus-dispatcher';
 export * from './form-value-container';
 export * from './lens-directives';
 export * from './popover-edit-module';
-export * from './popover-edit-position-strategy-factory';
 export * from './table-directives';
 
 // Private to Angular Components

src/cdk-experimental/popover-edit/public-api.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {FocusTrap} from '@angular/cdk/a11y';
-import {OverlayRef, PositionStrategy} from '@angular/cdk/overlay';
+import {OverlayRef, OverlaySizeConfig, PositionStrategy} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
   AfterViewInit,
@@ -63,6 +63,7 @@ const MOUSE_MOVE_THROTTLE_TIME_MS = 10;
 @Directive({
   selector: 'table[editable], cdk-table[editable], mat-table[editable]',
   providers: [EditEventDispatcher, EditServices],
+  standalone: true,
 })
 export class CdkEditable implements AfterViewInit, OnDestroy {
   protected readonly destroyed = new Subject<void>();
@@ -175,6 +176,7 @@ const POPOVER_EDIT_INPUTS = [
   selector: '[cdkPopoverEdit]:not([cdkPopoverEditTabOut])',
   host: POPOVER_EDIT_HOST_BINDINGS,
   inputs: POPOVER_EDIT_INPUTS,
+  standalone: true,
 })
 export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   /** The edit lens template shown over the cell on edit. */
@@ -337,20 +339,53 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   }
 
   private _getPositionStrategy(): PositionStrategy {
-    return this.services.positionFactory.positionStrategyForCells(this._getOverlayCells());
+    const cells = this._getOverlayCells();
+    return this.services.overlay
+      .position()
+      .flexibleConnectedTo(cells[0])
+      .withGrowAfterOpen()
+      .withPush()
+      .withViewportMargin(16)
+      .withPositions([
+        {
+          originX: 'start',
+          originY: 'top',
+          overlayX: 'start',
+          overlayY: 'top',
+        },
+      ]);
   }
 
   private _updateOverlaySize(): void {
-    this.overlayRef!.updateSize(
-      this.services.positionFactory.sizeConfigForCells(this._getOverlayCells()),
-    );
+    this.overlayRef!.updateSize(this._sizeConfigForCells(this._getOverlayCells()));
   }
 
   private _maybeReturnFocusToCell(): void {
     if (closest(document.activeElement, EDIT_PANE_SELECTOR) === this.overlayRef!.overlayElement) {
       this.elementRef.nativeElement!.focus();
     }
   }
+
+  private _sizeConfigForCells(cells: HTMLElement[]): OverlaySizeConfig {
+    if (cells.length === 0) {
+      return {};
+    }
+
+    if (cells.length === 1) {
+      return {width: cells[0].getBoundingClientRect().width};
+    }
+
+    let firstCell, lastCell;
+    if (this.services.directionality.value === 'ltr') {
+      firstCell = cells[0];
+      lastCell = cells[cells.length - 1];
+    } else {
+      lastCell = cells[0];
+      firstCell = cells[cells.length - 1];
+    }
+
+    return {width: lastCell.getBoundingClientRect().right - firstCell.getBoundingClientRect().left};
+  }
 }
 
 /**
@@ -362,6 +397,7 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   selector: '[cdkPopoverEdit][cdkPopoverEditTabOut]',
   host: POPOVER_EDIT_HOST_BINDINGS,
   inputs: POPOVER_EDIT_INPUTS,
+  standalone: true,
 })
 export class CdkPopoverEditTabOut<C> extends CdkPopoverEdit<C> {
   protected override focusTrap?: FocusEscapeNotifier = undefined;
@@ -399,6 +435,7 @@ export class CdkPopoverEditTabOut<C> extends CdkPopoverEdit<C> {
  */
 @Directive({
   selector: '[cdkRowHoverContent]',
+  standalone: true,
 })
 export class CdkRowHoverContent implements AfterViewInit, OnDestroy {
   protected readonly destroyed = new Subject<void>();
@@ -495,6 +532,7 @@ export class CdkRowHoverContent implements AfterViewInit, OnDestroy {
   host: {
     '(click)': 'openEdit($event)',
   },
+  standalone: true,
 })
 export class CdkEditOpen {
   constructor(