Additional updates to existing components. (#60)

Preperation for publishing.

Author: nshahan

CHANGELOG.md

@@ -1,8 +1,8 @@
 ## 0.4.0-alpha
 
-This code is considered production quality, but depends on angular2: 3.0.0-alpha.
+This code is considered production quality, but depends on angular2: 3.0.0-alpha+1.
 The alpha tag represents the evolving nature of the AngularDart api, not
-code quality (3.0.0-alpha is used in production Google apps).
+code quality (3.0.0-alpha+1 is used in production Google apps).
 
 ### Breaking Changes
  * Update for generic syntax and `FutureOr` type introduced in Dart SDK 1.22.0.
@@ -15,18 +15,24 @@ code quality (3.0.0-alpha is used in production Google apps).
 
 ### Other Changes
  * Focus: Fix AX_ARIA_08 a11y issue.
+ * Glyph: Option to horizontally flip glyphs when the direction is RTL.
  * Material Chips: Use :host to remove need for wrapper div.
  * Material Expansionpanel: Fix panel overflow issues.
  * Material Input:
    * Add new number accessors and validators.
+   * Add ability to override/specify error messages.
    * Fix AX_TEXT_01 a11y issue.
- * Material List: Block pointer events for disabled list items.
+ * Material List: 
+   * Block pointer events for disabled list items.
+   * Remove duplicate mixin.
  * 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.
+ * Material Yes/No Buttons: Add submit/cancel buttons.
  * Scorecard:
    * Add support for RTL languages in scrollable scoreboards.
    * Add support for themes.
+   * Prevent exceptions during width calculations when scorecard width is `auto`.
  * Compute the ARIA roles only once per instance.
  * Fix dom update issues.
  * Add proper types to injected providers.

lib/src/components/glyph/glyph.dart

@@ -2,10 +2,22 @@
 // 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 'dart:html';
+
 import 'package:angular2/angular2.dart';
 
 import '../../model/ui/icon.dart';
 
+/// Icons that should be horizontally flipped when the direction is RTL.
+///
+/// Please add to this list as needed.
+const List<String> _flippedIcons = const [
+  'chevron_left',
+  'chevron_right',
+  'navigate_before',
+  'navigate_next',
+];
+
 /// A component that creates a material style icon. Currently only font icons
 /// are supported and
 /// [material-icons-extended](https://www.google.com/design/icons/) is the only
@@ -21,11 +33,18 @@ import '../../model/ui/icon.dart';
 /// <link rel="stylesheet" type="text/css"
 ///     href="https://fonts.googleapis.com/icon?family=Material+Icons">
 /// ```
+///
+/// Make sure to take RTL into account. Specifically, use the [flip] attribute
+/// if the icon should be flipped for RTL UIs. Read [these
+/// guidelines](https://material.io/guidelines/usability/bidirectionality.html#bidirectionality-rtl-mirroring-guidelines)
+/// for advice on when and when not to flip the icon.
+///
 /// __Attributes:__
 ///
 /// - `size: string {x-small, small, medium, large, x-large}` -- Sizes names for
 ///   the icon, corresponding to 12px, 13px, 16px, 18px, and 20px, respectively.
 ///   If no size is specified, the default of 24px is used.
+/// - `flip` -- Whether the icon should be flipped for RTL languages.
 @Component(
     selector: 'glyph',
     templateUrl: 'glyph.html',
@@ -39,7 +58,15 @@ class GlyphComponent {
   /// [https://www.google.com/design/icons/](https://goo.gl/YKrYlu) for
   /// available icons.
   @Input()
-  var icon;
+  set icon(dynamic value) {
+    _icon = value;
+    if (_flippedIcons.contains(iconName)) {
+      _element.setAttribute('flip', '');
+    }
+  }
+
+  dynamic get icon => _icon;
+  var _icon;
 
   bool get _isIconModel => icon is Icon;
 
@@ -62,6 +89,10 @@ class GlyphComponent {
   bool _useMaterialIconsExtended = true;
 
   bool get useMaterialIconsExtended => _useMaterialIconsExtended;
+
+  final HtmlElement _element;
+
+  GlyphComponent(ElementRef elementRef) : _element = elementRef.nativeElement;
 }
 
 /// Size names which can be used on the glyph icon.

lib/src/components/glyph/glyph.scss.css

@@ -3,4 +3,4 @@
  * 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.
  */
-:host{display:-webkit-inline-flex;display:inline-flex}:host[light]{opacity:0.54}:host[size="x-small"] /deep/ i{font-size:12px;height:1em;line-height:1em;width:1em}:host[size="small"] /deep/ i{font-size:13px;height:1em;line-height:1em;width:1em}:host[size="medium"] /deep/ i{font-size:16px;height:1em;line-height:1em;width:1em}:host[size="large"] /deep/ i{font-size:18px;height:1em;line-height:1em;width:1em}:host[size="x-large"] /deep/ i{font-size:20px;height:1em;line-height:1em;width:1em}
+:host{display:-webkit-inline-flex;display:inline-flex}:host[light]{opacity:0.54}:host[size="x-small"] /deep/ i{font-size:12px;height:1em;line-height:1em;width:1em}:host[size="small"] /deep/ i{font-size:13px;height:1em;line-height:1em;width:1em}:host[size="medium"] /deep/ i{font-size:16px;height:1em;line-height:1em;width:1em}:host[size="large"] /deep/ i{font-size:18px;height:1em;line-height:1em;width:1em}:host[size="x-large"] /deep/ i{font-size:20px;height:1em;line-height:1em;width:1em}:host-context([dir="rtl"])[flip]{transform:scaleX(-1)}

lib/src/components/material_checkbox/material_checkbox.scss.css

@@ -21,6 +21,7 @@ const String materialInputErrorKey = 'material-input-error';
 
 typedef String ValidityCheck(String inputText);
 typedef int CharacterCounter(String inputText);
+typedef Map<String, dynamic> ErrorFn(Map<String, dynamic> errors);
 
 /// Represents which label should be shown in the BottomPanel
 enum BottomPanelState {
@@ -140,6 +141,13 @@ class BaseMaterialInput extends FocusableMixin
     _displayBottomPanel = getBool(value);
   }
 
+  /// A function which takes in an error map, and returns another map, replacing
+  /// errors with human readable text.
+  ///
+  /// WARNING: The API of this mechanism is still in flux and there will be
+  /// breaking changes. Be careful relying on it.
+  ErrorFn errorRenderer;
+
   /// Custom character counter function to be used.
   CharacterCounter characterCounter;
 
@@ -294,6 +302,7 @@ class BaseMaterialInput extends FocusableMixin
     // error map
     if (_cd != null && _cd.control?.errors != null) {
       Map<String, dynamic> errorMap = _cd.control.errors;
+      if (errorRenderer != null) errorMap = errorRenderer(errorMap);
       var stringValue = errorMap.values.firstWhere(
           ((v) => (v is String) && v.isNotEmpty),
           orElse: () => null);

lib/src/components/material_dialog/material_dialog.scss.css

@@ -122,6 +122,7 @@ const String materialInputErrorKey = 'material-input-error';
       'error',
       'errorMsg',
       'label',
+      'errorRenderer',
       'floatingLabel',
       'hintText',
       'showHintOnlyOnFocus',