Update all components (#129)

 * Add Material Icon.
 * Deprecate `GlyphComponent` in favor of `MaterialIconComponent`.
 * Update dependency to angular: 4.0.0-alpha+1.
 * Material Checkbox: Add mixin for checkbox with no left margin.
 * Material Chips: Add ability to specify background color for left icon.
 * Material Expansionpanel: Add mixin to allow changes to panels without
   affecting nested panels.
 * Material Input:
   * Add upper and lower bounds validators.
   * Re-calculate text length when custom character counter is set.
   * Prevent mirror-text overflow in multiline material input.
   * Remove unnecessary selector argument from mixins.
 * Material Popup: Only set content removed if the popup is still not visible
   when the timer is finished.
 * Material Radio:
   * Add mixin for radio button with no left margin.
   * Fix mixin to respect disabled status when a theme is applied.
 * Material Select:
   * Fix `MaterialSelectItemComponent` to not cache the label.
   * Add input to material-dropdown-select to define custom a renderer for group
     labels.
   * Fix checkbox display handling and label padding in dropdown.
 * Material Toggle: Set the attribute instead of the property to fix a bug with
   incorrect type, and not setting the right property.
 * Material Tree:
   * Add ability to preserve expansion state.
   * Fix indentation of first child group.
   * Add input `showDisabledCheckboxes`.
   * Add a max-height mixin.
 * Reorder List:
   * Update to recommended syntax for ngFor.
   * Migrate from ManagedZone to NgZone.
 * Scorecard:
   * Replace deprecated Glyph with Material Icon.
   * Invoke inherited click handler from derived click handler.
 * Avoid adding placeholder for deferred content if the element is detached.
 * Selection Models:
   * Add deselect all option.
   * Add a limited filtering model.
   * Fix `selectAll` to only trigger a selection change event for the values
     that were added.
   * Add comparator as optional param to tree selection options for custom
     sorting.
 * Updates to use metadata inheritance.
 * Migrate away from comment-style generic syntax.
 * Migrate stylesheet combinators `/deep/` and `>>>` to `::ng-deep`.
 * Migrate away from use of angular's `@View`.
 * Update animations to new Material specs.
 * Update documentation.
 * Remove unused library statements.

Author: nshahan

CHANGELOG.md

@@ -1,12 +1,69 @@
-## 0.6.0-alpha 
-    
-   This code is considered production quality, but depends on angular: 
-   4.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart 
-   api, not code quality (4.0.0-alpha is used in production Google apps). 
-    
+## 0.6.0-alpha+1
+
+> NOTE: This code is considered production quality, but depends on angular:
+> 4.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart
+> api, not code quality (4.0.0-alpha is used in production Google apps).
+
+ * Add Material Icon.
+ * Deprecate `GlyphComponent` in favor of `MaterialIconComponent`.
+ * Update dependency to angular: 4.0.0-alpha+1.
+ * Material Checkbox: Add mixin for checkbox with no left margin.
+ * Material Chips: Add ability to specify background color for left icon.
+ * Material Expansionpanel: Add mixin to allow changes to panels without
+   affecting nested panels.
+ * Material Input:
+   * Add upper and lower bounds validators.
+   * Re-calculate text length when custom character counter is set.
+   * Prevent mirror-text overflow in multiline material input.
+   * Remove unnecessary selector argument from mixins.
+ * Material Popup: Only set content removed if the popup is still not visible
+   when the timer is finished.
+ * Material Radio:
+   * Add mixin for radio button with no left margin.
+   * Fix mixin to respect disabled status when a theme is applied.
+ * Material Select:
+   * Fix `MaterialSelectItemComponent` to not cache the label.
+   * Add input to material-dropdown-select to define custom a renderer for group
+     labels.
+   * Fix checkbox display handling and label padding in dropdown.
+ * Material Toggle: Set the attribute instead of the property to fix a bug with
+   incorrect type, and not setting the right property.
+ * Material Tree:
+   * Add ability to preserve expansion state.
+   * Fix indentation of first child group.
+   * Add input `showDisabledCheckboxes`.
+   * Add a max-height mixin.
+ * Reorder List:
+   * Update to recommended syntax for ngFor.
+   * Migrate from ManagedZone to NgZone.
+ * Scorecard:
+   * Replace deprecated Glyph with Material Icon.
+   * Invoke inherited click handler from derived click handler.
+ * Avoid adding placeholder for deferred content if the element is detached.
+ * Selection Models:
+   * Add deselect all option.
+   * Add a limited filtering model.
+   * Fix `selectAll` to only trigger a selection change event for the values
+     that were added.
+   * Add comparator as optional param to tree selection options for custom
+     sorting.
+ * Updates to use metadata inheritance.
+ * Migrate away from comment-style generic syntax.
+ * Migrate stylesheet combinators `/deep/` and `>>>` to `::ng-deep`.
+ * Migrate away from use of angular's `@View`.
+ * Update animations to new Material specs.
+ * Update documentation.
+ * Remove unused library statements.
+
+## 0.6.0-alpha
+
+> NOTE: This code is considered production quality, but depends on angular:
+> 4.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart
+> api, not code quality (4.0.0-alpha is used in production Google apps).
+
  * Update dependency to `angular: 4.0.0-alpha`.
  * Update SDK dependencies.
- 
+
 ### Known Issues
  * Warnings are present when building with dart2js. Specifically:
    _Method type variables are treated as `dynamic` in `as` expressions._
@@ -18,8 +75,8 @@
 > corresponding .css files in a separate process. We are working on a solution
 > to include CSS generation from SASS files during the build process.
 
-* Add SASS files.
-* Rename .analysis_options -> analysis_options.yaml
+ * Add SASS files.
+ * Rename .analysis_options -> analysis_options.yaml
 
 ## 0.5.3
 
@@ -37,8 +94,8 @@
 ## 0.5.2
 
  * Material Progress: Cleanup animations on destroy to prevent memory leaks.
- * Material Select: 
-   * Support deselect item in Material dropdown select with single selection 
+ * Material Select:
+   * Support deselect item in Material dropdown select with single selection
      model.
    * Unified template files (deleted material_select_dropdown_item.html).
    * Add support for `Selectable` `SelectionOptions`.

README.md

@@ -1,16 +1,16 @@
 ## Preview Release
 
-These are the AngularDart components that Google uses to build the sophisticated,
-mission-critical apps that bring in much of Google’s revenue.
+These are the AngularDart components that Google uses to build the
+sophisticated, mission-critical apps that bring in much of Google’s revenue.
 
-This productive and stable set of widgets, contributed to by hundreds of Googlers,
-make debugging and deploying your app easier. Strict latency and testing policies
-make these widgets an excellent fit for AngularDart projects.
+This productive and stable set of widgets, contributed to by hundreds of
+Googlers, make debugging and deploying your app easier. Strict latency and
+testing policies make these widgets an excellent fit for AngularDart projects.
 
 Only a small fragment of all the components is available right now. We want
 developers to be able to use the package as soon as possible.
 
-* ✓ `<glyph>`
+* ✓ `<material-icon>`
 * ✓ `<material-button>`
 * ✓ `<material-fab>`
 * ✓ `<material-checkbox>`
@@ -65,6 +65,6 @@ by copying them and importing
 in your SASS files.
 
 
-> NOTE: These .scss files are not used during the build step, but we are planning
-> to add this support. See
+> NOTE: These .scss files are not used during the build step, but we are
+> planning to add this support. See
 > [issue #45](https://github.com/dart-lang/angular_components/issues/45).

lib/src/all_components.dart

@@ -16,6 +16,7 @@ export 'components/focus/focus_item.dart';
 export 'components/focus/focus_list.dart';
 export 'components/focus/focus_trap.dart';
 export 'components/focus/keyboard_only_focus_indicator.dart';
+export 'components/forms/error_renderer.dart';
 export 'components/glyph/glyph.dart';
 export 'components/material_button/material_button.dart';
 export 'components/material_button/material_button_base.dart';
@@ -28,6 +29,7 @@ export 'components/material_dialog/material_dialog.dart';
 export 'components/material_expansionpanel/material_expansionpanel.dart';
 export 'components/material_expansionpanel/material_expansionpanel_auto_dismiss.dart';
 export 'components/material_expansionpanel/material_expansionpanel_set.dart';
+export 'components/material_icon/material_icon.dart';
 export 'components/material_input/base_material_input.dart';
 export 'components/material_input/deferred_validator.dart';
 export 'components/material_input/input_wrapper.dart';
@@ -91,4 +93,5 @@ export 'model/selection/src/interfaces/selectable.dart';
 export 'model/selection/string_selection_options.dart';
 export 'model/ui/display_name.dart';
 export 'model/ui/has_renderer.dart';
+export 'model/ui/icon.dart';
 export 'utils/async/async.dart';

lib/src/components/button_decorator/_mixins.scss

@@ -12,7 +12,7 @@
  */
 
 @mixin disabled-cursor($cursor-style) {
-  /deep/ [buttonDecorator].is-disabled {
+  ::ng-deep [buttonDecorator].is-disabled {
     cursor: $cursor-style;
   }
 }

lib/src/components/button_decorator/button_decorator.dart

@@ -26,7 +26,6 @@ import '../mixins/has_tab_index.dart';
 @Directive(selector: '[buttonDecorator]', host: const {
   '(click)': r'handleClick($event)',
   '(keypress)': r'handleKeyPress($event)',
-  '[tabindex]': 'tabIndex',
   'role': 'button',
   '[attr.aria-disabled]': 'disabledStr',
   '[class.is-disabled]': 'disabled',

lib/src/components/content/deferred_content.dart

@@ -5,9 +5,9 @@
 import 'dart:html';
 
 import 'package:angular/angular.dart';
-
 import '../../utils/angular/properties/properties.dart';
 import '../../utils/disposer/disposer.dart';
+
 import 'deferred_content_aware.dart';
 
 /// When put on an element B, this directive creates B each time the nearest
@@ -73,7 +73,7 @@ class DeferredContentDirective implements OnDestroy {
       if (_preserveDimensions) {
         // Add the placeholder so the parent's size doesn't change.
         var container = _viewContainer.element?.nativeElement;
-        if (container != null) {
+        if (container?.parentNode != null) {
           container.parentNode.insertBefore(_placeholder, container);
         }
       }

lib/src/components/forms/error_renderer.dart

@@ -0,0 +1,21 @@
+// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
+// 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.
+
+/// A function which takes in an error map, and returns another modified errors
+/// map.
+typedef Map<String, dynamic> ErrorFn(Map<String, dynamic> errors);
+
+/// Convience function for replacing multiple errors for Components using the
+/// errorRenderer pattern.
+ErrorFn replaceErrors(Map<String, String> overrides) =>
+    (errors) => _replaceErrorsImpl(overrides, errors);
+
+Map<String, dynamic> _replaceErrorsImpl(
+    Map<String, String> overrides, Map<String, dynamic> errors) {
+  final result = new Map<String, dynamic>.from(errors);
+  for (var error in errors.keys) {
+    if (overrides.containsKey(error)) result[error] = overrides[error];
+  }
+  return result;
+}

lib/src/components/glyph/_mixins.scss

@@ -20,7 +20,7 @@
 /// be more specific to override the default.
 /// Note: The should be scoped to a shimmed selector outside.
 @mixin glyph-size($size) {
-  /deep/ i {
+  ::ng-deep i {
     font-size: $size;
     height: 1em;
     line-height: 1em;
@@ -40,7 +40,7 @@
 /// Note: The selector must select to the `glyph` element.
 /// @Deprecated. Use glyph-size mixin instead.
 @mixin glyph-icon-size($selector, $value) {
-  /deep/ #{$selector} i {
+  ::ng-deep #{$selector} i {
     font-size: $value;
     height: 1em;
     line-height: 1em;

lib/src/components/glyph/glyph.dart

@@ -49,6 +49,7 @@ const List<String> _flippedIcons = const [
 ///   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.
+@Deprecated('Use MaterialIconComponent instead')
 @Component(
     selector: 'glyph',
     templateUrl: 'glyph.html',
@@ -58,7 +59,7 @@ const List<String> _flippedIcons = const [
 class GlyphComponent {
   static const String _materialIconsExtended = 'material-icons-extended';
 
-  /// `Icon` model (/model/ui/icon.dart) or Icon identifier - see
+  /// `Icon` model (lib/src/model/ui/icon.dart) or Icon identifier - see
   /// [https://www.google.com/design/icons/](https://goo.gl/YKrYlu) for
   /// available icons.
   @Input()

lib/src/components/glyph/glyph.scss

@@ -12,7 +12,6 @@
  */
 
 @import 'lib/src/css/material/material';
-@import 'compass/css3/flexbox';
 @import 'mixins';
 
 $x-small: $mat-grid-type * 3;  // 12px