chore(): fix host properties for MD components.

Author: jelbourn

gulpfile.js

@@ -650,23 +650,21 @@ gulp.task('build', ['build.js', 'build.dart']);
 
 // ------------
 // angular material testing rules
-gulp.task('build/css.js.dev', function() {
+gulp.task('build.js.material', ['build.js.dev'], function() {
  return gulp.src('modules/*/src/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(gulp.dest(CONFIG.dest.js.dev.es5));
 });
 
 // TODO: this target is temporary until we find a way to use the SASS transformer
-gulp.task('build/css.dart', function() {
- return gulp.src('dist/dart/angular2_material/lib/src/**/*.scss')
+gulp.task('build.dart.material', ['build/packages.dart'], function() {
+ return gulp.src('dist/dart/angular2_material/src/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(gulp.dest('dist/dart/angular2_material/lib/src'));
 });
 
-gulp.task('build.material', ['build.js.dev', 'build/css.js.dev']);
-
 
 gulp.task('cleanup.builder', function() {
  angularBuilder.cleanup();

modules/angular2/src/facade/browser.dart

@@ -2,7 +2,7 @@
  * Dart version of browser APIs. This library depends on 'dart:html' and
  * therefore can only run in the browser.
  */
-library angular2.src.facade.browser; 
+library angular2.src.facade.browser;
 
 import 'dart:js' show context;
 
@@ -12,6 +12,7 @@ export 'dart:html' show
  window,
  Element,
  Node,
+ MouseEvent,
  KeyboardEvent,
  Event;
 

modules/angular2/src/facade/browser.es6

@@ -8,3 +8,6 @@ export {win as window};
 export var document = window.document;
 export var location = window.location;
 export var gc = window.gc ? () => window.gc() : () => null;
+export {Event as Event};
+export {MouseEvent as MouseEvent};
+export {KeyboardEvent as KeyboardEvent};

modules/angular2/src/facade/browser.ts

@@ -12,3 +12,6 @@ export {win as window};
 export var document = window.document;
 export var location = window.location;
 export var gc = window.gc ? () => window.gc() : () => null;
+export const Event = Event;
+export const MouseEvent = MouseEvent;
+export const KeyboardEvent = KeyboardEvent;

modules/angular2_material/src/components/checkbox/checkbox.js

@@ -2,6 +2,7 @@ import {Component, View, Attribute} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
 import {KEY_SPACE} from 'angular2_material/src/core/constants'
 import {KeyboardEvent} from 'angular2/src/facade/browser';
+import {NumberWrapper} from 'angular2/src/facade/lang';
 
 @Component({
  selector: 'md-checkbox',
@@ -34,12 +35,12 @@ export class MdCheckbox {
  role: string;
 
  /** Setter for tabindex */
- tabindex: any;
+ tabindex: number;
 
  constructor(@Attribute('tabindex') tabindex: string) {
  this.role = 'checkbox';
  this.checked = false;
- this.tabindex = isPresent(tabindex) ? tabindex : '0';
+ this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
  }
 
  get disabled() {

modules/angular2_material/src/components/progress-linear/progress_linear.js

@@ -13,7 +13,7 @@ import {Math} from 'angular2/src/facade/math';
  'role': 'attr.role',
  'ariaValuemin': 'attr.aria-valuemin',
  'ariaValuemax': 'attr.aria-valuemax',
- 'ariaValuenow': 'attr.aria-valuenow'
+ 'value': 'attr.aria-valuenow'
  }
 })
 @View({
@@ -30,23 +30,17 @@ export class MdProgressLinear {
  /** The render mode for the progress bar. */
  mode: string;
 
- /** Attribute setter for aria-valuenow. */
- ariaValueNowSetter: Function;
-
  /** CSS `transform` property applied to the primary bar. */
  primaryBarTransform: string;
 
  /** CSS `transform` property applied to the secondary bar. */
  secondaryBarTransform: string;
 
-
- role:any;
- ariaValuemin:any;
- ariaValuemax:any;
- ariaValuenow:any;
+ role: string;
+ ariaValuemin: string;
+ ariaValuemax: string;
 
  constructor(@Attribute('md-mode') mode: string) {
- this.ariaValueNowSetter = ariaValueNowSetter;
  this.primaryBarTransform = '';
  this.secondaryBarTransform = '';
 
@@ -64,7 +58,6 @@ export class MdProgressLinear {
  set value(v) {
  if (isPresent(v)) {
  this.value_ = MdProgressLinear.clamp(v);
- this.ariaValueNowSetter(this.value_);
  }
  }
 

modules/angular2_material/src/components/radio/radio_button.js

@@ -2,7 +2,7 @@ import {Component, View, Parent, Ancestor, Attribute} from 'angular2/angular2';
 import {Optional} from 'angular2/src/di/annotations';
 import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'
 import {onChange} from 'angular2/src/core/annotations/annotations';
-import {isPresent, StringWrapper} from 'angular2/src/facade/lang';
+import {isPresent, StringWrapper, NumberWrapper} from 'angular2/src/facade/lang';
 import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
 import {KEY_UP, KEY_DOWN, KEY_SPACE} from 'angular2_material/src/core/constants'
@@ -69,9 +69,9 @@ export class MdRadioButton {
  /** Dispatcher for coordinating radio unique-selection by name. */
  radioDispatcher: MdRadioDispatcher;
 
- tabindex:any;
- 
- role:any;
+ tabindex: number;
+
+ role: string;
 
  constructor(
  @Optional() @Parent() radioGroup: MdRadioGroup,
@@ -105,7 +105,9 @@ export class MdRadioButton {
 
  // If the user has not set a tabindex, default to zero (in the normal document flow).
  if (!isPresent(radioGroup)) {
- this.tabindex = isPresent(tabindex) ? tabindex : '0';
+ this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
+ } else {
+ this.tabindex = -1;
  }
  }
 
@@ -169,12 +171,12 @@ export class MdRadioButton {
  'value': 'value'
  },
  hostListeners: {
- 'keydown': 'onKeydown($event)'
+ // TODO(jelbourn): Remove ^ when event retargeting is fixed.
+ '^keydown': 'onKeydown($event)'
  },
  hostProperties: {
  'tabindex': 'tabindex',
  'role': 'attr.role',
- 'checked': 'attr.aria-checked',
  'disabled': 'attr.aria-disabled',
  'activedescendant': 'attr.aria-activedescendant'
  }
@@ -202,11 +204,11 @@ export class MdRadioGroup {
  /** The ID of the selected radio button. */
  selectedRadioId: string;
 
- change:EventEmitter;
+ change: EventEmitter;
 
- tabindex:any;
+ tabindex: number;
 
- role:any;
+ role: string;
 
  constructor(
  @Attribute('tabindex') tabindex: string,
@@ -225,7 +227,7 @@ export class MdRadioGroup {
  this.disabled = isPresent(disabled);
 
  // If the user has not set a tabindex, default to zero (in the normal document flow).
- this.tabindex = isPresent(tabindex) ? tabindex : '0';
+ this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
  }
 
  /** Gets the name of this group, as to be applied in the HTML 'name' attribute. */
@@ -319,6 +321,7 @@ export class MdRadioGroup {
 
  this.radioDispatcher.notify(this.name_);
  radio.checked = true;
+ ObservableWrapper.callNext(this.change, null);
 
  this.value = radio.value;
  this.selectedRadioId = radio.id;

modules/angular2_material/src/components/switcher/switch.js

@@ -2,6 +2,7 @@ import {Component, View, Attribute} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
 import {KEY_SPACE} from 'angular2_material/src/core/constants'
 import {KeyboardEvent} from 'angular2/src/facade/browser';
+import {NumberWrapper} from 'angular2/src/facade/lang';
 
 // TODO(jelbourn): without gesture support, this is identical to MdCheckbox.
 
@@ -31,13 +32,13 @@ export class MdSwitch {
  /** Whether this switch is disabled. */
  disabled_: boolean;
 
- tabindex:any;
- role:any;
+ tabindex: number;
+ role: string;
 
  constructor(@Attribute('tabindex') tabindex: string) {
  this.role = 'checkbox';
  this.checked = false;
- this.tabindex = isPresent(tabindex) ? tabindex : '0';
+ this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
  }
 
  get disabled() {

modules/examples/src/material/demo_common.js

@@ -13,13 +13,13 @@ export function commonDemoSetup(): void {
 }
 
 @Injectable()
-@IMPLEMENTS(UrlResolver)
-export class DemoUrlResolver {
+export class DemoUrlResolver extends UrlResolver {
  static a;
 
  isInPubServe:boolean;
 
  constructor() {
+ super();
  if (isBlank(UrlResolver.a)) {
  UrlResolver.a = DOM.createElement('a');
  }