refactor: convert dash-case inputs to camelCase (#2244)

* refactor: convert dash-case inputs to camelCase

Converts any dash-cased `@Input` properties into camelCase and adds a deprecated proxy property with the old naming. The following properties have been renamed:

* `md-ripple-trigger`
* `md-ripple-centered`
* `md-ripple-disabled`
* `md-ripple-max-radius`
* `md-ripple-speed-factor`
* `md-ripple-color`
* `md-ripple-background-color`
* `md-ripple-focused`
* `md-ripple-unbounded`
* `thumb-label`
* `tick-interval`
* `md-dynamic-height`
* `tooltip-position`

The following properties were skipped:
* `md-menu-trigger-for` - Is currently used also as a selector for the menu trigger.
* Any properties that a native equivalent (e.g. `aria-label`, `aria-labeledby`).

* Fix tabs CSS issue and switch mdDynamicHeight to dynamicHeight.

* Rename [md-tooltip] to [mdTooltip].

* Rename md-menu-trigger-for to mdMenuTriggerFor.

* Use public property for dynamic height binding.

* Proper method name.

* Fix isRoundButton naming.

* make menu-trigger and md-tooltip backwards compatible

Author: crisbeto

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/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>
+    [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;

src/lib/checkbox/checkbox.html

@@ -16,10 +16,10 @@
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">
     <div md-ripple *ngIf="!_isRippleDisabled()" class="md-checkbox-ripple"
-         [md-ripple-trigger]="_getHostElement()"
-         [md-ripple-centered]="true"
-         [md-ripple-speed-factor]="0.3"
-         md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
+         [mdRippleTrigger]="_getHostElement()"
+         [mdRippleCentered]="true"
+         [mdRippleSpeedFactor]="0.3"
+         mdRippleBackgroundColor="rgba(0, 0, 0, 0)"></div>
     <div class="md-checkbox-frame"></div>
     <div class="md-checkbox-background">
       <svg version="1.1"

src/lib/checkbox/checkbox.spec.ts

@@ -521,7 +521,7 @@ describe('MdCheckbox', () => {
       expect(inputElement.tabIndex).toBe(13);
     });
 
-    it('should remove ripple if md-ripple-disabled input is set', async(() => {
+    it('should remove ripple if mdRippleDisabled input is set', async(() => {
       testComponent.disableRipple = true;
       fixture.detectChanges();