Update all components (#158)

* Material Button: Add raised mixin so that buttons can be made to be raised 
   without using the attribute.
 * Material Expansionpanel: Add header minimum height mixin.
 * Material Input: Add support for custom number formatters.
 * Material Popup:
   * Remove `PopupEvent` and reduce asynchrony.
   * Update PopupSizeProvider max-width/height once the popup has been
     positioned.
   * Remove unused `contenWidth` and `contentHeight`.
 * Material Radio: Avoid selecting null when the new selected value is not found
   in the options.
 * Material Tab:
   * Fix logic for the active tab when tabs themselves are changed. Before logic
     was activating/deactivating based on index, but when tabs change the index
     has probably changed.
   * Make mixin to allow text wrapping.
 * Material Tree:
   * Fix bug where state of material tree option cannot be changed by selection
     model.
   * Fix bug where tree_dropdown_select did not auto open correctly using focus.
 * Scorecard: Update colors to match material spec.
 * Deprecate obsolete box-sizing style mixin.
 * Add link color styles and mixin.
 * Add typography style mixins.
 * Set preserveWhitespace: true in preparation for angular flipping the default
   to false.
 * Make functional directive name lowercase to conform with Dart style guide.
 * Replaces deprecated inputs and outputs with inline annotations.
 * Update visibility for provider resolution fix.
 * Update documentation.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,40 @@
+## 0.7.0
+ 
+ * Material Button: Add raised mixin so that buttons can be made to be raised 
+   without using the attribute.
+ * Material Expansionpanel: Add header minimum height mixin.
+ * Material Input: Add support for custom number formatters.
+ * Material Popup:
+   * Remove `PopupEvent` and reduce asynchrony.
+   * Update PopupSizeProvider max-width/height once the popup has been
+     positioned.
+   * Remove unused `contenWidth` and `contentHeight`.
+ * Material Radio: Avoid selecting null when the new selected value is not found
+   in the options.
+ * Material Tab:
+   * Fix logic for the active tab when tabs themselves are changed. Before logic
+     was activating/deactivating based on index, but when tabs change the index
+     has probably changed.
+   * Make mixin to allow text wrapping.
+ * Material Tree:
+   * Fix bug where state of material tree option cannot be changed by selection
+     model.
+   * Fix bug where tree_dropdown_select did not auto open correctly using focus.
+ * Scorecard: Update colors to match material spec.
+ * Deprecate obsolete box-sizing style mixin.
+ * Add link color styles and mixin.
+ * Add typography style mixins.
+ * Set preserveWhitespace: true in preparation for angular flipping the default
+   to false.
+ * Make functional directive name lowercase to conform with Dart style guide.
+ * Replaces deprecated inputs and outputs with inline annotations.
+ * Update visibility for provider resolution fix.
+ * Update documentation.
+
+### Known Issues
+ * Warnings are present when building with dart2js. Specifically:
+   _Method type variables are treated as `dynamic` in `as` expressions._
+
 ## 0.6.0
 
  * Update dependency to angular: ^4.0.0.

lib/angular_components.dart

@@ -18,7 +18,7 @@ const List<dynamic> materialDirectives = const [
   ClickableTooltipTargetDirective,
   DarkThemeDirective,
   DeferredContentDirective,
-  DisplayNameRendererDirective,
+  displayNameRendererDirective,
   FixedMaterialTabStripComponent,
   FocusActivableItemDirective,
   FocusItemDirective,

lib/src/components/app_layout/README.md

@@ -10,8 +10,8 @@ the material spec.
 ## Setup
 
 The styles are provided by
-`package:angular_components/src/components/app_layout/layout.scss.css`. To use 
-these styles in an angular component simply add it as a `styleUrls` value in 
+`package:angular_components/src/components/app_layout/layout.scss.css`. To use
+these styles in an angular component simply add it as a `styleUrls` value in
 your `Component` annotation. It is suggested that the style is added before any
 component specific styling so you can easily override style values as needed.
 
@@ -215,5 +215,52 @@ Example:
 </material-content>
 ```
 
-<!-- TODO(tsander): Add documentation for navigation. Add images for examples
--->
+## Navigation Styles
+
+Navigation element styles within the drawer are also provided by app_layout.
+This is accomplished using the standard `material-list` component, and some
+special CSS classes.
+
+The top level drawer content should be a `MaterialListComponent` with optional
+group elements which are specified by the `group` attribute on an element.
+
+The `mat-drawer-spacer` CSS class is optional and ensures that if the header is
+inside of `material-content` then the drawer content will start at the bottom of
+the header.
+
+Use `MaterialListItemComponent`s for the items in your drawer. For each group if
+you need a label on the group use the `label` attribute on a block element
+directly inside of your group element.
+
+Here is an example:
+
+```html
+<material-drawer permanent>
+  <material-list *deferredContent>
+    <!-- Position the start of the drawer content correctly -->
+    <div group class="mat-drawer-spacer"></div>
+    <!-- Here is a group without a label -->
+    <div group>
+      <material-list-item>
+        <material-icon icon="inbox"></material-icon>Inbox
+      </material-list-item>
+      <material-list-item>
+        <material-icon icon="star"></material-icon>Star
+      </material-list-item>
+      <material-list-item>
+        <material-icon icon="send"></material-icon>Sent Mail
+      </material-list-item>
+      <material-list-item>
+        <material-icon icon="drafts"></material-icon>Drafts
+      </material-list-item>
+    </div>
+    <!-- This group has a label -->
+    <div group>
+      <div label>Tags</div>
+      <material-list-item>
+        <material-icon icon="star"></material-icon>Favorites
+      </material-list-item>
+    </div>
+  </material-list>
+</material-drawer>
+```

lib/src/components/dynamic_component/dynamic_component.dart

@@ -22,8 +22,11 @@ import '../../utils/async/async.dart';
 ///       </dynamic-component>
 ///
 @Component(
-    selector: 'dynamic-component',
-    template: '''<template #marker></template>''')
+  selector: 'dynamic-component',
+  template: '''<template #marker></template>''',
+  // TODO(google): Change preserveWhitespace to false to improve codesize.
+  preserveWhitespace: true,
+)
 class DynamicComponent implements OnDestroy {
   final SlowComponentLoader _slowComponentLoader;
   final ComponentLoader _componentLoader;

lib/src/components/material_button/_mixins.scss

@@ -221,7 +221,9 @@ $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest);
     background-color: $background-color;
   }
 
-  ::ng-deep #{$selector}:not([disabled]):hover {
+  // Not selectors are used for specificity. Default hover selector is very
+  // specific add a psuedo not value to overide default specificity.
+  ::ng-deep #{$selector}:not([disabled]):not([icon]):not([raised]):not(.xyzxyz):hover {
     background-color: $background-color;
   }
 }
@@ -248,3 +250,27 @@ $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest);
     }
   }
 }
+
+/// Mixin to create a raised button taking an optional color of the button.
+///
+/// Should be scopped to the specific button needed to make raised.
+///   Example:
+///   ```Sass
+///   material-button.my-raised {
+///     @include raised-button($mat-blue);
+///   }
+///   ```
+@mixin raised-button($color: null) {
+  ::ng-deep & {
+    @include _button-raised;
+  }
+
+  @if $color {
+    @include button-background-color('&', $color);
+    @include button-color('&', $mat-white);
+  } @else {
+    // Specifically set raised buttons to transparent. This ensures hover,
+    // and other colors are correct.
+    @include button-background-color('&', transparent);
+  }
+}

lib/src/components/material_button/material_fab.dart

@@ -62,7 +62,8 @@ import 'material_button_base.dart';
     preserveWhitespace: false,
     templateUrl: 'material_button.html',
     styleUrls: const ['material_fab.scss.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush)
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    visibility: Visibility.none)
 class MaterialFabComponent extends MaterialButtonBase {
   final ChangeDetectorRef _changeDetector;
   MaterialFabComponent(HtmlElement element, this._changeDetector)

lib/src/components/material_chips/material_chip.dart

@@ -44,7 +44,8 @@ import '../focus/focus.dart';
     templateUrl: 'material_chip.html',
     styleUrls: const ['material_chip.scss.css'],
     directives: const [ButtonDirective, NgIf],
-    changeDetection: ChangeDetectionStrategy.OnPush)
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    visibility: Visibility.none)
 class MaterialChipComponent extends RootFocusable implements HasRenderer {
   MaterialChipComponent(Element root) : super(root);
 

lib/src/components/material_chips/material_chips.dart

@@ -40,7 +40,8 @@ import './material_chip.dart';
     templateUrl: 'material_chips.html',
     styleUrls: const ['material_chips.scss.css'],
     directives: const [MaterialChipComponent, NgFor],
-    changeDetection: ChangeDetectionStrategy.OnPush)
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    visibility: Visibility.none)
 class MaterialChipsComponent implements HasRenderer, OnDestroy {
   final ChangeDetectorRef _changeDetector;
   final Disposer _disposer = new Disposer.multi();

lib/src/components/material_expansionpanel/_mixins.scss

@@ -138,6 +138,18 @@ $_panel: 'div.panel.themeable';
   }
 }
 
+@mixin expansionpanel-header-min-height($min-height, $open-min-height) {
+  ::ng-deep #{$_panel} {
+    header {
+      min-height: $min-height;
+    }
+
+    &.open > header {
+      min-height: $open-min-height;
+    }
+  }
+}
+
 @mixin expansionpanel-header-padding($padding) {
   ::ng-deep #{$_panel} > header {
     padding: $padding;

lib/src/components/material_icon/material_icon.dart

@@ -64,7 +64,8 @@ const List<String> _flippedIcons = const [
     templateUrl: 'material_icon.html',
     styleUrls: const ['material_icon.scss.css'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    preserveWhitespace: false)
+    preserveWhitespace: false,
+    visibility: Visibility.none)
 class MaterialIconComponent {
   /// The `Icon` model (lib/src/model/ui/icon.dart) or icon
   /// identifier (String) this component should display.