diff --git a/goldens/cdk/table/index.api.md b/goldens/cdk/table/index.api.md index 99f2d3d3d6eb..f6c06e122fba 100644 --- a/goldens/cdk/table/index.api.md +++ b/goldens/cdk/table/index.api.md @@ -295,8 +295,6 @@ export class CdkTable implements AfterContentInit, AfterContentChecked, Colle addRowDef(rowDef: CdkRowDef): void; // (undocumented) protected readonly _changeDetectorRef: ChangeDetectorRef; - // (undocumented) - protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler; readonly contentChanged: EventEmitter; _contentColumnDefs: QueryList; _contentFooterRowDefs: QueryList; @@ -414,20 +412,6 @@ export interface CellDef { template: TemplateRef; } -// @public -export const _COALESCED_STYLE_SCHEDULER: InjectionToken<_CoalescedStyleScheduler>; - -// @public -export class _CoalescedStyleScheduler { - constructor(...args: unknown[]); - schedule(task: () => unknown): void; - scheduleEnd(task: () => unknown): void; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration<_CoalescedStyleScheduler, never>; - // (undocumented) - static ɵprov: i0.ɵɵInjectableDeclaration<_CoalescedStyleScheduler>; -} - // @public export class DataRowOutlet implements RowOutlet { constructor(...args: unknown[]); @@ -506,14 +490,6 @@ export interface RowOutlet { viewContainer: ViewContainerRef; } -// @public -export class _Schedule { - // (undocumented) - endTasks: (() => unknown)[]; - // (undocumented) - tasks: (() => unknown)[]; -} - // @public export const STICKY_POSITIONING_LISTENER: InjectionToken; diff --git a/src/cdk/table/coalesced-style-scheduler.ts b/src/cdk-experimental/column-resize/coalesced-style-scheduler.ts similarity index 100% rename from src/cdk/table/coalesced-style-scheduler.ts rename to src/cdk-experimental/column-resize/coalesced-style-scheduler.ts diff --git a/src/cdk-experimental/column-resize/column-resize-directives/constants.ts b/src/cdk-experimental/column-resize/column-resize-directives/constants.ts index f774cf81437b..0cf3bd26c728 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/constants.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/constants.ts @@ -13,11 +13,13 @@ import { TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, FLEX_RESIZE_STRATEGY_PROVIDER, } from '../resize-strategy'; +import {_COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler} from '../coalesced-style-scheduler'; const PROVIDERS: Provider[] = [ ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeNotifierSource, + {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, ]; export const TABLE_PROVIDERS: Provider[] = [ diff --git a/src/cdk-experimental/column-resize/overlay-handle.ts b/src/cdk-experimental/column-resize/overlay-handle.ts index 0d8ab65e35d0..351107c33a28 100644 --- a/src/cdk-experimental/column-resize/overlay-handle.ts +++ b/src/cdk-experimental/column-resize/overlay-handle.ts @@ -18,7 +18,7 @@ import { import {coerceCssPixelValue} from '@angular/cdk/coercion'; import {Directionality} from '@angular/cdk/bidi'; import {ESCAPE} from '@angular/cdk/keycodes'; -import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table'; +import {CdkColumnDef} from '@angular/cdk/table'; import {Subject, merge, Observable} from 'rxjs'; import { distinctUntilChanged, @@ -36,6 +36,7 @@ import {HEADER_CELL_SELECTOR} from './selectors'; import {ColumnResizeNotifierSource} from './column-resize-notifier'; import {HeaderRowEventDispatcher} from './event-dispatcher'; import {ResizeRef} from './resize-ref'; +import {_CoalescedStyleScheduler} from './coalesced-style-scheduler'; // TODO: Take another look at using cdk drag drop. IIRC I ran into a couple // good reasons for not using it but I don't remember what they were at this point. diff --git a/src/cdk-experimental/column-resize/public-api.ts b/src/cdk-experimental/column-resize/public-api.ts index bd2545c4735e..8ebe83bbdffa 100644 --- a/src/cdk-experimental/column-resize/public-api.ts +++ b/src/cdk-experimental/column-resize/public-api.ts @@ -19,3 +19,4 @@ export * from './resizable'; export * from './resize-ref'; export * from './resize-strategy'; export * from './overlay-handle'; +export * from './coalesced-style-scheduler'; diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts index d713035213a2..4a02585e1abe 100644 --- a/src/cdk-experimental/column-resize/resizable.ts +++ b/src/cdk-experimental/column-resize/resizable.ts @@ -29,7 +29,7 @@ import { createRepositionScrollStrategy, OverlayRef, } from '@angular/cdk/overlay'; -import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table'; +import {CdkColumnDef} from '@angular/cdk/table'; import {merge, Subject} from 'rxjs'; import {distinctUntilChanged, filter, take, takeUntil} from 'rxjs/operators'; @@ -43,6 +43,7 @@ import {ColumnSizeStore} from './column-size-store'; import {HeaderRowEventDispatcher} from './event-dispatcher'; import {ResizeRef} from './resize-ref'; import {ResizeStrategy} from './resize-strategy'; +import {_CoalescedStyleScheduler} from './coalesced-style-scheduler'; const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active'; diff --git a/src/cdk-experimental/column-resize/resize-strategy.ts b/src/cdk-experimental/column-resize/resize-strategy.ts index 6958ed692ee7..be3928d3871c 100644 --- a/src/cdk-experimental/column-resize/resize-strategy.ts +++ b/src/cdk-experimental/column-resize/resize-strategy.ts @@ -9,9 +9,10 @@ import {Injectable, OnDestroy, Provider, CSP_NONCE, inject, DOCUMENT} from '@angular/core'; import {coerceCssPixelValue} from '@angular/cdk/coercion'; -import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table'; +import {CdkTable} from '@angular/cdk/table'; import {ColumnResize} from './column-resize'; +import {_COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler} from './coalesced-style-scheduler'; /** * Provides an implementation for resizing a column. diff --git a/src/cdk/table/public-api.ts b/src/cdk/table/public-api.ts index 84219808d724..4e8b735c60d3 100644 --- a/src/cdk/table/public-api.ts +++ b/src/cdk/table/public-api.ts @@ -8,7 +8,6 @@ export * from './table'; export * from './cell'; -export * from './coalesced-style-scheduler'; export * from './row'; export * from './table-module'; export * from './sticky-position-listener'; diff --git a/src/cdk/table/sticky-styler.ts b/src/cdk/table/sticky-styler.ts index 42ff7b713f3a..372b37da1b32 100644 --- a/src/cdk/table/sticky-styler.ts +++ b/src/cdk/table/sticky-styler.ts @@ -12,7 +12,6 @@ */ import {afterNextRender, Injector} from '@angular/core'; import {Direction} from '../bidi'; -import {_CoalescedStyleScheduler} from './coalesced-style-scheduler'; import {StickyPositioningListener} from './sticky-position-listener'; export type StickyDirection = 'top' | 'bottom' | 'left' | 'right'; @@ -62,12 +61,11 @@ export class StickyStyler { constructor( private _isNativeHtmlTable: boolean, private _stickCellCss: string, - public direction: Direction, - private _coalescedStyleScheduler: _CoalescedStyleScheduler, private _isBrowser = true, private readonly _needsPositionStickyOnElement = true, - private readonly _positionListener?: StickyPositioningListener, - private readonly _tableInjector?: Injector, + public direction: Direction, + private readonly _positionListener: StickyPositioningListener, + private readonly _tableInjector: Injector, ) { this._borderCellCss = { 'top': `${_stickCellCss}-border-elem-top`, @@ -100,13 +98,18 @@ export class StickyStyler { } // Coalesce with sticky row/column updates (and potentially other changes like column resize). - this._afterNextRender({ - write: () => { - for (const element of elementsToClear) { - this._removeStickyStyle(element, stickyDirections); - } + afterNextRender( + { + write: () => { + for (const element of elementsToClear) { + this._removeStickyStyle(element, stickyDirections); + } + }, + }, + { + injector: this._tableInjector, }, - }); + ); } /** @@ -162,48 +165,55 @@ export class StickyStyler { }); } - this._afterNextRender({ - earlyRead: () => { - cellWidths = this._getCellWidths(firstRow, recalculateCellWidths); - - startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates); - endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates); - }, - write: () => { - for (const row of rows) { - for (let i = 0; i < numCells; i++) { - const cell = row.children[i] as HTMLElement; - if (stickyStartStates[i]) { - this._addStickyStyle(cell, start, startPositions[i], i === lastStickyStart); - } - - if (stickyEndStates[i]) { - this._addStickyStyle(cell, end, endPositions[i], i === firstStickyEnd); + afterNextRender( + { + earlyRead: () => { + cellWidths = this._getCellWidths(firstRow, recalculateCellWidths); + + startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates); + endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates); + }, + write: () => { + for (const row of rows) { + for (let i = 0; i < numCells; i++) { + const cell = row.children[i] as HTMLElement; + if (stickyStartStates[i]) { + this._addStickyStyle(cell, start, startPositions[i], i === lastStickyStart); + } + + if (stickyEndStates[i]) { + this._addStickyStyle(cell, end, endPositions[i], i === firstStickyEnd); + } } } - } - if (this._positionListener && cellWidths.some(w => !!w)) { - this._positionListener.stickyColumnsUpdated({ - sizes: - lastStickyStart === -1 - ? [] - : cellWidths - .slice(0, lastStickyStart + 1) - .map((width, index) => (stickyStartStates[index] ? width : null)), - }); - this._positionListener.stickyEndColumnsUpdated({ - sizes: - firstStickyEnd === -1 - ? [] - : cellWidths - .slice(firstStickyEnd) - .map((width, index) => (stickyEndStates[index + firstStickyEnd] ? width : null)) - .reverse(), - }); - } + if (this._positionListener && cellWidths.some(w => !!w)) { + this._positionListener.stickyColumnsUpdated({ + sizes: + lastStickyStart === -1 + ? [] + : cellWidths + .slice(0, lastStickyStart + 1) + .map((width, index) => (stickyStartStates[index] ? width : null)), + }); + this._positionListener.stickyEndColumnsUpdated({ + sizes: + firstStickyEnd === -1 + ? [] + : cellWidths + .slice(firstStickyEnd) + .map((width, index) => + stickyEndStates[index + firstStickyEnd] ? width : null, + ) + .reverse(), + }); + } + }, + }, + { + injector: this._tableInjector, }, - }); + ); } /** @@ -236,54 +246,59 @@ export class StickyStyler { // Coalesce with other sticky row updates (top/bottom), sticky columns updates // (and potentially other changes like column resize). - this._afterNextRender({ - earlyRead: () => { - for (let rowIndex = 0, stickyOffset = 0; rowIndex < rows.length; rowIndex++) { - if (!states[rowIndex]) { - continue; - } + afterNextRender( + { + earlyRead: () => { + for (let rowIndex = 0, stickyOffset = 0; rowIndex < rows.length; rowIndex++) { + if (!states[rowIndex]) { + continue; + } - stickyOffsets[rowIndex] = stickyOffset; - const row = rows[rowIndex]; - elementsToStick[rowIndex] = this._isNativeHtmlTable - ? (Array.from(row.children) as HTMLElement[]) - : [row]; + stickyOffsets[rowIndex] = stickyOffset; + const row = rows[rowIndex]; + elementsToStick[rowIndex] = this._isNativeHtmlTable + ? (Array.from(row.children) as HTMLElement[]) + : [row]; - const height = this._retrieveElementSize(row).height; - stickyOffset += height; - stickyCellHeights[rowIndex] = height; - } - }, - write: () => { - const borderedRowIndex = states.lastIndexOf(true); - - for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) { - if (!states[rowIndex]) { - continue; + const height = this._retrieveElementSize(row).height; + stickyOffset += height; + stickyCellHeights[rowIndex] = height; } + }, + write: () => { + const borderedRowIndex = states.lastIndexOf(true); + + for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) { + if (!states[rowIndex]) { + continue; + } - const offset = stickyOffsets[rowIndex]; - const isBorderedRowIndex = rowIndex === borderedRowIndex; - for (const element of elementsToStick[rowIndex]) { - this._addStickyStyle(element, position, offset, isBorderedRowIndex); + const offset = stickyOffsets[rowIndex]; + const isBorderedRowIndex = rowIndex === borderedRowIndex; + for (const element of elementsToStick[rowIndex]) { + this._addStickyStyle(element, position, offset, isBorderedRowIndex); + } } - } - if (position === 'top') { - this._positionListener?.stickyHeaderRowsUpdated({ - sizes: stickyCellHeights, - offsets: stickyOffsets, - elements: elementsToStick, - }); - } else { - this._positionListener?.stickyFooterRowsUpdated({ - sizes: stickyCellHeights, - offsets: stickyOffsets, - elements: elementsToStick, - }); - } + if (position === 'top') { + this._positionListener?.stickyHeaderRowsUpdated({ + sizes: stickyCellHeights, + offsets: stickyOffsets, + elements: elementsToStick, + }); + } else { + this._positionListener?.stickyFooterRowsUpdated({ + sizes: stickyCellHeights, + offsets: stickyOffsets, + elements: elementsToStick, + }); + } + }, }, - }); + { + injector: this._tableInjector, + }, + ); } /** @@ -298,19 +313,24 @@ export class StickyStyler { } // Coalesce with other sticky updates (and potentially other changes like column resize). - this._afterNextRender({ - write: () => { - const tfoot = tableElement.querySelector('tfoot')!; - - if (tfoot) { - if (stickyStates.some(state => !state)) { - this._removeStickyStyle(tfoot, ['bottom']); - } else { - this._addStickyStyle(tfoot, 'bottom', 0, false); + afterNextRender( + { + write: () => { + const tfoot = tableElement.querySelector('tfoot')!; + + if (tfoot) { + if (stickyStates.some(state => !state)) { + this._removeStickyStyle(tfoot, ['bottom']); + } else { + this._addStickyStyle(tfoot, 'bottom', 0, false); + } } - } + }, + }, + { + injector: this._tableInjector, }, - }); + ); } /** Triggered by the table's OnDestroy hook. */ @@ -560,21 +580,6 @@ export class StickyStyler { }, 0); } } - - /** - * Invoke afterNextRender with the table's injector, falling back to CoalescedStyleScheduler - * if the injector was not provided. - */ - private _afterNextRender(spec: {earlyRead?: () => void; write: () => void}) { - if (this._tableInjector) { - afterNextRender(spec, {injector: this._tableInjector}); - } else { - this._coalescedStyleScheduler.schedule(() => { - spec.earlyRead?.(); - spec.write(); - }); - } - } } function isCell(element: Element) { diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index fa01e73d282c..6debac739af8 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -62,7 +62,6 @@ import { } from 'rxjs'; import {takeUntil} from 'rxjs/operators'; import {CdkColumnDef} from './cell'; -import {_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from './coalesced-style-scheduler'; import { BaseRowDef, CdkCellOutlet, @@ -270,7 +269,6 @@ export interface RenderRow { providers: [ {provide: CDK_TABLE, useExisting: CdkTable}, {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy}, - {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, // Prevent nested tables from seeing this table's StickyPositioningListener. {provide: STICKY_POSITIONING_LISTENER, useValue: null}, ], @@ -286,9 +284,6 @@ export class CdkTable private _platform = inject(Platform); protected readonly _viewRepeater = inject<_ViewRepeater, RowContext>>(_VIEW_REPEATER_STRATEGY); - protected readonly _coalescedStyleScheduler = inject<_CoalescedStyleScheduler>( - _COALESCED_STYLE_SCHEDULER, - ); private readonly _viewportRuler = inject(ViewportRuler); protected readonly _stickyPositioningListener = inject( STICKY_POSITIONING_LISTENER, @@ -1381,10 +1376,9 @@ export class CdkTable this._stickyStyler = new StickyStyler( this._isNativeHtmlTable, this.stickyCssClass, - direction, - this._coalescedStyleScheduler, this._platform.isBrowser, this.needsPositionStickyOnElement, + direction, this._stickyPositioningListener, this._injector, ); diff --git a/src/dev-app/column-resize/column-resize-home.html b/src/dev-app/column-resize/column-resize-home.html index b88a0b0cf38e..38bceb30663f 100644 --- a/src/dev-app/column-resize/column-resize-home.html +++ b/src/dev-app/column-resize/column-resize-home.html @@ -1,29 +1,31 @@ - - - - Enabled-by-default column resize for MatTable - - + + + + + Enabled-by-default column resize for MatTable + + - - + + - - - - Enabled-by-default column resize for flex MatTable - - + + + + Enabled-by-default column resize for flex MatTable + + - - + + - - - - Opt-in column resize for MatTable - - + + + + Opt-in column resize for MatTable + + - - + + + diff --git a/src/material-experimental/column-resize/column-resize-directives/common.ts b/src/material-experimental/column-resize/column-resize-directives/common.ts index c4fcd9a70899..1bc85d5c80c4 100644 --- a/src/material-experimental/column-resize/column-resize-directives/common.ts +++ b/src/material-experimental/column-resize/column-resize-directives/common.ts @@ -9,6 +9,8 @@ import {Provider} from '@angular/core'; import { + _COALESCED_STYLE_SCHEDULER, + _CoalescedStyleScheduler, ColumnResize, ColumnResizeNotifier, ColumnResizeNotifierSource, @@ -24,6 +26,7 @@ const PROVIDERS: Provider[] = [ ColumnResizeNotifier, HeaderRowEventDispatcher, ColumnResizeNotifierSource, + {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, ]; export const TABLE_PROVIDERS: Provider[] = [ ...PROVIDERS, diff --git a/src/material-experimental/column-resize/overlay-handle.ts b/src/material-experimental/column-resize/overlay-handle.ts index 363c0b664b3a..292cda4b0fa8 100644 --- a/src/material-experimental/column-resize/overlay-handle.ts +++ b/src/material-experimental/column-resize/overlay-handle.ts @@ -17,13 +17,11 @@ import { DOCUMENT, } from '@angular/core'; -import { - CdkColumnDef, - _CoalescedStyleScheduler, - _COALESCED_STYLE_SCHEDULER, -} from '@angular/cdk/table'; +import {CdkColumnDef} from '@angular/cdk/table'; import {Directionality} from '@angular/cdk/bidi'; import { + _COALESCED_STYLE_SCHEDULER, + _CoalescedStyleScheduler, ColumnResize, ColumnResizeNotifierSource, HeaderRowEventDispatcher, diff --git a/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts b/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts index 3a6eca406350..db5204494f53 100644 --- a/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts +++ b/src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts @@ -18,12 +18,10 @@ import { } from '@angular/core'; import {Directionality} from '@angular/cdk/bidi'; +import {CdkColumnDef} from '@angular/cdk/table'; import { - CdkColumnDef, - _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, -} from '@angular/cdk/table'; -import { + _CoalescedStyleScheduler, ColumnResize, ColumnResizeNotifierSource, HeaderRowEventDispatcher, diff --git a/src/material-experimental/column-resize/resizable-directives/resizable.ts b/src/material-experimental/column-resize/resizable-directives/resizable.ts index 11a0faa19851..8479c4ffcf92 100644 --- a/src/material-experimental/column-resize/resizable-directives/resizable.ts +++ b/src/material-experimental/column-resize/resizable-directives/resizable.ts @@ -18,12 +18,10 @@ import { } from '@angular/core'; import {Directionality} from '@angular/cdk/bidi'; +import {CdkColumnDef} from '@angular/cdk/table'; import { - CdkColumnDef, - _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, -} from '@angular/cdk/table'; -import { + _CoalescedStyleScheduler, ColumnResize, ColumnResizeNotifierSource, HeaderRowEventDispatcher, diff --git a/src/material-experimental/column-resize/resize-strategy.ts b/src/material-experimental/column-resize/resize-strategy.ts index 0553354fbcf4..a1c611b4966c 100644 --- a/src/material-experimental/column-resize/resize-strategy.ts +++ b/src/material-experimental/column-resize/resize-strategy.ts @@ -7,7 +7,6 @@ */ import {Injectable, Provider} from '@angular/core'; -import {_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table'; import { ResizeStrategy, diff --git a/src/material/table/table.ts b/src/material/table/table.ts index 931b3f12257b..45878e61d58d 100644 --- a/src/material/table/table.ts +++ b/src/material/table/table.ts @@ -9,8 +9,6 @@ import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core'; import { CdkTable, - _CoalescedStyleScheduler, - _COALESCED_STYLE_SCHEDULER, CDK_TABLE, STICKY_POSITIONING_LISTENER, HeaderRowOutlet, @@ -77,7 +75,6 @@ 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},