diff --git a/src/cdk/schematics/ng-update/data/constructor-checks.ts b/src/cdk/schematics/ng-update/data/constructor-checks.ts index 17bd39a7d2ae..353c577cbe6f 100644 --- a/src/cdk/schematics/ng-update/data/constructor-checks.ts +++ b/src/cdk/schematics/ng-update/data/constructor-checks.ts @@ -17,6 +17,12 @@ export type ConstructorChecksUpgradeData = string; * automatically through type checking. */ export const constructorChecks: VersionChanges = { + [TargetVersion.V12]: [ + { + pr: 'https://github.com/angular/components/pull/21876', + changes: ['CdkTable', 'StickyStyler'] + } + ], [TargetVersion.V11]: [ { pr: 'https://github.com/angular/components/pull/20454', diff --git a/src/cdk/table/sticky-styler.ts b/src/cdk/table/sticky-styler.ts index 43a3bcae63b1..11179c5845ff 100644 --- a/src/cdk/table/sticky-styler.ts +++ b/src/cdk/table/sticky-styler.ts @@ -48,11 +48,7 @@ export class StickyStyler { constructor(private _isNativeHtmlTable: boolean, private _stickCellCss: string, public direction: Direction, - /** - * @deprecated `_coalescedStyleScheduler` parameter to become required. - * @breaking-change 11.0.0 - */ - private _coalescedStyleScheduler?: _CoalescedStyleScheduler, + private _coalescedStyleScheduler: _CoalescedStyleScheduler, private _isBrowser = true, private readonly _needsPositionStickyOnElement = true, private readonly _positionListener?: StickyPositioningListener) { @@ -86,7 +82,7 @@ export class StickyStyler { } // Coalesce with sticky row/column updates (and potentially other changes like column resize). - this._scheduleStyleChanges(() => { + this._coalescedStyleScheduler.schedule(() => { for (const element of elementsToClear) { this._removeStickyStyle(element, stickyDirections); } @@ -128,7 +124,7 @@ export class StickyStyler { const firstStickyEnd = stickyEndStates.indexOf(true); // Coalesce with sticky row updates (and potentially other changes like column resize). - this._scheduleStyleChanges(() => { + this._coalescedStyleScheduler.schedule(() => { const isRtl = this.direction === 'rtl'; const start = isRtl ? 'right' : 'left'; const end = isRtl ? 'left' : 'right'; @@ -213,7 +209,7 @@ export class StickyStyler { // Coalesce with other sticky row updates (top/bottom), sticky columns updates // (and potentially other changes like column resize). - this._scheduleStyleChanges(() => { + this._coalescedStyleScheduler.schedule(() => { for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) { if (!states[rowIndex]) { continue; @@ -250,7 +246,7 @@ export class StickyStyler { const tfoot = tableElement.querySelector('tfoot')!; // Coalesce with other sticky updates (and potentially other changes like column resize). - this._scheduleStyleChanges(() => { + this._coalescedStyleScheduler.schedule(() => { if (stickyStates.some(state => !state)) { this._removeStickyStyle(tfoot, ['bottom']); } else { @@ -392,17 +388,4 @@ export class StickyStyler { return positions; } - - /** - * Schedules styles to be applied when the style scheduler deems appropriate. - * @breaking-change 11.0.0 This method can be removed in favor of calling - * `CoalescedStyleScheduler.schedule` directly once the scheduler is a required parameter. - */ - private _scheduleStyleChanges(changes: () => void) { - if (this._coalescedStyleScheduler) { - this._coalescedStyleScheduler.schedule(changes); - } else { - changes(); - } - } } diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index 18ed91e4b024..8395b1189e78 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -500,22 +500,17 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes protected readonly _elementRef: ElementRef, @Attribute('role') role: string, @Optional() protected readonly _dir: Directionality, @Inject(DOCUMENT) _document: any, private _platform: Platform, - + @Inject(_VIEW_REPEATER_STRATEGY) + protected readonly _viewRepeater: _ViewRepeater, RowContext>, + @Inject(_COALESCED_STYLE_SCHEDULER) + protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler, + private readonly _viewportRuler: ViewportRuler, /** - * @deprecated `_coalescedStyleScheduler`, `_viewRepeater` and `_viewportRuler` - * parameters to become required. - * @breaking-change 11.0.0 + * @deprecated `_stickyPositioningListener` parameter to become required. + * @breaking-change 13.0.0 */ - @Optional() @Inject(_VIEW_REPEATER_STRATEGY) - protected readonly _viewRepeater?: _ViewRepeater, RowContext>, - @Optional() @Inject(_COALESCED_STYLE_SCHEDULER) - protected readonly _coalescedStyleScheduler?: _CoalescedStyleScheduler, @Optional() @SkipSelf() @Inject(STICKY_POSITIONING_LISTENER) - protected readonly _stickyPositioningListener?: StickyPositioningListener, - // Optional for backwards compatibility. The viewport ruler is provided in root. Therefore, - // this property will never be null. - // tslint:disable-next-line: lightweight-tokens - @Optional() private readonly _viewportRuler?: ViewportRuler) { + protected readonly _stickyPositioningListener: StickyPositioningListener) { if (!role) { this._elementRef.nativeElement.setAttribute('role', 'grid'); } @@ -538,14 +533,9 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes return this.trackBy ? this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow; }); - // Table cell dimensions may change after resizing the window. Signal the sticky styler to - // refresh its cache of cell widths the next time sticky styles are updated. - // @breaking-change 11.0.0 Remove null check for _viewportRuler once it's a required parameter. - if (this._viewportRuler) { - this._viewportRuler.change().pipe(takeUntil(this._onDestroy)).subscribe(() => { - this._forceRecalculateCellWidths = true; - }); - } + this._viewportRuler.change().pipe(takeUntil(this._onDestroy)).subscribe(() => { + this._forceRecalculateCellWidths = true; + }); } ngAfterContentChecked() { @@ -626,38 +616,16 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes } const viewContainer = this._rowOutlet.viewContainer; - // @breaking-change 11.0.0 Remove null check for `_viewRepeater` and the - // `else` clause once `_viewRepeater` is turned into a required parameter. - if (this._viewRepeater) { - this._viewRepeater.applyChanges( - changes, - viewContainer, - (record: IterableChangeRecord>, - _adjustedPreviousIndex: number|null, - currentIndex: number|null) => this._getEmbeddedViewArgs(record.item, currentIndex!), - (record) => record.item.data, - (change: _ViewRepeaterItemChange, RowContext>) => { - if (change.operation === _ViewRepeaterOperation.INSERTED && change.context) { - this._renderCellTemplateForItem(change.record.item.rowDef, change.context); - } - }); - } else { - changes.forEachOperation( - (record: IterableChangeRecord>, prevIndex: number|null, - currentIndex: number|null) => { - if (record.previousIndex == null) { - const renderRow = record.item; - const rowDef = renderRow.rowDef; - const context: RowContext = {$implicit: renderRow.data}; - this._renderRow(this._rowOutlet, rowDef, currentIndex!, context); - } else if (currentIndex == null) { - viewContainer.remove(prevIndex!); - } else { - const view = >viewContainer.get(prevIndex!); - viewContainer.move(view!, currentIndex); - } - }); - } + this._viewRepeater.applyChanges(changes, viewContainer, + (record: IterableChangeRecord>, + _adjustedPreviousIndex: number|null, + currentIndex: number|null) => this._getEmbeddedViewArgs(record.item, currentIndex!), + (record) => record.item.data, + (change: _ViewRepeaterItemChange, RowContext>) => { + if (change.operation === _ViewRepeaterOperation.INSERTED && change.context) { + this._renderCellTemplateForItem(change.record.item.rowDef, change.context); + } + }); // Update the meta context of a row's context data (index, count, first, last, ...) this._updateRowIndexContext(); diff --git a/src/material-experimental/mdc-table/table.ts b/src/material-experimental/mdc-table/table.ts index 5797ffe6226f..20a4be13e88a 100644 --- a/src/material-experimental/mdc-table/table.ts +++ b/src/material-experimental/mdc-table/table.ts @@ -18,6 +18,8 @@ import { CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, + CDK_TABLE, + STICKY_POSITIONING_LISTENER, } from '@angular/cdk/table'; import { _DisposeViewRepeaterStrategy, @@ -48,10 +50,13 @@ export class MatRecycleRows {} }, providers: [ {provide: CdkTable, useExisting: MatTable}, + {provide: CDK_TABLE, useExisting: MatTable}, {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code // is only included in the build if used. {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy}, + // Prevent nested tables from seeing this table's StickyPositioningListener. + {provide: STICKY_POSITIONING_LISTENER, useValue: null}, ], encapsulation: ViewEncapsulation.None, // See note on CdkTable for explanation on why this uses the default change detection strategy. diff --git a/src/material/table/table.ts b/src/material/table/table.ts index efaff39969c0..e06bbe77adc4 100644 --- a/src/material/table/table.ts +++ b/src/material/table/table.ts @@ -10,7 +10,7 @@ import { CDK_TABLE_TEMPLATE, CdkTable, CDK_TABLE, - _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER + _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER } from '@angular/cdk/table'; import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core'; import { @@ -50,6 +50,8 @@ export class MatRecycleRows {} {provide: CdkTable, useExisting: MatTable}, {provide: CDK_TABLE, useExisting: MatTable}, {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, + // Prevent nested tables from seeing this table's StickyPositioningListener. + {provide: STICKY_POSITIONING_LISTENER, useValue: null}, ], encapsulation: ViewEncapsulation.None, // See note on CdkTable for explanation on why this uses the default change detection strategy. diff --git a/tools/public_api_guard/cdk/table.d.ts b/tools/public_api_guard/cdk/table.d.ts index c722d4e36ea9..a4b602c8cda0 100644 --- a/tools/public_api_guard/cdk/table.d.ts +++ b/tools/public_api_guard/cdk/table.d.ts @@ -193,7 +193,7 @@ export declare class CdkRowDef extends BaseRowDef { export declare class CdkTable implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit { protected readonly _changeDetectorRef: ChangeDetectorRef; - protected readonly _coalescedStyleScheduler?: _CoalescedStyleScheduler | undefined; + protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler; _contentColumnDefs: QueryList; _contentFooterRowDefs: QueryList; _contentHeaderRowDefs: QueryList; @@ -209,8 +209,8 @@ export declare class CdkTable implements AfterContentChecked, CollectionViewe _noDataRow: CdkNoDataRow; _noDataRowOutlet: NoDataRowOutlet; _rowOutlet: DataRowOutlet; - protected readonly _stickyPositioningListener?: StickyPositioningListener | undefined; - protected readonly _viewRepeater?: _ViewRepeater, RowContext> | undefined; + protected readonly _stickyPositioningListener: StickyPositioningListener; + protected readonly _viewRepeater: _ViewRepeater, RowContext>; get dataSource(): CdkTableDataSourceInput; set dataSource(dataSource: CdkTableDataSourceInput); get fixedLayout(): boolean; @@ -225,8 +225,8 @@ export declare class CdkTable implements AfterContentChecked, CollectionViewe start: number; end: number; }>; - constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform, - _viewRepeater?: _ViewRepeater, RowContext> | undefined, _coalescedStyleScheduler?: _CoalescedStyleScheduler | undefined, _stickyPositioningListener?: StickyPositioningListener | undefined, _viewportRuler?: ViewportRuler | undefined); + constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform, _viewRepeater: _ViewRepeater, RowContext>, _coalescedStyleScheduler: _CoalescedStyleScheduler, _viewportRuler: ViewportRuler, + _stickyPositioningListener: StickyPositioningListener); _getRenderedRows(rowOutlet: RowOutlet): HTMLElement[]; _getRowDefs(data: T, dataIndex: number): CdkRowDef[]; addColumnDef(columnDef: CdkColumnDef): void; @@ -248,7 +248,7 @@ export declare class CdkTable implements AfterContentChecked, CollectionViewe static ngAcceptInputType_fixedLayout: BooleanInput; static ngAcceptInputType_multiTemplateDataRows: BooleanInput; static ɵcmp: i0.ɵɵComponentDefWithMeta, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; "fixedLayout": "fixedLayout"; }, {}, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col"]>; - static ɵfac: i0.ɵɵFactoryDef, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, { optional: true; }, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }]>; + static ɵfac: i0.ɵɵFactoryDef, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>; } export declare class CdkTableModule { @@ -344,8 +344,7 @@ export declare type StickySize = number | null | undefined; export declare class StickyStyler { direction: Direction; - constructor(_isNativeHtmlTable: boolean, _stickCellCss: string, direction: Direction, - _coalescedStyleScheduler?: _CoalescedStyleScheduler | undefined, _isBrowser?: boolean, _needsPositionStickyOnElement?: boolean, _positionListener?: StickyPositioningListener | undefined); + constructor(_isNativeHtmlTable: boolean, _stickCellCss: string, direction: Direction, _coalescedStyleScheduler: _CoalescedStyleScheduler, _isBrowser?: boolean, _needsPositionStickyOnElement?: boolean, _positionListener?: StickyPositioningListener | undefined); _addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number, isBorderElement: boolean): void; _getCalculatedZIndex(element: HTMLElement): string; _getCellWidths(row: HTMLElement, recalculateCellWidths?: boolean): number[];