Update changes since initial release

Author: nshahan

lib/angular2_components.dart

@@ -43,7 +43,7 @@ const List<Type> materialDirectives = const [
   ScorecardComponent
 ];
 
-/// A convenience list of all bindings exposed by this package.
+/// A convenience list of all providers exposed by this package.
 const List<List<Provider>> materialProviders = const <List<Provider>>[
   rippleBindings
 ];

lib/src/all_components.dart

@@ -46,6 +46,8 @@ export 'components/material_tab/src/tab_mixin.dart';
 export 'components/material_tab/tab_change_event.dart';
 export 'components/material_toggle/material_toggle.dart';
 export 'components/material_yes_no_buttons/material_yes_no_buttons.dart';
+export 'components/mixins/focusable_mixin.dart';
+export 'components/mixins/has_tab_index.dart';
 export 'components/reorder_list/reorder_list.dart';
 export 'components/scorecard/scoreboard.dart';
 export 'components/scorecard/scorecard.dart';

lib/src/components/button_decorator/button_decorator.dart

@@ -4,12 +4,12 @@
 
 import 'dart:html';
 
-import 'package:angular2/angular2.dart';
-
 import '../focus/focus.dart';
+import '../mixins/has_tab_index.dart';
 import '../../utils/angular/properties/properties.dart';
 import '../../utils/async/async.dart';
 import '../../utils/browser/events/events.dart';
+import 'package:angular2/angular2.dart';
 
 /// ButtonDirective adds all basic required a11y functional for any element,
 /// that are designed to work as a button (clickable icon, etc.)
@@ -25,18 +25,21 @@ import '../../utils/browser/events/events.dart';
 @Directive(selector: '[buttonDecorator]', host: const {
   '(click)': r'handleClick($event)',
   '(keypress)': r'handleKeyPress($event)',
-  'tabindex': '0',
+  '[tabindex]': 'tabIndex',
   'role': 'button',
   '[attr.aria-disabled]': 'disabledStr',
   '[class.is-disabled]': 'disabled',
 })
-class ButtonDirective extends RootFocusable {
+class ButtonDirective extends RootFocusable with HasTabIndex {
   /// Will emit Event on mouse click or keyboard activation.
   @Output()
   final LazyEventEmitter<UIEvent> trigger =
       new LazyEventEmitter<UIEvent>.broadcast();
 
   bool _disabled = false;
+  bool _tabbable = true;
+
+  String _hostTabIndex;
 
   ButtonDirective(ElementRef element) : super(element);
 
@@ -50,6 +53,23 @@ class ButtonDirective extends RootFocusable {
     _disabled = getBool(value);
   }
 
+  /// Is the button tabbable.
+  bool get tabbable => _tabbable;
+  @Input()
+  set tabbable(value) {
+    _tabbable = getBool(value);
+  }
+
+  String get hostTabIndex => tabbable && !disabled ? _hostTabIndex : '-1';
+
+  /// The tab index of the button.
+  ///
+  /// The value is used if [tabbable] is `true` and [disabled] is `false`.
+  @Input()
+  set tabindex(String value) {
+    _hostTabIndex = value;
+  }
+
 
   /// Triggers if not disabled.
   void handleClick(MouseEvent mouseEvent) {

lib/src/components/focus/keyboard_only_focus_indicator.dart

@@ -22,21 +22,19 @@ import '../../utils/browser/dom_service/dom_service.dart';
     exportAs: 'keyboardOnlyFocusIndicator')
 class KeyboardOnlyFocusIndicatorDirective {
   final ElementRef _element;
-  final Renderer _renderer;
   final DomService _domService;
 
-  KeyboardOnlyFocusIndicatorDirective(
-      this._element, this._renderer, this._domService);
+  KeyboardOnlyFocusIndicatorDirective(this._element, this._domService);
 
   void resetOutline() {
     _domService.scheduleWrite(() {
-      _renderer.setElementStyle(_element.nativeElement, 'outline', '');
+      _element.nativeElement.style.outline = '';
     });
   }
 
   void hideOutline() {
     _domService.scheduleWrite(() {
-      _renderer.setElementStyle(_element.nativeElement, 'outline', 'none');
+      _element.nativeElement.style.outline = 'none';
     });
   }
 

lib/src/components/glyph/glyph.dart

@@ -19,7 +19,7 @@ import '../../model/ui/icon.dart';
 ///
 /// ```html
 /// <link rel="stylesheet" type="text/css"
-///     href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended">
+///     href="https://fonts.googleapis.com/icon?family=Material+Icons">
 /// ```
 /// __Attributes:__
 ///
@@ -30,7 +30,8 @@ import '../../model/ui/icon.dart';
     selector: 'glyph',
     templateUrl: 'glyph.html',
     styleUrls: const ['glyph.scss.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush)
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    preserveWhitespace: false)
 class GlyphComponent {
   static const String _materialIconsExtended = 'material-icons-extended';
 

lib/src/components/material_button/material_button.dart

@@ -2,11 +2,10 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-import 'package:angular2/angular2.dart';
-
 import '../button_decorator/button_decorator.dart';
 import '../material_ripple/material_ripple.dart';
 import '../theme/dark_theme.dart';
+import 'package:angular2/angular2.dart';
 
 import 'material_button_base.dart';
 
@@ -85,7 +84,7 @@ import 'material_button_base.dart';
       '[attr.elevation]': 'zElevation',
       'animated': 'true'
     },
-    inputs: const ['disabled', 'raised'],
+    inputs: const ['disabled', 'raised', 'tabindex'],
     outputs: const ['trigger'],
     directives: const [MaterialRippleComponent],
     templateUrl: 'material_button.html',
@@ -94,7 +93,8 @@ import 'material_button_base.dart';
       const Provider(ButtonDirective, useExisting: MaterialButtonComponent)
     ],
     styleUrls: const ['material_button.scss.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush)
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    preserveWhitespace: false)
 class MaterialButtonComponent extends MaterialButtonBase {
   final ChangeDetectorRef _changeDetector;
 

lib/src/components/material_button/material_button_base.dart

@@ -5,10 +5,9 @@
 import 'dart:async';
 import 'dart:html';
 
-import 'package:angular2/angular2.dart';
-
 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.
@@ -28,13 +27,13 @@ import '../../utils/angular/properties/properties.dart';
 /// - `trigger: Event` -- Published when the button is activated via click or
 ///   keypress.
 class MaterialButtonBase extends ButtonDirective {
-  static const _MOUSE_UP_Z = 1;
-  static const _MOUSE_DOWN_Z = 2;
+  static const lowElevation = 1;
+  static const mediumElevation = 2;
 
   bool _raised = false;
-  int _zElevation = 1;
   bool _focused = false;
   bool _clickFocused = false;
+  bool _isMouseDown = false;
 
   /// Whether the button should be raised.
   bool get raised => _raised;
@@ -51,9 +50,8 @@ class MaterialButtonBase extends ButtonDirective {
   /// The elevation the material-shadow component should show.
   ///
   /// When a button is pressed, this is increased.
-  int get zElevation => _zElevation;
-
-  String get tabIndex => disabled ? '-1' : '0';
+  int get zElevation =>
+      _isMouseDown || _focused ? mediumElevation : lowElevation;
 
   MaterialButtonBase(ElementRef element) : super(element);
 
@@ -74,12 +72,12 @@ class MaterialButtonBase extends ButtonDirective {
   /// Triggered on a mouse press.
   void onMouseDown(_) {
     _clickFocused = true;
-    _zElevation = _MOUSE_DOWN_Z;
+    _isMouseDown = true;
   }
 
   /// Triggered on a mouse release.
   void onMouseUp(_) {
-    _zElevation = _MOUSE_UP_Z;
+    _isMouseDown = false;
   }
 
   /// Triggered on focus.

lib/src/components/material_button/material_fab.dart

@@ -2,9 +2,8 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
-import 'package:angular2/angular2.dart';
-
 import '../material_ripple/material_ripple.dart';
+import 'package:angular2/angular2.dart';
 
 import 'material_button_base.dart';
 
@@ -69,9 +68,10 @@ import 'material_button_base.dart';
       '[attr.elevation]': 'zElevation',
       'animated': 'true'
     },
-    inputs: const ['disabled', 'raised'],
+    inputs: const ['disabled', 'raised', 'tabindex'],
     outputs: const ['trigger'],
     directives: const [MaterialRippleComponent],
+    preserveWhitespace: false,
     templateUrl: 'material_button.html',
     styleUrls: const ['material_fab.scss.css'],
     changeDetection: ChangeDetectionStrategy.OnPush)

lib/src/components/material_checkbox/material_checkbox.dart

@@ -89,6 +89,7 @@ const indeterminateAriaState = 'mixed';
       '[attr.aria-label]': 'label',
     },
     directives: const [GlyphComponent, MaterialRippleComponent, NgIf],
+    preserveWhitespace: false,
     templateUrl: 'material_checkbox.html',
     styleUrls: const ['material_checkbox.scss.css'],
     changeDetection: ChangeDetectionStrategy.OnPush)
@@ -227,8 +228,7 @@ class MaterialCheckboxComponent implements ControlValueAccessor {
 
   void _syncAriaChecked() {
     if (_renderer == null || _root == null) return;
-    _renderer.setElementAttribute(
-        _root.nativeElement, 'aria-checked', _checkedStr);
+    _root.nativeElement.attributes['aria-checked'] = _checkedStr;
     _changeDetector?.markForCheck();
   }
 

lib/src/components/material_chips/material_chip.dart

@@ -37,6 +37,7 @@ import '../../utils/id_generator/id_generator.dart';
     providers: const [
       const Provider(HasRenderer, useExisting: MaterialChipComponent)
     ],
+    preserveWhitespace: false,
     templateUrl: 'material_chip.html',
     styleUrls: const ['material_chip.scss.css'],
     directives: const [GlyphComponent, ButtonDirective, NgIf],