Merge branch 'md-to-cdk' of https://github.com/crisbeto/material2 into md-to-cdk

# Conflicts:
#	src/lib/core/core.ts

Author: crisbeto

package.json

@@ -54,6 +54,8 @@
     "axe-core": "^2.0.7",
     "axe-webdriverjs": "^0.4.0",
     "conventional-changelog": "^1.1.0",
+    "dgeni": "^0.4.2",
+    "dgeni-packages": "^0.16.2",
     "express": "^4.14.0",
     "firebase-tools": "^2.2.1",
     "fs-extra": "^0.26.5",

src/demo-app/menu/menu-demo.html

@@ -3,7 +3,7 @@
     <p>You clicked on: {{ selected }}</p>
 
     <md-toolbar>
-      <button md-icon-button [md-menu-trigger-for]="menu" aria-label="Open basic menu">
+      <button md-icon-button [mdMenuTriggerFor]="menu" aria-label="Open basic menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>
@@ -17,7 +17,7 @@
   <div class="menu-section">
     <p> Clicking these will navigate:</p>
     <md-toolbar>
-      <button md-icon-button [md-menu-trigger-for]="anchorMenu" aria-label="Open anchor menu">
+      <button md-icon-button [mdMenuTriggerFor]="anchorMenu" aria-label="Open anchor menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>
@@ -33,7 +33,7 @@
       Position x: before
     </p>
     <md-toolbar class="end-icon">
-      <button md-icon-button [md-menu-trigger-for]="posXMenu" aria-label="Open x-positioned menu">
+      <button md-icon-button [mdMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>
@@ -50,7 +50,7 @@
       Position y: above
     </p>
     <md-toolbar>
-      <button md-icon-button [md-menu-trigger-for]="posYMenu" aria-label="Open y-positioned menu">
+      <button md-icon-button [mdMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
         <md-icon>more_vert</md-icon>
       </button>
     </md-toolbar>

src/demo-app/ripple/ripple-demo.html

@@ -48,13 +48,13 @@
         [class.demo-ripple-disabled]="disabled"
         [class.demo-ripple-rounded]="rounded"
         md-ripple
-        [md-ripple-centered]="centered"
-        [md-ripple-disabled]="disabled"
-        [md-ripple-unbounded]="unbounded"
-        [md-ripple-max-radius]="maxRadius"
-        [md-ripple-color]="rippleColor"
-        [md-ripple-background-color]="rippleBackgroundColor"
-        [md-ripple-speed-factor]="rippleSpeed">
+        [mdRippleCentered]="centered"
+        [mdRippleDisabled]="disabled"
+        [mdRippleUnbounded]="unbounded"
+        [mdRippleMaxRadius]="maxRadius"
+        [mdRippleColor]="rippleColor"
+        [mdRippleBackgroundColor]="rippleBackgroundColor"
+        [mdRippleSpeedFactor]="rippleSpeed">
       Click me
     </div>
   </section>

src/demo-app/slider/slider-demo.html

@@ -4,7 +4,7 @@ <h1>Default Slider</h1>
 
 <h1>Slider with Min and Max</h1>
 <input [(ngModel)]="min">
-<md-slider [min]="min" [max]="max" tick-interval="5" #slider2></md-slider>
+<md-slider [min]="min" [max]="max" tickInterval="5" #slider2></md-slider>
 {{slider2.value}}
 <input [(ngModel)]="max">
 
@@ -20,11 +20,11 @@ <h1>Slider with step defined</h1>
 {{slider5.value}}
 
 <h1>Slider with set tick interval</h1>
-<md-slider tick-interval="auto"></md-slider>
-<md-slider tick-interval="9"></md-slider>
+<md-slider tickInterval="auto"></md-slider>
+<md-slider tickInterval="9"></md-slider>
 
 <h1>Slider with Thumb Label</h1>
-<md-slider thumb-label></md-slider>
+<md-slider thumbLabel></md-slider>
 
 <h1>Slider with one-way binding</h1>
 <md-slider [value]="val" step="40"></md-slider>
@@ -35,13 +35,13 @@ <h1>Slider with two-way binding</h1>
 <input [(ngModel)]="demo">
 
 <h1>Inverted slider</h1>
-<md-slider invert value="50" tick-interval="5"></md-slider>
+<md-slider invert value="50" tickInterval="5"></md-slider>
 
 <h1>Vertical slider</h1>
-<md-slider vertical thumb-label tick-interval="auto" value="50"></md-slider>
+<md-slider vertical thumbLabel tickInterval="auto" value="50"></md-slider>
 
 <h1>Inverted vertical slider</h1>
-<md-slider vertical invert thumb-label tick-interval="auto" value="50"></md-slider>
+<md-slider vertical invert thumbLabel tickInterval="auto" value="50"></md-slider>
 
 <md-tab-group>
   <md-tab label="One">

src/demo-app/tabs/tabs-demo.html

@@ -42,9 +42,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
     </md-card-content>
   </md-card>
 
-  <md-tab-group class="demo-tab-group"
-                md-dynamic-height
-                [(selectedIndex)]="activeTabIndex">
+  <md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
     <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
       <template md-tab-label>{{tab.label}}</template>
       {{tab.content}}
@@ -92,7 +90,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
 
 <h1>Tab Group Demo - Dynamic Height</h1>
 
-<md-tab-group class="demo-tab-group" md-dynamic-height>
+<md-tab-group class="demo-tab-group" dynamicHeight>
   <md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
     <template md-tab-label>{{tab.label}}</template>
     {{tab.content}}

src/demo-app/tooltip/tooltip-demo.html

@@ -5,10 +5,10 @@ <h1>Tooltip Demo</h1>
     <button #tooltip="mdTooltip"
         md-raised-button
         color="primary"
-        [md-tooltip]="message"
-        [tooltip-position]="position"
-        [tooltipShowDelay]="showDelay"
-        [tooltipHideDelay]="hideDelay">
+        [mdTooltip]="message"
+        [mdTooltipPosition]="position"
+        [mdTooltipShowDelay]="showDelay"
+        [mdTooltipHideDelay]="hideDelay">
       Mouse over to see the tooltip
     </button>
   </p>

src/e2e-app/menu/menu-e2e.html

@@ -2,8 +2,8 @@
   <div style="float:left">
     <div id="text">{{ selected }}</div>
     <button id="start">START</button>
-    <button [md-menu-trigger-for]="menu" id="trigger">TRIGGER</button>
-    <button [md-menu-trigger-for]="menu" id="trigger-two">TRIGGER 2</button>
+    <button [mdMenuTriggerFor]="menu" id="trigger">TRIGGER</button>
+    <button [mdMenuTriggerFor]="menu" id="trigger-two">TRIGGER 2</button>
 
     <md-menu #menu="mdMenu" y-position="below" class="custom">
       <button md-menu-item (click)="selected='one'">One</button>
@@ -12,20 +12,20 @@
       <button md-menu-item>Four</button>
     </md-menu>
 
-    <button [md-menu-trigger-for]="beforeMenu" id="before-t">
+    <button [mdMenuTriggerFor]="beforeMenu" id="before-t">
       BEFORE
     </button>
     <md-menu x-position="before" y-position="below" class="before" #beforeMenu="mdMenu">
       <button md-menu-item>Item</button>
     </md-menu>
 
     <div class="bottom-row">
-      <button [md-menu-trigger-for]="aboveMenu" id="above-t">ABOVE</button>
+      <button [mdMenuTriggerFor]="aboveMenu" id="above-t">ABOVE</button>
       <md-menu y-position="above" class="above" #aboveMenu="mdMenu">
         <button md-menu-item>Item</button>
       </md-menu>
 
-      <button [md-menu-trigger-for]="combined" id="combined-t">
+      <button [mdMenuTriggerFor]="combined" id="combined-t">
         BOTH
       </button>
       <md-menu x-position="before" y-position="above" class="combined" #combined="mdMenu">

src/lib/button-toggle/button-toggle.ts

@@ -34,6 +34,7 @@ export type ToggleType = 'checkbox' | 'radio';
 /**
  * Provider Expression that allows md-button-toggle-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
+ * @docs-private
  */
 export const MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any = {
   provide: NG_VALUE_ACCESSOR,
@@ -43,7 +44,7 @@ export const MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any = {
 
 var _uniqueIdCounter = 0;
 
-/** A simple change event emitted by either MdButtonToggle or MdButtonToggleGroup. */
+/** Change event object emitted by MdButtonToggle. */
 export class MdButtonToggleChange {
   source: MdButtonToggle;
   value: any;

src/lib/button/button.html

@@ -1,8 +1,8 @@
 <span class="md-button-wrapper"><ng-content></ng-content></span>
 <div md-ripple *ngIf="!_isRippleDisabled()" class="md-button-ripple"
-    [class.md-button-ripple-round]="isRoundButton()"
-    [md-ripple-trigger]="getHostElement()"
-    [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
-    md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
+    [class.md-button-ripple-round]="_isRoundButton()"
+    [mdRippleTrigger]="_getHostElement()"
+    [mdRippleColor]="_isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
+    mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
 <!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
 <div class="md-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>

src/lib/button/button.spec.ts

@@ -168,7 +168,7 @@ describe('MdButton', () => {
       anchorElement = fixture.nativeElement.querySelector('a[md-button]');
     });
 
-    it('should remove ripple if md-ripple-disabled input is set', () => {
+    it('should remove ripple if mdRippleDisabled input is set', () => {
       expect(buttonElement.querySelectorAll('[md-ripple]').length).toBe(1);
 
       testComponent.rippleDisabled = true;