Update all components (#150)

 * Material Dialog: Support a minimum height.
 * Material Input: Fix disabled color.
 * Material Popup: Additional merges to prepare for final refactoring.
 * Material Tree: Update positioning options and borders.
 * Deprecate LazyEventEmitter and migrate uses to the StreamController model.
 * Remove use of Compass in SASS files.
 * Remove unused alignment parameters.
 * Refactor Angular annotations to inline versions.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,18 @@
+## 0.6.0-beta
+
+> NOTE: This code is considered production quality, but depends on angular:
+> 4.0.0-beta. The alpha tag represents the evolving nature of the AngularDart
+> api, not code quality (4.0.0-beta is used in production Google apps).
+
+ * Material Dialog: Support a minimum height.
+ * Material Input: Fix disabled color.
+ * Material Popup: Additional merges to prepare for final refactoring.
+ * Material Tree: Update positioning options and borders.
+ * Deprecate LazyEventEmitter and migrate uses to the StreamController model.
+ * Remove use of Compass in SASS files.
+ * Remove unused alignment parameters.
+ * Refactor Angular annotations to inline versions.
+
 ## 0.6.0-alpha+3
 
 > NOTE: This code is considered production quality, but depends on angular:

lib/src/components/app_layout/README.md

@@ -75,9 +75,9 @@ Here is an example:
 
 There are three kinds of drawers that are available: _permanent_, _persistent_,
 and _temporary_. All drawers are instantiated by the `material-drawer` element.
-These drawers are implemented differently to provide the best performance
-for each. For the main content outside of the drawer wrap it in a
-`material-content` element, or a element with the class `material-content`.
+These drawers are implemented differently to provide the best performance for
+each. For the main content outside of the drawer wrap it in a `material-content`
+element, or a element with the class `material-content`.
 
 ### Permanent Drawers
 
@@ -98,12 +98,13 @@ CSS. To have a permanent drawer add the `permanent` attribute to the
 
 Persistent drawers are drawers which can be open and closed by an action, such
 as a button trigger. These drawers reposition the content to fit in with the
-flow of the drawer. To use a persistent drawer add the `persistent` attribute
-to the `material-drawer` element, and add the
-`MaterialPersistentDrawerDirective` to the parent's directives list.
+flow of the drawer. To use a persistent drawer add the `persistent` attribute to
+the `material-drawer` element, and add the `MaterialPersistentDrawerDirective`
+to the parent's directives list.
 
 Lastly, connect the open/close drawer action to the drawer. This is most easily
-done using the [reference variable](https://webdev.dartlang.org/angular/guide/template-syntax#!#ref-vars)
+done using the [reference
+variable](https://webdev.dartlang.org/angular/guide/template-syntax#!#ref-vars)
 syntax. The persistent drawer directive exports itself as `drawer` this allows
 it to be used easily by other actions. `toggle()` can be used to open/close the
 drawer. The drawer supports the `deferredConent` directive allowing a developer
@@ -141,8 +142,8 @@ other drawers. To use a temporary drawer add the `temporary` attribute to the
 `material-drawer` element, and add `MaterialTemporaryDrawerComponent` to the
 parent's directive list.
 
-The temporary drawer has an optional `overlay` attribute which can be used
-to show a transparent overlay above non-drawer content while the drawer is open.
+The temporary drawer has an optional `overlay` attribute which can be used to
+show a transparent overlay above non-drawer content while the drawer is open.
 
 Here is an example:
 
@@ -183,10 +184,10 @@ Example:
 
 ### App Bar and Drawer interaction
 
-The app bar and the drawer work in tandem to provide an overal app layout for
-an application. The app bar can live both inside, or outside of
-`material-content`. If it is inside of `material-content` it will live with the
-content and if applicable be repositioned with the content. If it is on top of
+The app bar and the drawer work in tandem to provide an overal app layout for an
+application. The app bar can live both inside, or outside of `material-content`.
+If it is inside of `material-content` it will live with the content and if
+applicable be repositioned with the content. If it is on top of
 `material-content` the drawer and content will be positioned below the app bar
 for the `permanent` and `persistent` drawers.
 

lib/src/components/app_layout/layout.scss

@@ -14,11 +14,10 @@
 /// Styles provided to more easily layout an application.
 /// This includes:
 ///   material-drawer (persistent and permanent)
-@import 'lib/src/css/material/material';
 @import 'lib/src/components/material_shadow/css/shadow';
-@import 'lib/src/components/material_list/mixins';
-
 @import 'material_drawer';
+@import 'lib/src/css/material/material';
+@import 'lib/src/components/material_list/mixins';
 
 $mat-drawer-border: 1px solid $mat-border-light;
 

lib/src/components/app_layout/material_temporary_drawer.scss

@@ -11,19 +11,10 @@
  * to include CSS generation from SASS files during the build process.
  */
 
-@import 'lib/src/css/material/material';
 @import 'lib/src/components/material_shadow/css/shadow';
-
 @import 'material_drawer';
+@import 'lib/src/css/material/material';
 
-// Nested in host to workaround legacy style encapsulation.
-//
-// Without use of :host, Angular will insert more encapsulation classes into the
-// selector, e.g.:
-//   `:host .foo .bar` will become `._nghost-abc-1 .foo .bar`
-//   `.foo .bar` will become `.foo._ngcontent-abc-1 .bar._ngcontent-abc-1`
-// Mixing these two behaviours can change the selector ordering so -- since use
-// of :host is required for some rules -- using :host for all prevents this.
 :host {
   @include fit;
 
@@ -47,7 +38,7 @@
   transition: background-color $mat-transition-mobile-leaving $mat-transition-standard;
 }
 
-:host .drawer-content {
+.drawer-content {
   @include material-drawer-common;
   @include shadow-none;
 

lib/src/components/app_layout/material_temporary_drawer.scss.css

@@ -2,11 +2,11 @@
 // 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:async';
 import 'dart:html';
 
 import 'package:angular/angular.dart';
 
-import '../../utils/async/async.dart';
 import '../../utils/browser/events/events.dart';
 import '../focus/focus.dart';
 import '../mixins/has_tab_index.dart';
@@ -32,8 +32,9 @@ import '../mixins/has_tab_index.dart';
 class ButtonDirective extends RootFocusable with HasTabIndex {
   /// Will emit Event on mouse click or keyboard activation.
   @Output()
-  final LazyEventEmitter<UIEvent> trigger =
-      new LazyEventEmitter<UIEvent>.broadcast();
+  Stream<UIEvent> get trigger => _trigger.stream;
+
+  final _trigger = new StreamController<UIEvent>.broadcast(sync: true);
 
   String _hostTabIndex;
 
@@ -63,15 +64,15 @@ class ButtonDirective extends RootFocusable with HasTabIndex {
   /// Triggers if not disabled.
   void handleClick(MouseEvent mouseEvent) {
     if (disabled) return;
-    trigger.add(mouseEvent);
+    _trigger.add(mouseEvent);
   }
 
   /// Triggers on enter and space if not disabled.
   void handleKeyPress(KeyboardEvent keyboardEvent) {
     if (disabled) return;
     int keyCode = keyboardEvent.keyCode;
     if (keyCode == KeyCode.ENTER || isSpaceKey(keyboardEvent)) {
-      trigger.add(keyboardEvent);
+      _trigger.add(keyboardEvent);
       // Required to prevent window from scrolling.
       keyboardEvent.preventDefault();
     }

lib/src/components/button_decorator/button_decorator.dart

@@ -28,4 +28,5 @@
 [focusContentWrapper] {
   height: inherit;
   max-height: inherit;
+  min-height: inherit;
 }

lib/src/components/focus/focus_trap.scss

@@ -3,5 +3,5 @@
  * 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:block}[focusContentWrapper]{height:inherit;max-height:inherit}
+:host{display:block}[focusContentWrapper]{height:inherit;max-height:inherit;min-height:inherit}
 

lib/src/components/focus/focus_trap.scss.css

@@ -11,8 +11,8 @@
  * to include CSS generation from SASS files during the build process.
  */
 
-@import 'lib/src/css/material/material';
 @import 'mixins';
+@import 'lib/src/css/material/material';
 
 $x-small: $mat-grid-type * 3;  // 12px
 $small: $mat-body-font-size;   // 13px