build: add most components to kitchen-sink (angular#4836)

* build: add most components to kitchen-sink

* debug

Terrible code just exporting for the sake of asking an question to
Andrew

Author: jelbourn

src/demo-app/data-table/data-table-demo.html

@@ -38,7 +38,7 @@
       <cdk-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </cdk-cell>
     </ng-container>
 
-    <cdk-header-row *cdkHeaderRowDef="propertiesToDisplay"></cdk-header-row>
+    <cdk-header-row *cdkHeaderRowDef="propertiesToDisplay" cdkStickyRow></cdk-header-row>
     <cdk-row *cdkRowDef="let row; columns: propertiesToDisplay"></cdk-row>
   </cdk-table>
 </div>

src/demo-app/data-table/data-table-demo.scss

@@ -8,7 +8,7 @@
   // Table fills in the remaining area with a scroll
   .cdk-table {
     flex: 1 1 auto;
-    overflow: auto;
+    /*overflow: auto;*/
   }
 }
 

src/lib/chips/chip-list.spec.ts

@@ -47,14 +47,14 @@ describe('MdChipList', () => {
       manager = chipListInstance._keyManager;
     });
 
-    it('focuses the first chip on focus', () => {
+    it('should focus the first chip on focus', () => {
       chipListInstance.focus();
       fixture.detectChanges();
 
       expect(manager.activeItemIndex).toBe(0);
     });
 
-    it('watches for chip focus', () => {
+    it('should watch for chip focus', () => {
       let array = chips.toArray();
       let lastIndex = array.length - 1;
       let lastItem = array[lastIndex];
@@ -81,13 +81,13 @@ describe('MdChipList', () => {
         expect(manager.activeItemIndex).toEqual(2);
       });
 
-      it('focuses the previous item', () => {
+      it('should focus the previous item', () => {
         let array = chips.toArray();
         let lastIndex = array.length - 1;
         let lastItem = array[lastIndex];
 
-        // Focus the last item
-        lastItem.focus();
+        // Focus the last item by fake updating the _hasFocus state for unit tests.
+        lastItem._hasFocus = true;
 
         // Destroy the last item
         testComponent.remove = lastIndex;

src/lib/chips/chip-list.ts

@@ -195,7 +195,7 @@ export class MdChipList implements AfterContentInit, OnDestroy {
     chip.destroy.subscribe(() => {
       let chipIndex: number = this.chips.toArray().indexOf(chip);
 
-      if (this._isValidIndex(chipIndex)) {
+      if (this._isValidIndex(chipIndex) && chip._hasFocus) {
         // Check whether the chip is the last item
         if (chipIndex < this.chips.length - 1) {
           this._keyManager.setActiveItem(chipIndex);

src/lib/chips/chip.spec.ts

@@ -29,7 +29,7 @@ describe('Chips', () => {
 
       chipDebugElement = fixture.debugElement.query(By.directive(MdChip));
       chipNativeElement = chipDebugElement.nativeElement;
-      chipInstance = chipDebugElement.componentInstance;
+      chipInstance = chipDebugElement.injector.get(MdChip);
 
       document.body.appendChild(chipNativeElement);
     });
@@ -56,7 +56,7 @@ describe('Chips', () => {
         chipDebugElement = fixture.debugElement.query(By.directive(MdChip));
         chipListNativeElement = fixture.debugElement.query(By.directive(MdChipList)).nativeElement;
         chipNativeElement = chipDebugElement.nativeElement;
-        chipInstance = chipDebugElement.componentInstance;
+        chipInstance = chipDebugElement.injector.get(MdChip);
         testComponent = fixture.debugElement.componentInstance;
 
         document.body.appendChild(chipNativeElement);

src/lib/chips/chip.ts

@@ -1,10 +1,9 @@
 import {
-  Component,
+  Directive,
   ElementRef,
   EventEmitter,
   Input,
   OnDestroy,
-  OnInit,
   Output,
   Renderer2,
 } from '@angular/core';
@@ -24,34 +23,52 @@ export class MdChipBase {
 export const _MdChipMixinBase = mixinColor(MdChipBase, 'primary');
 
 
+/**
+ * Dummy directive to add CSS class to basic chips.
+ * @docs-private
+ */
+@Directive({
+  selector: `md-basic-chip, [md-basic-chip], mat-basic-chip, [mat-basic-chip]`,
+  host: {'class': 'mat-basic-chip'}
+})
+export class MdBasicChip { }
+
 /**
  * Material design styled Chip component. Used inside the MdChipList component.
  */
-@Component({
+@Directive({
   selector: `md-basic-chip, [md-basic-chip], md-chip, [md-chip],
              mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
-  template: `<ng-content></ng-content>`,
   inputs: ['color'],
   host: {
-    '[class.mat-chip]': 'true',
+    'class': 'mat-chip',
     'tabindex': '-1',
     'role': 'option',
-
     '[class.mat-chip-selected]': 'selected',
-    '[attr.disabled]': 'disabled',
-    '[attr.aria-disabled]': '_isAriaDisabled',
-
-    '(click)': '_handleClick($event)'
+    '[attr.disabled]': 'disabled || null',
+    '[attr.aria-disabled]': '_isAriaDisabled()',
+    '(click)': '_handleClick($event)',
+    '(focus)': '_hasFocus = true',
+    '(blur)': '_hasFocus = false',
   }
 })
-export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDestroy, CanColor {
-
-  /** Whether or not the chip is disabled. Disabled chips cannot be focused. */
+export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, CanColor {
+  /** Whether or not the chip is disabled. */
+  @Input() get disabled(): boolean { return this._disabled; }
+  set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); }
   protected _disabled: boolean = null;
 
-  /** Whether or not the chip is selected. */
+  /** Whether the chip is selected. */
+  @Input() get selected(): boolean { return this._selected; }
+  set selected(value: boolean) {
+    this._selected = coerceBooleanProperty(value);
+    (this.selected ? this.select : this.deselect).emit({chip: this});
+  }
   protected _selected: boolean = false;
 
+  /** Whether the chip has focus. */
+  _hasFocus: boolean = false;
+
   /** Emitted when the chip is focused. */
   onFocus = new EventEmitter<MdChipEvent>();
 
@@ -68,44 +85,10 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDes
     super(renderer, elementRef);
   }
 
-  ngOnInit(): void {
-    this._addDefaultCSSClass();
-  }
-
   ngOnDestroy(): void {
     this.destroy.emit({chip: this});
   }
 
-  /** Whether or not the chip is disabled. */
-  @Input() get disabled(): boolean {
-    return this._disabled;
-  }
-
-  /** Sets the disabled state of the chip. */
-  set disabled(value: boolean) {
-    this._disabled = coerceBooleanProperty(value) ? true : null;
-  }
-
-  /** A String representation of the current disabled state. */
-  get _isAriaDisabled(): string {
-    return String(coerceBooleanProperty(this.disabled));
-  }
-
-  /** Whether or not this chip is selected. */
-  @Input() get selected(): boolean {
-    return this._selected;
-  }
-
-  set selected(value: boolean) {
-    this._selected = coerceBooleanProperty(value);
-
-    if (this._selected) {
-      this.select.emit({chip: this});
-    } else {
-      this.deselect.emit({chip: this});
-    }
-  }
-
   /**
    * Toggles the current selected state of this chip.
    * @return Whether the chip is selected.
@@ -121,6 +104,11 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDes
     this.onFocus.emit({chip: this});
   }
 
+  /** The aria-disabled state for the chip */
+  _isAriaDisabled(): string {
+    return String(this.disabled);
+  }
+
   /** Ensures events fire properly upon click. */
   _handleClick(event: Event) {
     // Check disabled
@@ -131,18 +119,4 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDes
       this.focus();
     }
   }
-
-  /** Initializes the appropriate CSS classes based on the chip type (basic or standard). */
-  private _addDefaultCSSClass() {
-    let el: HTMLElement = this._elementRef.nativeElement;
-
-    // Always add the `mat-chip` class
-    this._renderer.addClass(el, 'mat-chip');
-
-    // If we are a basic chip, also add the `mat-basic-chip` class for :not() targeting
-    if (el.nodeName.toLowerCase() == 'mat-basic-chip' || el.hasAttribute('mat-basic-chip') ||
-        el.nodeName.toLowerCase() == 'md-basic-chip' || el.hasAttribute('md-basic-chip')) {
-      this._renderer.addClass(el, 'mat-basic-chip');
-    }
-  }
 }

src/lib/chips/index.ts

@@ -1,12 +1,12 @@
 import {NgModule} from '@angular/core';
 import {MdChipList} from './chip-list';
-import {MdChip} from './chip';
+import {MdChip, MdBasicChip} from './chip';
 
 
 @NgModule({
   imports: [],
-  exports: [MdChipList, MdChip],
-  declarations: [MdChipList, MdChip]
+  exports: [MdChipList, MdChip, MdBasicChip],
+  declarations: [MdChipList, MdChip, MdBasicChip]
 })
 export class MdChipsModule {}
 

src/lib/core/_core.scss

@@ -9,6 +9,7 @@
 @import 'option/optgroup-theme';
 @import 'selection/pseudo-checkbox/pseudo-checkbox-theme';
 @import 'typography/all-typography';
+@import 'data-table/data-table';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mat-core() {
@@ -27,6 +28,7 @@
   @include mat-optgroup();
   @include cdk-a11y();
   @include cdk-overlay();
+  @include cdk-data-table();
 }
 
 // Mixin that renders all of the core styles that depend on the theme.

src/lib/core/a11y/focus-trap.ts

@@ -8,10 +8,12 @@ import {
   Injectable,
 } from '@angular/core';
 import {InteractivityChecker} from './interactivity-checker';
+import {Platform} from '../platform/platform';
 import {coerceBooleanProperty} from '../coercion/boolean-property';
 
 import 'rxjs/add/operator/first';
 
+
 /**
  * Class that allows for trapping focus within a DOM element.
  *
@@ -37,6 +39,7 @@ export class FocusTrap {
 
   constructor(
     private _element: HTMLElement,
+    private _platform: Platform,
     private _checker: InteractivityChecker,
     private _ngZone: NgZone,
     deferAnchors = false) {
@@ -64,6 +67,11 @@ export class FocusTrap {
    * in the constructor, but can be deferred for cases like directives with `*ngIf`.
    */
   attachAnchors(): void {
+    // If we're not on the browser, there can be no focus to trap.
+    if (!this._platform.isBrowser) {
+      return;
+    }
+
     if (!this._startAnchor) {
       this._startAnchor = this._createAnchor();
     }
@@ -223,10 +231,13 @@ export class FocusTrap {
 /** Factory that allows easy instantiation of focus traps. */
 @Injectable()
 export class FocusTrapFactory {
-  constructor(private _checker: InteractivityChecker, private _ngZone: NgZone) { }
+  constructor(
+      private _checker: InteractivityChecker,
+      private _platform: Platform,
+      private _ngZone: NgZone) { }
 
   create(element: HTMLElement, deferAnchors = false): FocusTrap {
-    return new FocusTrap(element, this._checker, this._ngZone, deferAnchors);
+    return new FocusTrap(element, this._platform, this._checker, this._ngZone, deferAnchors);
   }
 }
 

src/lib/core/a11y/interactivity-checker.ts

@@ -48,6 +48,10 @@ export class InteractivityChecker {
    * @returns Whether the element is tabbable.
    */
   isTabbable(element: HTMLElement): boolean {
+    // Nothing is tabbable on the the server 😎
+    if (!this._platform.isBrowser) {
+      return false;
+    }
 
     let frameElement = getWindow(element).frameElement as HTMLElement;
 

src/lib/core/data-table/_data-table.scss

@@ -0,0 +1,32 @@
+/*CSS FOR THE DATA TABLE*/
+@mixin cdk-data-table() {
+    .cdk-table {
+        position: relative;
+    }
+
+    .cdk-table-body {
+        overflow-y: auto;
+        pointer-events: auto;
+        // MOVE TO JS
+        padding-top: 48px;
+        height: 390px;
+    }
+
+    .cdk-header-row {
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .cdk-sticky-row {
+        background-color: white;
+        z-index: 1;
+        left: 0;
+        // ORDER MATTERS WITH THESE OVERFLOW RULES
+        overflow: scroll;
+        overflow-x: hidden;
+        overflow-y: hidden;
+        position: absolute;
+        top: 0;
+        box-sizing: border-box;
+    }
+}