From b9eab463f7e009f9de802f4a39735506721ef402 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 23 Apr 2015 13:15:20 -0700 Subject: [PATCH] chore(): fix host properties for MD components. --- gulpfile.js | 8 +++--- modules/angular2/src/facade/browser.dart | 3 ++- modules/angular2/src/facade/browser.es6 | 3 +++ modules/angular2/src/facade/browser.ts | 3 +++ .../src/components/checkbox/checkbox.js | 5 ++-- .../progress-linear/progress_linear.js | 15 +++-------- .../src/components/radio/radio_button.js | 25 +++++++++++-------- .../src/components/switcher/switch.js | 7 +++--- modules/examples/src/material/demo_common.js | 4 +-- 9 files changed, 38 insertions(+), 35 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 0a23dfa325..5baac6e1cf 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -650,7 +650,7 @@ 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()) @@ -658,15 +658,13 @@ gulp.task('build/css.js.dev', function() { }); // 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(); diff --git a/modules/angular2/src/facade/browser.dart b/modules/angular2/src/facade/browser.dart index adf287a47d..f389e2fe34 100644 --- a/modules/angular2/src/facade/browser.dart +++ b/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; diff --git a/modules/angular2/src/facade/browser.es6 b/modules/angular2/src/facade/browser.es6 index 0ee9380ce8..91ec56d0c7 100644 --- a/modules/angular2/src/facade/browser.es6 +++ b/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}; diff --git a/modules/angular2/src/facade/browser.ts b/modules/angular2/src/facade/browser.ts index 69645e0266..0d93c042d6 100644 --- a/modules/angular2/src/facade/browser.ts +++ b/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; diff --git a/modules/angular2_material/src/components/checkbox/checkbox.js b/modules/angular2_material/src/components/checkbox/checkbox.js index 33f080d35c..471e1fe1cf 100644 --- a/modules/angular2_material/src/components/checkbox/checkbox.js +++ b/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() { diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.js b/modules/angular2_material/src/components/progress-linear/progress_linear.js index 5823fcd445..b553c1278c 100644 --- a/modules/angular2_material/src/components/progress-linear/progress_linear.js +++ b/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_); } } diff --git a/modules/angular2_material/src/components/radio/radio_button.js b/modules/angular2_material/src/components/radio/radio_button.js index ba526a06a7..517137f19c 100644 --- a/modules/angular2_material/src/components/radio/radio_button.js +++ b/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; diff --git a/modules/angular2_material/src/components/switcher/switch.js b/modules/angular2_material/src/components/switcher/switch.js index 986f857759..1805dd35eb 100644 --- a/modules/angular2_material/src/components/switcher/switch.js +++ b/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() { diff --git a/modules/examples/src/material/demo_common.js b/modules/examples/src/material/demo_common.js index 0223109593..f90a0cb4af 100644 --- a/modules/examples/src/material/demo_common.js +++ b/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'); }