Component updates (#57)

Rollup of all internal changes since last release. No new components added.

Waiting for angular2 to publish a revision before publishing these changes to pub. Requires analyzer 0.29.7 to build.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,38 @@
+## 0.4.0-alpha
+
+This code is considered production quality, but depends on angular2: 3.0.0-alpha.
+The alpha tag represents the evolving nature of the AngularDart api, not
+code quality (3.0.0-alpha is used in production Google apps).
+
+### Breaking Changes
+ * Update for generic syntax and `FutureOr` type introduced in Dart SDK 1.22.0.
+ * Material Toggle: Remove the deprecated `color` theme input.
+ * Material Button, Fab, Yes/No:
+   * Remove is-disabled and is-raised HTML classes used for styling.
+     Custom styles should now use `[disabled]` and `[raised]` instead of `.is-disabled` and
+     `.is-raised` when targeting buttons.
+   * Remove z-index of 0.
+
+### Other Changes
+ * Focus: Fix AX_ARIA_08 a11y issue.
+ * Material Chips: Use :host to remove need for wrapper div.
+ * Material Expansionpanel: Fix panel overflow issues.
+ * Material Input:
+   * Add new number accessors and validators.
+   * Fix AX_TEXT_01 a11y issue.
+ * Material List: Block pointer events for disabled list items.
+ * Material Popup: Disable animation delay when there is nothing to animate.
+ * Material Radio: Fix styling issue, flex for IE11.
+ * Material Tab Panel: Fix issue that prevents displaying tabs on initialization.
+ * Scorecard:
+   * Add support for RTL languages in scrollable scoreboards.
+   * Add support for themes.
+ * Compute the ARIA roles only once per instance.
+ * Fix dom update issues.
+ * Add proper types to injected providers.
+ * Add missing imports and remove unsupported Angular imports.
+ * Strong mode fixes.
+
 ## 0.3.1-alpha
 
 This code is considered production quality, but depends on angular2: 3.0.0-alpha.

lib/src/all_components.dart

@@ -33,6 +33,8 @@ export 'components/material_input/material_input.dart'
     hide materialInputErrorKey;
 export 'components/material_input/material_input_default_value_accessor.dart';
 export 'components/material_input/material_input_multiline.dart';
+export 'components/material_input/material_number_accessor.dart';
+export 'components/material_input/material_number_validators.dart';
 export 'components/material_list/material_list.dart';
 export 'components/material_list/material_list_item.dart';
 export 'components/material_list/material_list_size.dart';

lib/src/components/focus/focus_item.dart

@@ -24,14 +24,19 @@ import '../../utils/async/async.dart';
 ///
 @Directive(selector: '[focusItem]', host: const {
   '[attr.tabindex]': 'tabIndex',
-  '(keydown)': r'keydown($event)'
+  '[attr.role]': 'role',
+  '(keydown)': r'keydown($event)',
 }, providers: const [
   const Provider(FocusableItem, useExisting: FocusItemDirective)
 ])
 class FocusItemDirective extends RootFocusable implements FocusableItem {
-  FocusItemDirective(ElementRef element) : super(element);
+  final String role;
 
-  String tabIndex = "0";
+  FocusItemDirective(ElementRef element, @Attribute('role') String role)
+      : this.role = role ?? 'listitem',
+        super(element);
+
+  String tabIndex = '0';
 
   final _focusMoveCtrl =
       new LazyStreamController<FocusMoveEvent>.broadcast(sync: true);
@@ -47,6 +52,6 @@ class FocusItemDirective extends RootFocusable implements FocusableItem {
 
   @override
   set tabbable(bool value) {
-    tabIndex = value ? "0" : "-1";
+    tabIndex = value ? '0' : '-1';
   }
 }

lib/src/components/focus/focus_list.dart

@@ -31,26 +31,27 @@ import '../../utils/disposer/disposer.dart';
 ///       <div focusItem>Item 3</div>
 ///     </div>
 ///
-@Directive(selector: '[focusList]', host: const {'role': 'list'})
+@Directive(selector: '[focusList]', host: const {'[attr.role]': 'role'})
 class FocusListDirective implements OnDestroy {
   final ManagedZone _managedZone;
-  final List<FocusableItem> _children = <FocusableItem>[];
+  final String role;
+  final _disposer = new Disposer.multi();
+  final _children = <FocusableItem>[];
   int get _length => _children.length;
-  Disposer _disposer = new Disposer.multi();
 
-  FocusListDirective(this._managedZone);
+  FocusListDirective(this._managedZone, @Attribute('role') String role)
+      : this.role = role ?? 'list';
 
   bool _loop = false;
 
   /// Whether focus movement loops from the end of the list to the beginning of
   /// the list. Default is `false`.
+  bool get loop => _loop;
   @Input()
   set loop(val) {
     _loop = getBool(val);
   }
 
-  bool get loop => _loop;
-
   @ContentChildren(FocusableItem)
   set listItems(QueryList<FocusableItem> listItems) {
     _children.clear();

lib/src/components/material_button/material_button.dart

@@ -9,10 +9,6 @@ import 'package:angular2/angular2.dart';
 
 import 'material_button_base.dart';
 
-// TODO(google): Right now we use is-raised and isDisabled for CSS styling.
-// When Angular supports conditionally adding/removing an attribute, use.
-// See https://github.com/angular/angular/issues/2869.
-
 /// Material button is a button.
 ///
 /// When the user touches the button, a ripple effect emanates from the point of
@@ -61,6 +57,12 @@ import 'material_button_base.dart';
 /// __Attributes:__
 ///
 ///   Button
+/// - `disabled` -- Linked to the disabled property. If present, sets the
+///    disabled property to true. If the disabled property is true, this
+///    attribute will be present.
+/// - `raised` -- Linked to the raised property. If present, sets the raised
+///    property to true. If the raised property is true, this attribute will be
+///    present.
 /// - `icon` -- If present, removes the minimum width style of the button.
 /// - `no-ink` -- If present, removes the ripple effect from the button.
 /// - `clear-size` -- If present, removes both the min-width and margin from
@@ -70,8 +72,8 @@ import 'material_button_base.dart';
 @Component(
     selector: 'material-button',
     host: const {
-      '[class.is-disabled]': 'disabled',
-      '[class.is-raised]': 'raised',
+      '[attr.disabled]': r'disabled ? "" : null',
+      '[attr.raised]': r'raised ? "" : null',
       '[class.is-focused]': 'visualFocus',
       '(mousedown)': r'onMouseDown($event)',
       '(mouseup)': r'onMouseUp($event)',

lib/src/components/material_button/material_button.scss.css

@@ -9,10 +9,6 @@ import '../button_decorator/button_decorator.dart';
 import '../../utils/angular/properties/properties.dart';
 import 'package:angular2/angular2.dart';
 
-// TODO(google): Right now we use is-raised and isDisabled for CSS styling.
-// When Angular supports conditionally adding/removing an attribute, use.
-// See https://github.com/angular/angular/issues/2869.
-
 /// A base class from which to build buttons.
 ///
 /// __Expected Properties:__

lib/src/components/material_button/material_button_base.dart

@@ -7,10 +7,6 @@ import 'package:angular2/angular2.dart';
 
 import 'material_button_base.dart';
 
-// TODO(google): Right now we use is-raised and isDisabled for CSS styling.
-// When Angular supports conditionally adding/removing an attribute, use.
-// See https://github.com/angular/angular/issues/2869.
-
 /// Material FAB is a Floating Action Button. It is round, and behaves mostly
 /// the same as a MaterialButton.
 ///
@@ -54,8 +50,8 @@ import 'material_button_base.dart';
 @Component(
     selector: 'material-fab',
     host: const {
-      '[class.is-disabled]': 'disabled',
-      '[class.is-raised]': 'raised',
+      '[attr.disabled]': r'disabled ? "" : null',
+      '[attr.raised]': r'raised ? "" : null',
       '[class.is-focused]': 'visualFocus',
       '(mousedown)': r'onMouseDown($event)',
       '(mouseup)': r'onMouseUp($event)',