@angular/cdk 10.0.2 → 10.1.3

package/fesm2015/table.js

@@ -4,9 +4,9 @@ import { isDataSource } from '@angular/cdk/collections';
 export { DataSource } from '@angular/cdk/collections';
 import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
-import { InjectionToken, Directive, TemplateRef, Inject, Optional, Input, ContentChild, ElementRef, IterableDiffers, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, EmbeddedViewRef, isDevMode, ChangeDetectorRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, isObservable, of } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { InjectionToken, Directive, TemplateRef, Inject, Optional, Input, ContentChild, ElementRef, Injectable, NgZone, IterableDiffers, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, EmbeddedViewRef, isDevMode, ChangeDetectorRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Subject, from, BehaviorSubject, isObservable, of } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
 
 /**
  * @license
@@ -141,6 +141,7 @@ class CdkColumnDef extends _CdkColumnDefBase {
         if (name) {
             this._name = name;
             this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-');
+            this._updateColumnCssClassName();
         }
     }
     /**
@@ -156,6 +157,16 @@ class CdkColumnDef extends _CdkColumnDefBase {
         this._stickyEnd = coerceBooleanProperty(v);
         this._hasStickyChanged = prevValue !== this._stickyEnd;
     }
+    /**
+     * Overridable method that sets the css classes that will be added to every cell in this
+     * column.
+     * In the future, columnCssClassName will change from type string[] to string and this
+     * will set a single string value.
+     * @docs-private
+     */
+    _updateColumnCssClassName() {
+        this._columnCssClassName = [`cdk-column-${this.cssClassFriendlyName}`];
+    }
 }
 CdkColumnDef.decorators = [
     { type: Directive, args: [{
@@ -177,8 +188,12 @@ CdkColumnDef.propDecorators = {
 /** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
 class BaseCdkCell {
     constructor(columnDef, elementRef) {
-        const columnClassName = `cdk-column-${columnDef.cssClassFriendlyName}`;
-        elementRef.nativeElement.classList.add(columnClassName);
+        // If IE 11 is dropped before we switch to setting a single class name, change to multi param
+        // with destructuring.
+        const classList = elementRef.nativeElement.classList;
+        for (const className of columnDef._columnCssClassName) {
+            classList.add(className);
+        }
     }
 }
 /** Header cell template container that adds the right classes and role. */
@@ -239,6 +254,90 @@ CdkCell.ctorParameters = () => [
     { type: ElementRef }
 ];
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+/**
+ * @docs-private
+ */
+class _Schedule {
+    constructor() {
+        this.tasks = [];
+        this.endTasks = [];
+    }
+}
+/**
+ * Allows grouping up CSSDom mutations after the current execution context.
+ * This can significantly improve performance when separate consecutive functions are
+ * reading from the CSSDom and then mutating it.
+ *
+ * @docs-private
+ */
+class _CoalescedStyleScheduler {
+    constructor(_ngZone) {
+        this._ngZone = _ngZone;
+        this._currentSchedule = null;
+        this._destroyed = new Subject();
+    }
+    /**
+     * Schedules the specified task to run at the end of the current VM turn.
+     */
+    schedule(task) {
+        this._createScheduleIfNeeded();
+        this._currentSchedule.tasks.push(task);
+    }
+    /**
+     * Schedules the specified task to run after other scheduled tasks at the end of the current
+     * VM turn.
+     */
+    scheduleEnd(task) {
+        this._createScheduleIfNeeded();
+        this._currentSchedule.endTasks.push(task);
+    }
+    /** Prevent any further tasks from running. */
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    _createScheduleIfNeeded() {
+        if (this._currentSchedule) {
+            return;
+        }
+        this._currentSchedule = new _Schedule();
+        this._getScheduleObservable().pipe(takeUntil(this._destroyed)).subscribe(() => {
+            while (this._currentSchedule.tasks.length || this._currentSchedule.endTasks.length) {
+                const schedule = this._currentSchedule;
+                // Capture new tasks scheduled by the current set of tasks.
+                this._currentSchedule = new _Schedule();
+                for (const task of schedule.tasks) {
+                    task();
+                }
+                for (const task of schedule.endTasks) {
+                    task();
+                }
+            }
+            this._currentSchedule = null;
+        });
+    }
+    _getScheduleObservable() {
+        // Use onStable when in the context of an ongoing change detection cycle so that we
+        // do not accidentally trigger additional cycles.
+        return this._ngZone.isStable ?
+            from(Promise.resolve(undefined)) :
+            this._ngZone.onStable.pipe(take(1));
+    }
+}
+_CoalescedStyleScheduler.decorators = [
+    { type: Injectable }
+];
+_CoalescedStyleScheduler.ctorParameters = () => [
+    { type: NgZone }
+];
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -505,12 +604,17 @@ class StickyStyler {
      * @param direction The directionality context of the table (ltr/rtl); affects column positioning
      *     by reversing left/right positions.
      * @param _isBrowser Whether the table is currently being rendered on the server or the client.
+     * @param _needsPositionStickyOnElement Whether we need to specify position: sticky on cells
+     *     using inline styles. If false, it is assumed that position: sticky is included in
+     *     the component stylesheet for _stickCellCss.
      */
-    constructor(_isNativeHtmlTable, _stickCellCss, direction, _isBrowser = true) {
+    constructor(_isNativeHtmlTable, _stickCellCss, direction, _coalescedStyleScheduler, _isBrowser = true, _needsPositionStickyOnElement = true) {
         this._isNativeHtmlTable = _isNativeHtmlTable;
         this._stickCellCss = _stickCellCss;
         this.direction = direction;
+        this._coalescedStyleScheduler = _coalescedStyleScheduler;
         this._isBrowser = _isBrowser;
+        this._needsPositionStickyOnElement = _needsPositionStickyOnElement;
     }
     /**
      * Clears the sticky positioning styles from the row and its cells by resetting the `position`
@@ -519,18 +623,24 @@ class StickyStyler {
      * @param stickyDirections The directions that should no longer be set as sticky on the rows.
      */
     clearStickyPositioning(rows, stickyDirections) {
+        const elementsToClear = [];
         for (const row of rows) {
             // If the row isn't an element (e.g. if it's an `ng-container`),
             // it won't have inline styles or `children` so we skip it.
             if (row.nodeType !== row.ELEMENT_NODE) {
                 continue;
             }
-            this._removeStickyStyle(row, stickyDirections);
+            elementsToClear.push(row);
             for (let i = 0; i < row.children.length; i++) {
-                const cell = row.children[i];
-                this._removeStickyStyle(cell, stickyDirections);
+                elementsToClear.push(row.children[i]);
             }
         }
+        // Coalesce with sticky row/column updates (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            for (const element of elementsToClear) {
+                this._removeStickyStyle(element, stickyDirections);
+            }
+        });
     }
     /**
      * Applies sticky left and right positions to the cells of each row according to the sticky
@@ -542,8 +652,8 @@ class StickyStyler {
      *     in this index position should be stuck to the end of the row.
      */
     updateStickyColumns(rows, stickyStartStates, stickyEndStates) {
-        const hasStickyColumns = stickyStartStates.some(state => state) || stickyEndStates.some(state => state);
-        if (!rows.length || !hasStickyColumns || !this._isBrowser) {
+        if (!rows.length || !this._isBrowser || !(stickyStartStates.some(state => state) ||
+            stickyEndStates.some(state => state))) {
             return;
         }
         const firstRow = rows[0];
@@ -551,18 +661,23 @@ class StickyStyler {
         const cellWidths = this._getCellWidths(firstRow);
         const startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
         const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
-        const isRtl = this.direction === 'rtl';
-        for (const row of rows) {
-            for (let i = 0; i < numCells; i++) {
-                const cell = row.children[i];
-                if (stickyStartStates[i]) {
-                    this._addStickyStyle(cell, isRtl ? 'right' : 'left', startPositions[i]);
-                }
-                if (stickyEndStates[i]) {
-                    this._addStickyStyle(cell, isRtl ? 'left' : 'right', endPositions[i]);
+        // Coalesce with sticky row updates (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            const isRtl = this.direction === 'rtl';
+            const start = isRtl ? 'right' : 'left';
+            const end = isRtl ? 'left' : 'right';
+            for (const row of rows) {
+                for (let i = 0; i < numCells; i++) {
+                    const cell = row.children[i];
+                    if (stickyStartStates[i]) {
+                        this._addStickyStyle(cell, start, startPositions[i]);
+                    }
+                    if (stickyEndStates[i]) {
+                        this._addStickyStyle(cell, end, endPositions[i]);
+                    }
                 }
             }
-        }
+        });
     }
     /**
      * Applies sticky positioning to the row's cells if using the native table layout, and to the
@@ -585,29 +700,34 @@ class StickyStyler {
         // sticky states need to be reversed as well.
         const rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick;
         const states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates;
-        let stickyHeight = 0;
-        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        // Measure row heights all at once before adding sticky styles to reduce layout thrashing.
+        const stickyHeights = [];
+        const elementsToStick = [];
+        for (let rowIndex = 0, stickyHeight = 0; rowIndex < rows.length; rowIndex++) {
+            stickyHeights[rowIndex] = stickyHeight;
             if (!states[rowIndex]) {
                 continue;
             }
             const row = rows[rowIndex];
-            if (this._isNativeHtmlTable) {
-                for (let j = 0; j < row.children.length; j++) {
-                    const cell = row.children[j];
-                    this._addStickyStyle(cell, position, stickyHeight);
-                }
+            elementsToStick[rowIndex] = this._isNativeHtmlTable ?
+                Array.from(row.children) : [row];
+            if (rowIndex !== rows.length - 1) {
+                stickyHeight += row.getBoundingClientRect().height;
             }
-            else {
-                // Flex does not respect the stick positioning on the cells, needs to be applied to the row.
-                // If this is applied on a native table, Safari causes the header to fly in wrong direction.
-                this._addStickyStyle(row, position, stickyHeight);
-            }
-            if (rowIndex === rows.length - 1) {
-                // prevent unnecessary reflow from getBoundingClientRect()
-                return;
-            }
-            stickyHeight += row.getBoundingClientRect().height;
         }
+        // Coalesce with other sticky row updates (top/bottom), sticky columns updates
+        // (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                if (!states[rowIndex]) {
+                    continue;
+                }
+                const height = stickyHeights[rowIndex];
+                for (const element of elementsToStick[rowIndex]) {
+                    this._addStickyStyle(element, position, height);
+                }
+            }
+        });
     }
     /**
      * When using the native table in Safari, sticky footer cells do not stick. The only way to stick
@@ -620,12 +740,15 @@ class StickyStyler {
             return;
         }
         const tfoot = tableElement.querySelector('tfoot');
-        if (stickyStates.some(state => !state)) {
-            this._removeStickyStyle(tfoot, ['bottom']);
-        }
-        else {
-            this._addStickyStyle(tfoot, 'bottom', 0);
-        }
+        // Coalesce with other sticky updates (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            if (stickyStates.some(state => !state)) {
+                this._removeStickyStyle(tfoot, ['bottom']);
+            }
+            else {
+                this._addStickyStyle(tfoot, 'bottom', 0);
+            }
+        });
     }
     /**
      * Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
@@ -636,12 +759,20 @@ class StickyStyler {
         for (const dir of stickyDirections) {
             element.style[dir] = '';
         }
-        element.style.zIndex = this._getCalculatedZIndex(element);
         // If the element no longer has any more sticky directions, remove sticky positioning and
         // the sticky CSS class.
-        const hasDirection = STICKY_DIRECTIONS.some(dir => !!element.style[dir]);
-        if (!hasDirection) {
-            element.style.position = '';
+        // Short-circuit checking element.style[dir] for stickyDirections as they
+        // were already removed above.
+        const hasDirection = STICKY_DIRECTIONS.some(dir => stickyDirections.indexOf(dir) === -1 && element.style[dir]);
+        if (hasDirection) {
+            element.style.zIndex = this._getCalculatedZIndex(element);
+        }
+        else {
+            // When not hasDirection, _getCalculatedZIndex will always return ''.
+            element.style.zIndex = '';
+            if (this._needsPositionStickyOnElement) {
+                element.style.position = '';
+            }
             element.classList.remove(this._stickCellCss);
         }
     }
@@ -653,8 +784,10 @@ class StickyStyler {
     _addStickyStyle(element, dir, dirValue) {
         element.classList.add(this._stickCellCss);
         element.style[dir] = `${dirValue}px`;
-        element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
         element.style.zIndex = this._getCalculatedZIndex(element);
+        if (this._needsPositionStickyOnElement) {
+            element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
+        }
     }
     /**
      * Calculate what the z-index should be for the element, depending on what directions (top,
@@ -901,9 +1034,10 @@ class RowViewRef extends EmbeddedViewRef {
  * connect function that will return an Observable stream that emits the data array to render.
  */
 class CdkTable {
-    constructor(_differs, _changeDetectorRef, _elementRef, role, _dir, _document, _platform) {
+    constructor(_differs, _changeDetectorRef, _coalescedStyleScheduler, _elementRef, role, _dir, _document, _platform) {
         this._differs = _differs;
         this._changeDetectorRef = _changeDetectorRef;
+        this._coalescedStyleScheduler = _coalescedStyleScheduler;
         this._elementRef = _elementRef;
         this._dir = _dir;
         this._platform = _platform;
@@ -968,6 +1102,12 @@ class CdkTable {
          * table subclasses.
          */
         this.stickyCssClass = 'cdk-table-sticky';
+        /**
+         * Whether to manually add positon: sticky to all sticky cell elements. Not needed if
+         * the position is set in a selector associated with the value of stickyCssClass. May be
+         * overridden by table subclasses
+         */
+        this.needsPositionStickyOnElement = true;
         /** Whether the no data row is currently showing anything. */
         this._isShowingNoDataRow = false;
         this._multiTemplateDataRows = false;
@@ -1045,6 +1185,7 @@ class CdkTable {
         // this setter will be invoked before the row outlet has been defined hence the null check.
         if (this._rowOutlet && this._rowOutlet.viewContainer.length) {
             this._forceRenderDataRows();
+            this.updateStickyColumnStyles();
         }
     }
     ngOnInit() {
@@ -1068,7 +1209,8 @@ class CdkTable {
             throw getTableMissingRowDefsError();
         }
         // Render updates if the list of columns have been changed for the header, row, or footer defs.
-        this._renderUpdatedColumns();
+        const columnsChanged = this._renderUpdatedColumns();
+        const stickyColumnStyleUpdateNeeded = columnsChanged || this._headerRowDefChanged || this._footerRowDefChanged;
         // If the header row definition has been changed, trigger a render to the header row.
         if (this._headerRowDefChanged) {
             this._forceRenderHeaderRows();
@@ -1084,6 +1226,11 @@ class CdkTable {
         if (this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) {
             this._observeRenderChanges();
         }
+        else if (stickyColumnStyleUpdateNeeded) {
+            // In the above case, _observeRenderChanges will result in updateStickyColumnStyles being
+            // called when it row data arrives. Otherwise, we need to call it proactively.
+            this.updateStickyColumnStyles();
+        }
         this._checkStickyStates();
     }
     ngOnDestroy() {
@@ -1112,6 +1259,7 @@ class CdkTable {
         this._renderRows = this._getAllRenderRows();
         const changes = this._dataDiffer.diff(this._renderRows);
         if (!changes) {
+            this._updateNoDataRow();
             return;
         }
         const viewContainer = this._rowOutlet.viewContainer;
@@ -1340,16 +1488,20 @@ class CdkTable {
     _renderUpdatedColumns() {
         const columnsDiffReducer = (acc, def) => acc || !!def.getColumnsDiff();
         // Force re-render data rows if the list of column definitions have changed.
-        if (this._rowDefs.reduce(columnsDiffReducer, false)) {
+        const dataColumnsChanged = this._rowDefs.reduce(columnsDiffReducer, false);
+        if (dataColumnsChanged) {
             this._forceRenderDataRows();
         }
-        // Force re-render header/footer rows if the list of column definitions have changed..
-        if (this._headerRowDefs.reduce(columnsDiffReducer, false)) {
+        // Force re-render header/footer rows if the list of column definitions have changed.
+        const headerColumnsChanged = this._headerRowDefs.reduce(columnsDiffReducer, false);
+        if (headerColumnsChanged) {
             this._forceRenderHeaderRows();
         }
-        if (this._footerRowDefs.reduce(columnsDiffReducer, false)) {
+        const footerColumnsChanged = this._footerRowDefs.reduce(columnsDiffReducer, false);
+        if (footerColumnsChanged) {
             this._forceRenderFooterRows();
         }
+        return dataColumnsChanged || headerColumnsChanged || footerColumnsChanged;
     }
     /**
      * Switch to the provided data source by resetting the data and unsubscribing from the current
@@ -1409,7 +1561,6 @@ class CdkTable {
         }
         this._headerRowDefs.forEach((def, i) => this._renderRow(this._headerRowOutlet, def, i));
         this.updateStickyHeaderRowStyles();
-        this.updateStickyColumnStyles();
     }
     /**
      * Clears any existing content in the footer row outlet and creates a new embedded view
@@ -1422,7 +1573,6 @@ class CdkTable {
         }
         this._footerRowDefs.forEach((def, i) => this._renderRow(this._footerRowOutlet, def, i));
         this.updateStickyFooterRowStyles();
-        this.updateStickyColumnStyles();
     }
     /** Adds the sticky column styles for the rows according to the columns' stick states. */
     _addStickyColumnStyles(rows, rowDef) {
@@ -1559,7 +1709,6 @@ class CdkTable {
         this._dataDiffer.diff([]);
         this._rowOutlet.viewContainer.clear();
         this.renderRows();
-        this.updateStickyColumnStyles();
     }
     /**
      * Checks if there has been a change in sticky states since last check and applies the correct
@@ -1590,7 +1739,7 @@ class CdkTable {
      */
     _setupStickyStyler() {
         const direction = this._dir ? this._dir.value : 'ltr';
-        this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction, this._platform.isBrowser);
+        this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction, this._coalescedStyleScheduler, this._platform.isBrowser, this.needsPositionStickyOnElement);
         (this._dir ? this._dir.change : of())
             .pipe(takeUntil(this._onDestroy))
             .subscribe(value => {
@@ -1628,12 +1777,16 @@ CdkTable.decorators = [
                 // declared elsewhere, they are checked when their declaration points are checked.
                 // tslint:disable-next-line:validate-decorators
                 changeDetection: ChangeDetectionStrategy.Default,
-                providers: [{ provide: CDK_TABLE, useExisting: CdkTable }]
+                providers: [
+                    { provide: CDK_TABLE, useExisting: CdkTable },
+                    _CoalescedStyleScheduler,
+                ]
             },] }
 ];
 CdkTable.ctorParameters = () => [
     { type: IterableDiffers },
     { type: ChangeDetectorRef },
+    { type: _CoalescedStyleScheduler },
     { type: ElementRef },
     { type: String, decorators: [{ type: Attribute, args: ['role',] }] },
     { type: Directionality, decorators: [{ type: Optional }] },
@@ -1832,5 +1985,5 @@ CdkTableModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCdkCell, BaseRowDef, CDK_ROW_TEMPLATE, CDK_TABLE, CDK_TABLE_TEMPLATE, CdkCell, CdkCellDef, CdkCellOutlet, CdkColumnDef, CdkFooterCell, CdkFooterCellDef, CdkFooterRow, CdkFooterRowDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable, CdkTableModule, CdkTextColumn, DataRowOutlet, FooterRowOutlet, HeaderRowOutlet, NoDataRowOutlet, STICKY_DIRECTIONS, StickyStyler, TEXT_COLUMN_OPTIONS, mixinHasStickyInput };
+export { BaseCdkCell, BaseRowDef, CDK_ROW_TEMPLATE, CDK_TABLE, CDK_TABLE_TEMPLATE, CdkCell, CdkCellDef, CdkCellOutlet, CdkColumnDef, CdkFooterCell, CdkFooterCellDef, CdkFooterRow, CdkFooterRowDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable, CdkTableModule, CdkTextColumn, DataRowOutlet, FooterRowOutlet, HeaderRowOutlet, NoDataRowOutlet, STICKY_DIRECTIONS, StickyStyler, TEXT_COLUMN_OPTIONS, _CoalescedStyleScheduler, _Schedule, mixinHasStickyInput };
 //# sourceMappingURL=table.js.map