move sticky to mixin

Author: andrewseguin

src/cdk/table/can-stick.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
 /** @docs-private */
 export type Constructor<T> = new(...args: any[]) => T;
 
@@ -16,6 +18,9 @@ export type Constructor<T> = new(...args: any[]) => T;
  * @docs-private
  */
 export interface CanStick {
+  /** Whether sticky positioning should be applied. */
+  sticky: boolean;
+
   /** Whether the sticky input has changed since it was last checked. */
   _hasStickyChanged: boolean;
 
@@ -34,6 +39,15 @@ export interface CanStick {
 export function mixinHasStickyInput<T extends Constructor<{}>>(base: T):
     Constructor<CanStick> & T {
   return class extends base {
+    /** Whether sticky positioning should be applied. */
+    get sticky(): boolean { return this._sticky; }
+    set sticky(v: boolean) {
+      const prevValue = this._sticky;
+      this._sticky = coerceBooleanProperty(v);
+      this._hasStickyChanged = prevValue !== this._sticky;
+    }
+    _sticky: boolean = false;
+
     /** Whether the sticky input has changed since it was last checked. */
     _hasStickyChanged: boolean = false;
 

src/cdk/table/cell.ts

@@ -51,7 +51,10 @@ export const _CdkColumnDefBase = mixinHasStickyInput(CdkColumnDefBase);
  * Column definition for the CDK table.
  * Defines a set of cells available for a table column.
  */
-@Directive({selector: '[cdkColumnDef]'})
+@Directive({
+  selector: '[cdkColumnDef]',
+  inputs: ['sticky']
+})
 export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
   /** Unique name for this column. */
   @Input('cdkColumnDef')
@@ -66,17 +69,11 @@ export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
   }
   _name: string;
 
-  /** Whether this column should be sticky positioned on the start of the row */
-  @Input('sticky')
-  get sticky(): boolean { return this._sticky; }
-  set sticky(v: boolean) {
-    const prevValue = this._sticky;
-    this._sticky = coerceBooleanProperty(v);
-    this._hasStickyChanged = prevValue !== this._sticky;
-  }
-  _sticky: boolean = false;
-
-  /** Whether this column should be sticky positioned on the end of the row */
+  /**
+   * Whether this column should be sticky positioned on the end of the row. Should make sure
+   * that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
+   * has been changed.
+   */
   @Input('stickyEnd')
   get stickyEnd(): boolean { return this._stickyEnd; }
   set stickyEnd(v: boolean) {

src/cdk/table/row.ts

@@ -20,7 +20,6 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {CdkCellDef, CdkColumnDef} from './cell';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {CanStick, mixinHasStickyInput} from './can-stick';
 
 /**
@@ -87,14 +86,6 @@ export const _CdkHeaderRowDefBase = mixinHasStickyInput(CdkHeaderRowDefBase);
   inputs: ['columns: cdkHeaderRowDef', 'sticky: cdkHeaderRowDefSticky'],
 })
 export class CdkHeaderRowDef extends _CdkHeaderRowDefBase implements CanStick {
-  get sticky(): boolean { return this._sticky; }
-  set sticky(v: boolean) {
-    const prevValue = this._sticky;
-    this._sticky = coerceBooleanProperty(v);
-    this._hasStickyChanged = prevValue !== this._sticky;
-  }
-  _sticky: boolean;
-
   constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
     super(template, _differs);
   }
@@ -114,14 +105,6 @@ export const _CdkFooterRowDefBase = mixinHasStickyInput(CdkFooterRowDefBase);
   inputs: ['columns: cdkFooterRowDef', 'sticky: cdkFooterRowDefSticky'],
 })
 export class CdkFooterRowDef extends _CdkFooterRowDefBase implements CanStick {
-  get sticky(): boolean { return this._sticky; }
-  set sticky(v: boolean) {
-    const prevValue = this._sticky;
-    this._sticky = coerceBooleanProperty(v);
-    this._hasStickyChanged = prevValue !== this._sticky;
-  }
-  _sticky: boolean;
-
   constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
     super(template, _differs);
   }

src/cdk/table/sticky-styler.ts

@@ -28,13 +28,13 @@ export class StickyStyler {
   /**
    * @param isNativeHtmlTable Whether the sticky logic should be based on a table
    *     that uses the native `<table>` element.
-   * @param stickCellCSS The CSS class that will be applied to every row/cell that has
+   * @param stickCellCss The CSS class that will be applied to every row/cell that has
    *     sticky positioning applied.
    * @param direction The directionality context of the table (ltr/rtl); affects column positioning
    *     by reversing left/right positions.
    */
   constructor(private isNativeHtmlTable: boolean,
-              private stickCellCSS: string,
+              private stickCellCss: string,
               public direction: Direction) { }
 
   /**
@@ -163,7 +163,7 @@ export class StickyStyler {
     const hasDirection = STICKY_DIRECTIONS.some(dir => !!element.style[dir]);
     if (!hasDirection) {
       element.style.position = '';
-      element.classList.remove(this.stickCellCSS);
+      element.classList.remove(this.stickCellCss);
     }
   }
 
@@ -173,7 +173,7 @@ export class StickyStyler {
    * direction and value.
    */
   _addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number) {
-    element.classList.add(this.stickCellCSS);
+    element.classList.add(this.stickCellCss);
     element.style[dir] = `${dirValue}px`;
     element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
     element.style.zIndex = this._getCalculatedZIndex(element);