@angular/cdk 10.1.2 → 10.1.3

package/fesm2015/table.js

@@ -5,8 +5,8 @@ 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, Injectable, NgZone, IterableDiffers, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, EmbeddedViewRef, isDevMode, ChangeDetectorRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, isObservable, of } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+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. */
@@ -293,17 +308,28 @@ class _CoalescedStyleScheduler {
             return;
         }
         this._currentSchedule = new _Schedule();
-        this._ngZone.onStable.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
-            const schedule = this._currentSchedule;
-            this._currentSchedule = null;
-            for (const task of schedule.tasks) {
-                task();
-            }
-            for (const task of schedule.endTasks) {
-                task();
+        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 }
@@ -578,13 +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, _coalescedStyleScheduler, _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`
@@ -729,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);
         }
     }
@@ -746,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,
@@ -1062,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;
@@ -1693,7 +1739,7 @@ class CdkTable {
      */
     _setupStickyStyler() {
         const direction = this._dir ? this._dir.value : 'ltr';
-        this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction, this._coalescedStyleScheduler, 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 => {