feat(popover-edit): Adds support for spanning multiple columns and setting width of the popup based on the size of the cell(s) (#15724)

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

@@ -6,15 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ElementRef, Injectable} from '@angular/core';
-import {Overlay, PositionStrategy} from '@angular/cdk/overlay';
+import {Directionality} from '@angular/cdk/bidi';
+import {Overlay, OverlaySizeConfig, PositionStrategy} from '@angular/cdk/overlay';
+import {Injectable} from '@angular/core';
 
 /**
- * Overridable factory responsible for configuring how cdkPopoverEdit popovers are positioned.
+ * Overridable factory responsible for configuring how cdkPopoverEdit popovers are positioned
+ * and sized.
  */
 @Injectable()
 export abstract class PopoverEditPositionStrategyFactory {
-  abstract forElementRef(elementRef: ElementRef): PositionStrategy;
+  /**
+   * Creates a PositionStrategy based on the specified table cells.
+   * The cells will be provided in DOM order.
+   */
+  abstract positionStrategyForCells(cells: HTMLElement[]): PositionStrategy;
+
+  /**
+   * Creates an OverlaySizeConfig based on the specified table cells.
+   * The cells will be provided in DOM order.
+   */
+  abstract sizeConfigForCells(cells: HTMLElement[]): OverlaySizeConfig;
 }
 
 /**
@@ -24,14 +36,16 @@ export abstract class PopoverEditPositionStrategyFactory {
  */
 @Injectable()
 export class DefaultPopoverEditPositionStrategyFactory extends PopoverEditPositionStrategyFactory {
-  constructor(protected readonly overlay: Overlay) {
+  constructor(protected readonly direction: Directionality, protected readonly overlay: Overlay) {
     super();
   }
 
-  forElementRef(elementRef: ElementRef): PositionStrategy {
-    return this.overlay.position().flexibleConnectedTo(elementRef)
+  positionStrategyForCells(cells: HTMLElement[]): PositionStrategy {
+    return this.overlay.position()
+        .flexibleConnectedTo(cells[0])
         .withGrowAfterOpen()
         .withPush()
+        .withViewportMargin(16)
         .withPositions([{
           originX: 'start',
           originY: 'top',
@@ -39,4 +53,25 @@ export class DefaultPopoverEditPositionStrategyFactory extends PopoverEditPositi
           overlayY: 'top',
         }]);
   }
+
+  sizeConfigForCells(cells: HTMLElement[]): OverlaySizeConfig {
+    if (cells.length === 0) {
+      return {};
+    }
+
+    if (cells.length === 1) {
+      return {width: cells[0].getBoundingClientRect().width};
+    }
+
+    let firstCell, lastCell;
+    if (this.direction.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};
+  }
 }

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

@@ -1,11 +1,12 @@
-import {BehaviorSubject} from 'rxjs';
-import {Component, ElementRef, Type, ViewChild} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, NgForm} from '@angular/forms';
-import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
 import {DataSource} from '@angular/cdk/collections';
 import {CdkTableModule} from '@angular/cdk/table';
-import {CdkPopoverEditModule, PopoverEditClickOutBehavior} from './index';
+import {CommonModule} from '@angular/common';
+import {Component, ElementRef, Type, ViewChild} from '@angular/core';
+import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
+import {FormsModule, NgForm} from '@angular/forms';
+import {BehaviorSubject} from 'rxjs';
+
+import {CdkPopoverEditColspan, CdkPopoverEditModule, PopoverEditClickOutBehavior} from './index';
 
 const EDIT_TEMPLATE = `
     <div style="background-color: white;">
@@ -33,6 +34,8 @@ const CELL_TEMPLATE = `
     </span>
     `;
 
+const POPOVER_EDIT_DIRECTIVE = `[cdkPopoverEdit]="nameEdit" [cdkPopoverEditColspan]="colspan"`;
+
 interface PeriodicElement {
   name: string;
   weight: number;
@@ -45,6 +48,7 @@ abstract class BaseTestComponent {
 
   ignoreSubmitUnlessValid = true;
   clickOutBehavior: PopoverEditClickOutBehavior = 'close';
+  colspan: CdkPopoverEditColspan = {};
 
   onSubmit(element: PeriodicElement, form: NgForm) {
     if (!form.valid) { return; }
@@ -62,7 +66,7 @@ abstract class BaseTestComponent {
 
   getEditCell(rowIndex = 0) {
     const row = getRows(this.table.nativeElement)[rowIndex];
-    return getCells(row)[0];
+    return getCells(row)[1];
   }
 
   focusEditCell(rowIndex = 0) {
@@ -84,6 +88,10 @@ abstract class BaseTestComponent {
     flush();
   }
 
+  getEditPane() {
+    return document.querySelector('.cdk-edit-pane');
+  }
+
   getInput() {
     return document.querySelector('input') as HTMLInputElement|null;
   }
@@ -125,7 +133,10 @@ abstract class BaseTestComponent {
     </ng-template>
 
     <tr *ngFor="let element of elements">
-      <td [cdkPopoverEdit]="nameEdit" [cdkPopoverEditContext]="element">
+      <td> just a cell </td>
+
+      <td ${POPOVER_EDIT_DIRECTIVE}
+          [cdkPopoverEditContext]="element">
         ${CELL_TEMPLATE}
       </td>
 
@@ -142,7 +153,9 @@ class VanillaTableOutOfCell extends BaseTestComponent {
   template: `
   <table #table editable>
     <tr *ngFor="let element of elements">
-      <td [cdkPopoverEdit]="nameEdit">
+      <td> just a cell </td>
+
+      <td ${POPOVER_EDIT_DIRECTIVE}>
         ${CELL_TEMPLATE}
 
         <ng-template #nameEdit>
@@ -175,9 +188,15 @@ class ElementDataSource extends DataSource<PeriodicElement> {
   template: `
   <div #table>
     <cdk-table cdk-table editable [dataSource]="dataSource">
+      <ng-container cdkColumnDef="before">
+        <cdk-cell *cdkCellDef="let element">
+          just a cell
+        </cdk-cell>
+      </ng-container>
+
       <ng-container cdkColumnDef="name">
         <cdk-cell *cdkCellDef="let element"
-            [cdkPopoverEdit]="nameEdit">
+            ${POPOVER_EDIT_DIRECTIVE}>
           ${CELL_TEMPLATE}
 
           <ng-template #nameEdit>
@@ -202,7 +221,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
   `
 })
 class CdkFlexTableInCell extends BaseTestComponent {
-  displayedColumns = ['name', 'weight'];
+  displayedColumns = ['before', 'name', 'weight'];
   dataSource = new ElementDataSource();
 }
 
@@ -210,9 +229,15 @@ class CdkFlexTableInCell extends BaseTestComponent {
   template: `
   <div #table>
     <table cdk-table editable [dataSource]="dataSource">
+      <ng-container cdkColumnDef="before">
+        <td cdk-cell *cdkCellDef="let element">
+          just a cell
+        </td>
+      </ng-container>
+
       <ng-container cdkColumnDef="name">
         <td cdk-cell *cdkCellDef="let element"
-            [cdkPopoverEdit]="nameEdit">
+            ${POPOVER_EDIT_DIRECTIVE}>
           ${CELL_TEMPLATE}
 
           <ng-template #nameEdit>
@@ -237,7 +262,7 @@ class CdkFlexTableInCell extends BaseTestComponent {
   `
 })
 class CdkTableInCell extends BaseTestComponent {
-  displayedColumns = ['name', 'weight'];
+  displayedColumns = ['before', 'name', 'weight'];
   dataSource = new ElementDataSource();
 }
 
@@ -316,6 +341,49 @@ describe('CDK Popover Edit', () => {
           expect(component.getInput()!.value).toBe('Hydrogen');
         }));
 
+        it('positions the lens at the top left corner and spans the full width of the cell',
+           fakeAsync(() => {
+             component.openLens();
+
+             const paneRect = component.getEditPane()!.getBoundingClientRect();
+             const cellRect = component.getEditCell().getBoundingClientRect();
+
+             expect(paneRect.width).toBe(cellRect.width);
+             expect(paneRect.left).toBe(cellRect.left);
+             expect(paneRect.top).toBe(cellRect.top);
+           }));
+
+        it('adjusts the positioning of the lens based on colspan', fakeAsync(() => {
+             const cellRects = getCells(getRows(component.table.nativeElement)[0])
+                                   .map(cell => cell.getBoundingClientRect());
+
+             component.colspan = {before: 1};
+             fixture.detectChanges();
+
+             component.openLens();
+
+             let paneRect = component.getEditPane()!.getBoundingClientRect();
+             expect(paneRect.top).toBe(cellRects[0].top);
+             expect(paneRect.left).toBe(cellRects[0].left);
+             expect(paneRect.right).toBe(cellRects[1].right);
+
+             component.colspan = {after: 1};
+             fixture.detectChanges();
+
+             paneRect = component.getEditPane()!.getBoundingClientRect();
+             expect(paneRect.top).toBe(cellRects[1].top);
+             expect(paneRect.left).toBe(cellRects[1].left);
+             expect(paneRect.right).toBe(cellRects[2].right);
+
+             component.colspan = {before: 1, after: 1};
+             fixture.detectChanges();
+
+             paneRect = component.getEditPane()!.getBoundingClientRect();
+             expect(paneRect.top).toBe(cellRects[0].top);
+             expect(paneRect.left).toBe(cellRects[0].left);
+             expect(paneRect.right).toBe(cellRects[2].right);
+           }));
+
         it('updates the form and submits, closing the lens', fakeAsync(() => {
           component.openLens();
 

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

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y';
-import {Overlay, OverlayRef} from '@angular/cdk/overlay';
+import {Overlay, OverlayRef, PositionStrategy} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
+import {ScrollDispatcher, ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterViewInit,
   Directive,
@@ -19,14 +20,24 @@ import {
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
-import {fromEvent, ReplaySubject} from 'rxjs';
-import {debounceTime, filter, map, mapTo, takeUntil} from 'rxjs/operators';
+import {fromEvent, merge, ReplaySubject} from 'rxjs';
+import {debounceTime, filter, map, mapTo, startWith, takeUntil} from 'rxjs/operators';
 
 import {CELL_SELECTOR, EDIT_PANE_CLASS, EDIT_PANE_SELECTOR, ROW_SELECTOR} from './constants';
 import {EditEventDispatcher} from './edit-event-dispatcher';
 import {closest} from './polyfill';
 import {PopoverEditPositionStrategyFactory} from './popover-edit-position-strategy-factory';
 
+/**
+ * Describes the number of columns before and after the originating cell that the
+ * edit popup should span. In left to right locales, before means left and after means
+ * right. In right to left locales before means right and after means left.
+ */
+export interface CdkPopoverEditColspan {
+  before?: number;
+  after?: number;
+}
+
 /**
  * The delay between the mouse entering a row and the mouse stopping its movement before
  * showing on-hover content.
@@ -111,6 +122,28 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
    */
   @Input('cdkPopoverEditContext') context?: C;
 
+  /**
+   * Specifies that the popup should cover additional table cells before and/or after
+   * this one.
+   */
+  @Input('cdkPopoverEditColspan')
+  get colspan(): CdkPopoverEditColspan {
+    return this._colspan;
+  }
+  set colspan(value: CdkPopoverEditColspan) {
+    this._colspan = value;
+
+    // Recompute positioning when the colspan changes.
+    if (this.overlayRef) {
+      this.overlayRef.updatePositionStrategy(this._getPositionStrategy());
+
+      if (this.overlayRef.hasAttached()) {
+        this._updateOverlaySize();
+      }
+    }
+  }
+  private _colspan: CdkPopoverEditColspan = {};
+
   protected focusTrap?: FocusTrap;
   protected overlayRef?: OverlayRef;
   protected readonly destroyed = new ReplaySubject<void>();
@@ -122,7 +155,9 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
       protected readonly ngZone: NgZone,
       protected readonly overlay: Overlay,
       protected readonly positionFactory: PopoverEditPositionStrategyFactory,
-      protected readonly viewContainerRef: ViewContainerRef) {}
+      protected readonly scrollDispatcher: ScrollDispatcher,
+      protected readonly viewContainerRef: ViewContainerRef,
+      protected readonly viewportRuler: ViewportRuler) {}
 
   ngAfterViewInit(): void {
     this._startListeningToEditEvents();
@@ -161,8 +196,8 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
     this.overlayRef = this.overlay.create({
       disposeOnNavigation: true,
       panelClass: EDIT_PANE_CLASS,
-      positionStrategy: this.positionFactory.forElementRef(this.elementRef),
-      scrollStrategy: this.overlay.scrollStrategies.reposition({autoClose: true}),
+      positionStrategy: this._getPositionStrategy(),
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
     });
 
     this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
@@ -179,6 +214,41 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
         this.viewContainerRef,
         {$implicit: this.context}));
     this.focusTrap!.focusInitialElementWhenReady();
+
+    // Update the size of the popup initially and on subsequent changes to
+    // scroll position and viewport size.
+    merge(this.scrollDispatcher.scrolled(), this.viewportRuler.change())
+        .pipe(
+            startWith(null),
+            takeUntil(this.overlayRef!.detachments()),
+            takeUntil(this.destroyed),
+            )
+        .subscribe(() => {
+          this._updateOverlaySize();
+        });
+  }
+
+  private _getOverlayCells(): HTMLElement[] {
+    const cell = closest(this.elementRef.nativeElement!, CELL_SELECTOR) as HTMLElement;
+
+    if (!this._colspan.before && !this._colspan.after) {
+      return [cell];
+    }
+
+    const row = closest(this.elementRef.nativeElement!, ROW_SELECTOR)!;
+    const rowCells = Array.from(row.querySelectorAll(CELL_SELECTOR)) as HTMLElement[];
+    const ownIndex = rowCells.indexOf(cell);
+
+    return rowCells.slice(
+        ownIndex - (this._colspan.before || 0), ownIndex + (this._colspan.after || 0) + 1);
+  }
+
+  private _getPositionStrategy(): PositionStrategy {
+    return this.positionFactory.positionStrategyForCells(this._getOverlayCells());
+  }
+
+  private _updateOverlaySize(): void {
+    this.overlayRef!.updateSize(this.positionFactory.sizeConfigForCells(this._getOverlayCells()));
   }
 
   private _maybeReturnFocusToCell(): void {

src/material-examples/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.css

@@ -0,0 +1,23 @@
+.example-table {
+  width: 100%;
+}
+
+.example-table th {
+  text-align: left;
+}
+
+.example-table td,
+.example-table th {
+  min-width: 300px;
+  width: 25%;
+}
+
+.example-input-container {
+  display: flex;
+  justify-content: stretch;
+}
+
+.example-input-container input {
+  flex: 1;
+  font-size: 14px;
+}

src/material-examples/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html

@@ -0,0 +1,70 @@
+<table editable class="example-table">
+  <!--
+    This edit lens is specified outside of the cell and must explicitly declare
+    its context. It could be reused in multiple cells.
+  -->
+  <ng-template #nameEdit let-ctx>
+    <div style="background-color: #ddd; width: 100%">
+      <form #f="ngForm"
+          cdkEditControl
+          (ngSubmit)="onSubmit(ctx.person, f)"
+          [cdkEditControlPreservedFormValue]="preservedValues.get(ctx.person)"
+          (cdkEditControlPreservedFormValueChange)="preservedValues.set(ctx.person, $event)">
+        <div class="example-input-container">
+          <input [ngModel]="ctx.person.firstName" name="firstName" required
+              [attr.cdkFocusInitial]="ctx.focus === 'firstName' || null">
+          <input [ngModel]="ctx.person.middleName" name="middleName"
+              [attr.cdkFocusInitial]="ctx.focus === 'middleName' || null">
+          <input [ngModel]="ctx.person.lastName" name="lastName" required
+              [attr.cdkFocusInitial]="ctx.focus === 'lastName' || null">
+        </div>
+        <br>
+        <br>
+        <button type="submit">Confirm</button>
+        <button cdkEditRevert>Revert</button>
+        <button cdkEditClose>Close</button>
+      </form>
+    </div>
+  </ng-template>
+  
+  <tr>
+    <th> No. </th>
+    <th> First name </th>
+    <th> Middle name </th>
+    <th> Last name </th>
+  </tr>
+  
+  <tr *ngFor="let person of persons">
+    <td> {{person.id}} </td>
+
+    <td [cdkPopoverEdit]="nameEdit"
+        [cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
+        [cdkPopoverEditColspan]="{after: 2}">
+      {{person.firstName}}
+      
+      <span *cdkRowHoverContent>
+        <button cdkEditOpen>Edit</button>
+      </span>
+    </td>
+    
+    <td [cdkPopoverEdit]="nameEdit"
+        [cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
+        [cdkPopoverEditColspan]="{before: 1, after: 1}">
+      {{person.middleName}}
+      
+      <span *cdkRowHoverContent>
+        <button cdkEditOpen>Edit</button>
+      </span>
+    </td>
+    
+    <td [cdkPopoverEdit]="nameEdit"
+        [cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
+        [cdkPopoverEditColspan]="{before: 2}">
+      {{person.lastName}}
+      
+      <span *cdkRowHoverContent>
+        <button cdkEditOpen>Edit</button>
+      </span>
+    </td>
+  </tr>
+</table>

src/material-examples/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts

@@ -0,0 +1,45 @@
+import {Component} from '@angular/core';
+import {NgForm} from '@angular/forms';
+
+export interface Person {
+  id: number;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+}
+
+const PERSON_DATA: Person[] = [
+  {id: 1, firstName: 'Terra', middleName: 'Maduin', lastName: 'Branford'},
+  {id: 2, firstName: 'Locke', middleName: '', lastName: 'Cole'},
+  {id: 3, firstName: 'Celes', middleName: 'Gestahl', lastName: 'Chere'},
+  {id: 4, firstName: 'Edgar', middleName: 'Roni', lastName: 'Figaro'},
+  {id: 5, firstName: 'Sabin', middleName: 'Rene', lastName: 'Figaro'},
+  {id: 6, firstName: 'Clyde', middleName: '"Shadow"', lastName: 'Arrowny'},
+  {id: 7, firstName: 'Setzer', middleName: '', lastName: 'Gabbiani'},
+  {id: 8, firstName: 'Cid', middleName: 'Del Norte', lastName: 'Marquez'},
+  {id: 9, firstName: 'Mog', middleName: '', lastName: 'McMoogle'},
+];
+
+/**
+ * @title CDK Popover Edit spanning multiple columns on an HTML data-table
+ */
+@Component({
+  selector: 'cdk-popover-edit-cell-span-vanilla-table-example',
+  styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
+  templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
+})
+export class CdkPopoverEditCellSpanVanillaTableExample {
+  readonly preservedValues = new WeakMap<Person, any>();
+
+  readonly persons = PERSON_DATA;
+
+  onSubmit(person: Person, f: NgForm) {
+    if (!f.valid) {
+      return;
+    }
+
+    person.firstName = f.value['firstName'];
+    person.middleName = f.value['middleName'];
+    person.lastName = f.value['lastName'];
+  }
+}

src/material-examples/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.css

@@ -8,5 +8,6 @@
 
 .example-table td,
 .example-table th {
+  min-width: 300px;
   width: 25%;
 }

src/material-examples/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html

@@ -4,7 +4,7 @@
     its context. It could be reused in multiple cells.
   -->
   <ng-template #weightEdit let-element>
-    <div style="background-color: white;">
+    <div style="background-color: white; width: 100%">
       <form #f="ngForm"
           cdkEditControl
           (ngSubmit)="onSubmitWeight(element, f)"
@@ -35,7 +35,7 @@
       
       <!-- This edit is defined in the cell and can implicitly access element -->
       <ng-template #nameEdit>
-        <div style="background-color: white;">
+        <div style="background-color: white; width: 100%">
           <form #f="ngForm"
               cdkEditControl
               (ngSubmit)="onSubmitName(element, f)"