refactor: convert dash-case inputs to camelCase (angular#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

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();
 

src/lib/core/ripple/README.md

@@ -1,6 +1,6 @@
 # md-ripple
 
-`md-ripple` defines an area in which a ripple animates, usually in response to user action. It is used as an attribute directive, for example `<div md-ripple [md-ripple-color]="rippleColor">...</div>`.
+`md-ripple` defines an area in which a ripple animates, usually in response to user action. It is used as an attribute directive, for example `<div md-ripple [mdRippleColor]="rippleColor">...</div>`.
 
 By default, a ripple is activated when the host element of the `md-ripple` directive receives mouse or touch events. On a mousedown or touch start, the ripple background fades in. When the click event completes, a circular foreground ripple fades in and expands from the event location to cover the host element bounds.
 
@@ -17,11 +17,11 @@ Properties:
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `md-ripple-trigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`.
-| `md-ripple-color` | string | Custom color for foreground ripples
-| `md-ripple-background-color` | string | Custom color for the ripple background
-| `md-ripple-centered` | boolean | If true, the ripple animation originates from the center of the `md-ripple` bounds rather than from the location of the click event.
-| `md-ripple-max-radius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle.
-| `md-ripple-unbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds.
-| `md-ripple-focused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus.
-| `md-ripple-disabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples.
+| `mdRippleTrigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`.
+| `mdRippleColor` | string | Custom color for foreground ripples
+| `mdRippleBackgroundColor` | string | Custom color for the ripple background
+| `mdRippleCentered` | boolean | If true, the ripple animation originates from the center of the `md-ripple` bounds rather than from the location of the click event.
+| `mdRippleMaxRadius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle.
+| `mdRippleUnbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds.
+| `mdRippleFocused` | boolean | If true, the background ripple is shown using the current theme's accent color to indicate focus.
+| `mdRippleDisabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples.

src/lib/core/ripple/_ripple.scss

@@ -1,7 +1,7 @@
 @import '../theming/theming';
 
 
-$md-ripple-focused-opacity: 0.1;
+$mdRippleFocused-opacity: 0.1;
 $md-ripple-background-fade-duration: 300ms;
 $md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
 $md-ripple-foreground-initial-opacity: 0.25;
@@ -15,7 +15,7 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
     overflow: hidden;
   }
 
-  [md-ripple].md-ripple-unbounded {
+  [md-ripple].mdRippleUnbounded {
     overflow: visible;
   }
 
@@ -30,15 +30,15 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
     bottom: 0;
   }
 
-  .md-ripple-unbounded .md-ripple-background {
+  .mdRippleUnbounded .md-ripple-background {
     display: none;
   }
 
   .md-ripple-background.md-ripple-active {
     opacity: 1;
   }
 
-  .md-ripple-focused .md-ripple-background {
+  .mdRippleFocused .md-ripple-background {
     opacity: 1;
   }
 
@@ -64,8 +64,8 @@ $md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
 @mixin md-ripple-theme($theme) {
   $accent: map-get($theme, accent);
 
-  .md-ripple-focused .md-ripple-background {
-    background-color: md-color($accent, $md-ripple-focused-opacity);
+  .mdRippleFocused .md-ripple-background {
+    background-color: md-color($accent, $mdRippleFocused-opacity);
   }
 }
 

src/lib/core/ripple/ripple.spec.ts

@@ -438,12 +438,12 @@ class BasicRippleContainer {
   template: `
     <div id="container" style="position: relative; width:300px; height:200px;"
       md-ripple
-      [md-ripple-trigger]="trigger"
-      [md-ripple-centered]="centered"
-      [md-ripple-max-radius]="maxRadius"
-      [md-ripple-disabled]="disabled"
-      [md-ripple-color]="color"
-      [md-ripple-background-color]="backgroundColor">
+      [mdRippleTrigger]="trigger"
+      [mdRippleCentered]="centered"
+      [mdRippleMaxRadius]="maxRadius"
+      [mdRippleDisabled]="disabled"
+      [mdRippleColor]="color"
+      [mdRippleBackgroundColor]="backgroundColor">
     </div>
     <div class="alternateTrigger"></div>
   `,