feat(tabs): Add disabled tab + improvements (#369)

- [x] Add `disabled` tab
- [x] Fix `[active]` property changes not propagating #349
- [x] Fix `mdc-tab-bar-scroller__indicator` misplaced issue #281
- [x] Remove `mdc-tab-bar-scroll-button` directive

#### mdc-tab
* Add `disabled: boolean` property to `mdc-tab`
* Refactor `active` property
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `getComputedWidth(): number`; return the computed width for tab.
* Add `getComputedLeft(): number`; return the computed left offset for tab.
* Add `isActive()` return true if tab is active.
* Add `setActive(boolean)`; set tab active property to value passed.
* Add `getPreventDefaultOnClick(): boolean`; return true if the tab prevents the default click action.
* Add `setPreventDefaultOnClick(boolean)`; sets tabs `preventDefaultOnClick` property to the value passed.
* Add `measureSelf()`; sets computedWidth and computedLeft for a tab.

#### mdc-tab-bar
* Add `getComputedWidth(): number`
* Add `layout(): void`
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `getActiveTabIndex(): number`
* Add `switchToTabAtIndex(index: number, shouldNotify: boolean = true)`
* Add `MdcTabBarIndicator` directive
* Add `setPreventDefaultOnClickForTabAtIndex(index: number, preventDefaultOnClick: boolean)` 
* Add `isDefaultPreventedOnClickForTabAtIndex(index: number): boolean`

#### mdc-tab-bar-scroller
* Add `layout()`
* Add `changeDetection: ChangeDetectionStrategy.OnPush`
* Add `preserveWhitespaces: false`
* Add `scrollBack(event?: Event)`
* Add `scrollForward(event?: Event)`
* Remove `mdc-tab-bar-scroll-button` directive

BREAKING CHANGE: Removed `mdc-tab-bar-scroll-button` directive. Use `mdc-icon` instead. Please update your code accordingly.
Example:
```html
<mdc-tab-bar-scroll-back>
  <mdc-icon>navigate_before</mdc-icon>
</mdc-tab-bar-scroll-back>
```

Closes #349 Closes #147 Closes #281

package.json

@@ -9,7 +9,7 @@
   },
   "version": "0.0.0",
   "scripts": {
-    "build:demo": "npm run ngc:demo && npm run rollup:demo",
+    "build:demo": "rimraf publish-demo && npm run ngc:demo && npm run rollup:demo",
     "ngc:demo": "ngc -p src/demo-app/tsconfig-build-aot.json",
     "rollup:demo": "rollup -c config/rollup-demo.config.js && npm run uglify:demo",
     "uglify:demo": "uglifyjs --compress --mangle --output publish-demo/dist/build.min.js -- publish-demo/dist/build.js",
@@ -62,7 +62,7 @@
     "@angular/compiler-cli": "^5.0.1",
     "@angular/flex-layout": "^2.0.0-beta.10",
     "@types/jasmine": "^2.6.3",
-    "@types/node": "^8.0.50",
+    "@types/node": "^8.0.51",
     "angular2-template-loader": "^0.6.2",
     "autoprefixer": "^7.1.6",
     "babel-cli": "^6.24.1",
@@ -86,8 +86,8 @@
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.1.0",
     "karma-remap-istanbul": "^0.6.0",
-    "karma-webpack": "^2.0.5",
-    "node-sass": "^4.6.0",
+    "karma-webpack": "^2.0.6",
+    "node-sass": "^4.6.1",
     "postcss-loader": "^2.0.8",
     "rimraf": "^2.6.2",
     "rollup": "^0.50.0",
@@ -105,7 +105,7 @@
     "tslint": "^5.8.0",
     "typescript": "2.4.2",
     "typings": "^2.1.1",
-    "uglify-es": "^3.1.8",
+    "uglify-es": "^3.1.9",
     "validate-commit-msg": "^2.14.0",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.4"

src/demo-app/components/tab-demo/tab-demo.ts

@@ -1,23 +1,63 @@
-import { Component } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
+import { Component, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+
+export class Child {
+  label: string;
+  route: string;
+}
+const DIRECTORY: Child[] = [
+  { label: 'Tab One', route: 'first-tab' },
+  { label: 'Tab Two', route: 'second-tab' },
+  { label: 'Tab Three', route: 'third-tab' },
+];
 
 @Component({
   selector: 'tab-demo',
   templateUrl: './tab-demo.html'
 })
 export class TabDemo {
+  isDisabled: boolean = true;
+  isDarkTheme: boolean = false;
+  isPrimaryColor: boolean = true;
+  isSecondaryColor: boolean = false;
+  eventTabIndex: number = 0;
+
+  directory: Child[] = DIRECTORY;
+
+  @ViewChild('myTabBar') myTabs: any;
+  @ViewChild('myScrollFrame') myScrollFrame: any;
+
   constructor(public router: Router) { }
 
-  tabLinks = [
-    { label: 'Item One', link: 'first-tab', active: true },
-    { label: 'Item Two', link: 'second-tab' },
-    { label: 'Item Three', link: 'third-tab' },
-  ];
+  switchToTab() {
+    this.myTabs.setTabActiveAtIndex(1);
+  }
+
+  scrollForward() {
+    this.myScrollFrame.scrollForward();
+  }
+
+  scrollBack() {
+    this.myScrollFrame.scrollBack();
+  }
+
+  toggleDisabled() {
+    this.isDisabled = !this.isDisabled;
+  }
+
+  handleTabChange(event: { index: number, tab: any }) {
+    this.eventTabIndex = event.index;
+    console.log(event);
+  }
 }
 
 @Component({
   selector: 'item-one-routed-content',
-  template: '<p class="panel" role="tabpanel">Item One</p>',
+  template: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+      orci enim rutrum enim, vel tempor sapien arcu a tellus.</p>`,
 })
 export class ItemOneContent { }
 

src/demo-app/home/home.html

@@ -13,7 +13,7 @@ <h2 mdc-typography-display2 mdc-typography-adjust-margin fxShow fxHide.xs="true"
     </mdc-card>
   </div>
   <div mdc-typography-caption fxFlexOffset="40px" fxLayout="column" fxLayoutAlign="center center">
-    <span>angular-mdc-web v0.5.7</span>
+    <span>angular-mdc-web v0.6.0</span>
     <span>material-components-web v0.24.0</span>
   </div>
 </div>

src/demo-app/sass/main.scss

@@ -128,15 +128,14 @@ body {
     margin: 1em, 0;
     padding: 8px 16px;
     border: 1px solid rgba(0, 0, 0, .03);
-    font-size: 0.9em;
+    font-size: 0.8em;
     font-family: monospace, monospace;
   }
-}
 
-pre {
-  padding: 6px;
-  font-family: monospace, monospace;
-  font-size: 0.9em;
+  pre {
+    font-size: 0.9em;
+    font-family: monospace, monospace;
+  }
 }
 
 .panels {
@@ -158,3 +157,13 @@ pre {
   position: relative;
   width: 800px;
 }
+
+.demo-tabs-host {
+  border: 1px solid;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  width: 800px;
+}

src/lib/tabs/index.ts

@@ -7,25 +7,24 @@ import {
   MdcTabIconText,
 } from './tab/tab';
 
-import { MdcTabBar } from './tab-bar/tab-bar';
+import { MdcTabBar, MdcTabBarIndicator } from './tab-bar/tab-bar';
 
 import {
   MdcTabBarScroller,
   MdcTabBarScrollBack,
   MdcTabBarScrollForward,
   MdcTabBarScrollFrame,
-  MdcTabBarScrollIndicatorInner,
 } from './tab-bar-scroller/tab-bar-scroller';
 
 const TAB_COMPONENTS = [
   MdcTab,
   MdcTabIconText,
   MdcTabBar,
+  MdcTabBarIndicator,
   MdcTabBarScroller,
   MdcTabBarScrollBack,
   MdcTabBarScrollForward,
   MdcTabBarScrollFrame,
-  MdcTabBarScrollIndicatorInner,
 ];
 
 @NgModule({