From 36369257b54a78aa6a576677285bb2ac8d4ca8fd Mon Sep 17 00:00:00 2001
From: Justin DuJardin <justin@dujardinconsulting.com>
Date: Sat, 19 Dec 2015 09:58:41 -0800
Subject: [PATCH] feat(tabs): add ink ripple to tab buttons

 - add Ink.canApply function to determine if an element has no-ink specified on it.
 - update button and tabs to use Ink.canApply.
 - add click handler to tab buttons for applying ink ripples.
---
 ng2-material/components/button/button.ts |  7 ++--
 ng2-material/components/tabs/tabs.html   |  2 +-
 ng2-material/components/tabs/tabs.ts     | 44 ++++++++++++++++++------
 ng2-material/core/util/ink.ts            |  8 +++++
 4 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/ng2-material/components/button/button.ts b/ng2-material/components/button/button.ts
index 88007172..04fd6d38 100644
--- a/ng2-material/components/button/button.ts
+++ b/ng2-material/components/button/button.ts
@@ -30,10 +30,7 @@ export class MdButton {
   /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
   isKeyboardFocused: boolean = false;
 
-  private _noInk: boolean = false;
-
-  constructor(private _element: ElementRef, @Attribute('md-no-ink') mdNoInk: string) {
-    this._noInk = isPresent(mdNoInk);
+  constructor(private _element: ElementRef) {
   }
 
   onMousedown(event) {
@@ -46,7 +43,7 @@ export class MdButton {
       this.isMouseDown = false
     }, 100);
 
-    if (!this._noInk) {
+    if (Ink.canApply(this._element.nativeElement)) {
       Ink.rippleEvent(this._element.nativeElement, event);
     }
   }
diff --git a/ng2-material/components/tabs/tabs.html b/ng2-material/components/tabs/tabs.html
index 028c17ac..4a494811 100644
--- a/ng2-material/components/tabs/tabs.html
+++ b/ng2-material/components/tabs/tabs.html
@@ -4,7 +4,7 @@
     <md-pagination-wrapper>
       <md-tab-item tabindex="-1"
                    class="md-tab"
-                   (click)="select(pane)"
+                   (click)="clickTabButton(pane,$event)"
                    [class.md-active]="selected == pane"
                    [style.max-width]="maxTabWidth + 'px'"
                    *ngFor="#pane of panes"
diff --git a/ng2-material/components/tabs/tabs.ts b/ng2-material/components/tabs/tabs.ts
index 1fafb347..3424bb63 100644
--- a/ng2-material/components/tabs/tabs.ts
+++ b/ng2-material/components/tabs/tabs.ts
@@ -2,15 +2,22 @@ import {Component, Directive, Input, QueryList,
   ViewContainerRef, TemplateRef, ContentChildren} from 'angular2/core';
 import {AfterContentInit} from "angular2/core";
 import {Attribute} from "angular2/core";
+import {isPresent} from "angular2/src/facade/lang";
+import {OnChanges} from "angular2/core";
+import {Ink} from "../../core/util/ink";
+import {ElementRef} from "angular2/core";
 @Directive({
   selector: '[md-tab]'
 })
 export class MdTab {
   @Input() label: string;
+  @Input() disabled: boolean = false;
   private _active: boolean = false;
 
   constructor(public viewContainer: ViewContainerRef,
+              @Attribute('disabled') disabled: string,
               public templateRef: TemplateRef) {
+    this.disabled = isPresent(disabled);
   }
 
   @Input() set active(active: boolean) {
@@ -31,10 +38,14 @@ export class MdTab {
   selector: 'md-tabs',
   templateUrl: 'ng2-material/components/tabs/tabs.html'
 })
-export class MdTabs implements AfterContentInit {
+export class MdTabs implements AfterContentInit, OnChanges {
   @ContentChildren(MdTab) panes: QueryList<MdTab>;
 
-  constructor(@Attribute('mdNoScroll') private _mdNoScroll: string) {
+  @Input() mdNoScroll: boolean = false;
+
+  constructor(private _element: ElementRef,
+              @Attribute('mdNoScroll') noScroll: string) {
+    this.mdNoScroll = isPresent(noScroll);
   }
 
   private _selectedIndex: number = -1;
@@ -50,14 +61,6 @@ export class MdTabs implements AfterContentInit {
     }
   }
 
-  ngAfterContentInit(): any {
-    setTimeout(()=> {
-      if (this._selectedIndex === -1) {
-        this.select(this.panes.toArray()[0]);
-      }
-    }, 0);
-  }
-
   get selected(): MdTab {
     let result = null;
     this.panes.toArray().forEach((p: MdTab) => {
@@ -68,8 +71,27 @@ export class MdTabs implements AfterContentInit {
     return result;
   }
 
-
   select(pane: MdTab) {
     this.panes.toArray().forEach((p: MdTab) => p.active = p == pane);
   }
+
+  clickTabButton(pane: MdTab, event?) {
+    if (event && Ink.canApply(event.target)) {
+      Ink.rippleEvent(event.target, event);
+    }
+    this.select(pane);
+  }
+
+  ngAfterContentInit(): any {
+    setTimeout(()=> {
+      if (this._selectedIndex === -1) {
+        this.select(this.panes.toArray()[0]);
+      }
+    }, 0);
+  }
+
+  ngOnChanges(changes: {}): any {
+
+  }
+
 }
diff --git a/ng2-material/core/util/ink.ts b/ng2-material/core/util/ink.ts
index be7f7bb4..7841da2f 100644
--- a/ng2-material/core/util/ink.ts
+++ b/ng2-material/core/util/ink.ts
@@ -7,6 +7,14 @@ import {Animate} from "./animate";
  */
 export class Ink {
 
+  /**
+   * Determine if ink can be applied to a given element.
+   * @param element The element to check
+   */
+  static canApply(element: HTMLElement): boolean {
+    return !DOM.hasAttribute(element, 'md-no-ink');
+  }
+
   /**
    * Ink ripples are equal in height/width, so get the scalar size
    * of the container.