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`).

Author: crisbeto

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

@@ -43,7 +43,7 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
   </md-card>
 
   <md-tab-group class="demo-tab-group"
-                md-dynamic-height
+                mdDynamicHeight
                 [(selectedIndex)]="activeTabIndex">
     <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
       <template md-tab-label>{{tab.label}}</template>
@@ -92,7 +92,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" mdDynamicHeight>
   <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

@@ -6,7 +6,7 @@ <h1>Tooltip Demo</h1>
         md-raised-button
         color="primary"
         [md-tooltip]="message"
-        [tooltip-position]="position"
+        [tooltipPosition]="position"
         [tooltipShowDelay]="showDelay"
         [tooltipHideDelay]="hideDelay">
       Mouse over to see the tooltip

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>
   `,

src/lib/core/ripple/ripple.ts

@@ -30,37 +30,89 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
    */
   // Prevent TS metadata emit from referencing HTMLElement in ripple.js
   // That breaks tests running in node that load material components.
-  @Input('md-ripple-trigger') trigger: HTMLElement|HTMLElement;
+  @Input('mdRippleTrigger') trigger: HTMLElement|HTMLElement;
+
+  /** @deprecated */
+  @Input('md-ripple-trigger')
+  get _triggerDeprecated() { return this.trigger; }
+  set _triggerDeprecated(value: HTMLElement|HTMLElement) { this.trigger = value; };
+
   /**
    * Whether the ripple always originates from the center of the host element's bounds, rather
    * than originating from the location of the click event.
    */
-  @Input('md-ripple-centered') centered: boolean;
+  @Input('mdRippleCentered') centered: boolean;
+
+  /** @deprecated */
+  @Input('md-ripple-centered')
+  get _centeredDeprecated() { return this.centered; }
+  set _centeredDeprecated(value: boolean) { this.centered = value; };
+
   /**
    * Whether click events will not trigger the ripple. It can still be triggered by manually
    * calling start() and end().
    */
-  @Input('md-ripple-disabled') disabled: boolean;
+  @Input('mdRippleDisabled') disabled: boolean;
+
+  /** @deprecated */
+  @Input('md-ripple-disabled')
+  get _disabledDeprecated() { return this.disabled; }
+  set _disabledDeprecated(value: boolean) { this.disabled = value; };
+
   /**
    * If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius
    * will be the distance from the center of the ripple to the furthest corner of the host element's
    * bounding rectangle.
    */
-  @Input('md-ripple-max-radius') maxRadius: number = 0;
+  @Input('mdRippleMaxRadius') maxRadius: number = 0;
+
+  /** @deprecated */
+  @Input('md-ripple-max-radius')
+  get _maxRadiusDeprecated() { return this.maxRadius; }
+  set _maxRadiusDeprecated(value: number) { this.maxRadius = value; };
+
   /**
    * If set, the normal duration of ripple animations is divided by this value. For example,
    * setting it to 0.5 will cause the animations to take twice as long.
    */
-  @Input('md-ripple-speed-factor') speedFactor: number = 1;
+  @Input('mdRippleSpeedFactor') speedFactor: number = 1;
+
+  /** @deprecated */
+  @Input('md-ripple-speed-factor')
+  get _speedFactorDeprecated() { return this.speedFactor; }
+  set _speedFactorDeprecated(value: number) { this.speedFactor = value; };
+
   /** Custom color for ripples. */
-  @Input('md-ripple-color') color: string;
+  @Input('mdRippleColor') color: string;
+
+  /** @deprecated */
+  @Input('md-ripple-color')
+  get _colorDeprecated() { return this.color; }
+  set _colorDeprecated(value: string) { this.color = value; };
+
   /** Custom color for the ripple background. */
-  @Input('md-ripple-background-color') backgroundColor: string;
+  @Input('mdRippleBackgroundColor') backgroundColor: string;
+
+  /** @deprecated */
+  @Input('md-ripple-background-color')
+  get _backgroundColorDeprecated() { return this.backgroundColor; }
+  set _backgroundColorDeprecated(value: string) { this.backgroundColor = value; };
 
   /** Whether the ripple background will be highlighted to indicated a focused state. */
-  @HostBinding('class.md-ripple-focused') @Input('md-ripple-focused') focused: boolean;
+  @HostBinding('class.md-ripple-focused') @Input('mdRippleFocused') focused: boolean;
+
+  /** @deprecated */
+  @Input('md-ripple-focused')
+  get _focusedDeprecated(): boolean { return this.focused; }
+  set _focusedDeprecated(value: boolean) { this.focused = value; };
+
   /** Whether foreground ripples should be visible outside the component's bounds. */
-  @HostBinding('class.md-ripple-unbounded') @Input('md-ripple-unbounded') unbounded: boolean;
+  @HostBinding('class.md-ripple-unbounded') @Input('mdRippleUnbounded') unbounded: boolean;
+
+  /** @deprecated */
+  @Input('md-ripple-unbounded')
+  get _unboundedDeprecated(): boolean { return this.unbounded; }
+  set _unboundedDeprecated(value: boolean) { this.unbounded = value; };
 
   private _rippleRenderer: RippleRenderer;
   _ruler: ViewportRuler;

src/lib/grid-list/grid-list.ts

@@ -66,22 +66,12 @@ export class MdGridList implements OnInit, AfterContentChecked {
       @Optional() private _dir: Dir) {}
 
   @Input()
-  get cols() {
-    return this._cols;
-  }
-
-  set cols(value: any) {
-    this._cols = coerceToNumber(value);
-  }
+  get cols() { return this._cols; }
+  set cols(value: any) { this._cols = coerceToNumber(value); }
 
-  @Input('gutterSize')
-  get gutterSize() {
-    return this._gutter;
-  }
-
-  set gutterSize(value: any) {
-    this._gutter = coerceToString(value);
-  }
+  @Input()
+  get gutterSize() { return this._gutter; }
+  set gutterSize(value: any) { this._gutter = coerceToString(value); }
 
   /** Set internal representation of row height from the user-provided value. */
   @Input()

src/lib/menu/menu-item.html

@@ -1,4 +1,4 @@
 <ng-content></ng-content>
-<div class="md-menu-ripple" *ngIf="!disabled" md-ripple md-ripple-background-color="rgba(0,0,0,0)"
-     [md-ripple-trigger]="_getHostElement()">
+<div class="md-menu-ripple" *ngIf="!disabled" md-ripple mdRippleBackgroundColor="rgba(0,0,0,0)"
+     [mdRippleTrigger]="_getHostElement()">
 </div>

src/lib/radio/radio.html

@@ -6,10 +6,10 @@
     <div class="md-radio-outer-circle"></div>
     <div class="md-radio-inner-circle"></div>
     <div md-ripple *ngIf="!_isRippleDisabled()" class="md-radio-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>
 
   <input #input class="md-radio-input md-visually-hidden" type="radio"

src/lib/radio/radio.spec.ts

@@ -249,7 +249,7 @@ describe('MdRadio', () => {
       expect(rippleElement).toBeFalsy('Expected a disabled radio button not to have a ripple');
     });
 
-    it('should remove ripple if md-ripple-disabled input is set', async(() => {
+    it('should remove ripple if mdRippleDisabled input is set', async(() => {
       fixture.detectChanges();
       for (let radioNativeElement of radioNativeElements)
       {

src/lib/select/option.html

@@ -1,3 +1,3 @@
 <ng-content></ng-content>
-<div class="md-option-ripple" *ngIf="!disabled" md-ripple md-ripple-background-color="rgba(0,0,0,0)"
-     [md-ripple-trigger]="_getHostElement()"></div>
+<div class="md-option-ripple" *ngIf="!disabled" md-ripple mdRippleBackgroundColor="rgba(0,0,0,0)"
+     [mdRippleTrigger]="_getHostElement()"></div>