Add Material Tree component (#104)

 * Material Dialog: Add `shouldShowScrollStrokes` option for displaying
   stroke lines when the content is scrollable.
 * Material Dropdown Select: Avoid checking isSelected with deselectLabel.
 * Material Input: UpperBoundsValidator, and LowerBoundsValidator now use
   `Comparable` instead of `num`.
 * Material Popup: Use the real viewport (aka window) size.
 * Scorecard: Add `ng-content` area for a description.
 * Adjust positioning algorithm to account for scrolling within elements.
 * Migrate use of LazyEventController to StreamController.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.5.3
+
+ * Add Material Tree component.
+ * Material Dialog: Add `shouldShowScrollStrokes` option for displaying
+   stroke lines when the content is scrollable.
+ * Material Dropdown Select: Avoid checking isSelected with deselectLabel.
+ * Material Input: UpperBoundsValidator, and LowerBoundsValidator now use
+   `Comparable` instead of `num`.
+ * Material Popup: Use the real viewport (aka window) size.
+ * Scorecard: Add `ng-content` area for a description.
+ * Adjust positioning algorithm to account for scrolling within elements.
+ * Migrate use of LazyEventController to StreamController.
+
 ## 0.5.2
 
  * Material Progress: Cleanup animations on destroy to prevent memory leaks.
@@ -15,7 +28,7 @@
  * Add string selection sanitizing options.
  * Remove `NoopStream` in favor of `Stream.empty()` as provided by the SDK.
  * Migrate use of LazyEventController to StreamController.
- * Fix bug in lazy group creation that would cause multiple groups to be 
+ * Fix bug in lazy group creation that would cause multiple groups to be
    created.
  * Strong mode fixes.
 

README.md

@@ -31,7 +31,7 @@ developers to be able to use the package as soon as possible.
 * ✓ `<material-tooltip>`
 * ✓ `<material-list>`
 * ✓ `<material-select>`
-* ☐ `<material-tree>`
+* ✓ `<material-tree>`
 * ☐ `<material-auto-suggest-input>`
 * ☐ `<material-date-range-picker>`
 * ☐ `<material-menu>`

lib/src/all_components.dart

@@ -66,6 +66,7 @@ export 'components/material_tab/tab_mixin.dart';
 export 'components/material_toggle/material_toggle.dart';
 export 'components/material_tooltip/material_tooltip.dart';
 export 'components/material_tooltip/module.dart';
+export 'components/material_tree/material_tree.dart';
 export 'components/material_yes_no_buttons/material_yes_no_buttons.dart';
 export 'components/mixins/button_wrapper.dart';
 export 'components/mixins/focusable_mixin.dart';
@@ -83,9 +84,11 @@ export 'laminate/enums/alignment.dart';
 export 'laminate/overlay/module.dart';
 export 'laminate/popup/module.dart';
 export 'laminate/popup/popup.dart';
+export 'model/selection/select.dart';
 export 'model/selection/selection_model.dart';
 export 'model/selection/selection_options.dart';
 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 'utils/async/async.dart';

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

@@ -112,6 +112,7 @@ class MaterialDialogComponent implements AfterContentChecked, OnDestroy {
   HtmlElement _mainElement;
   bool _shouldShowHeader = true;
   bool _shouldShowFooter = true;
+  bool _shouldShowScrollStrokes = true;
   bool shouldShowTopScrollStroke = false;
   bool shouldShowBottomScrollStroke = false;
 
@@ -142,9 +143,14 @@ class MaterialDialogComponent implements AfterContentChecked, OnDestroy {
 
   bool get shouldShowFooter => _shouldShowFooter;
 
+  @Input()
+  set shouldShowScrollStrokes(shouldShowScrollStrokes) =>
+      _shouldShowScrollStrokes = getBool(shouldShowScrollStrokes);
+
   void onScroll() => _setHeaderFooterScrollBorder();
 
   void _setHeaderFooterScrollBorder() {
+    if (!_shouldShowScrollStrokes) return;
     _disposer.addDisposable(_domService.scheduleRead(() {
       var shouldShowTopScrollStroke =
           _mainElement.scrollTop > 0 && error == null;

lib/src/components/material_dialog/material_dialog.dart

@@ -68,9 +68,8 @@ class LowerBoundValidator implements Validator {
   @override
   Map<String, dynamic> validate(AbstractControl control) {
     if (control.value == null || lowerBound == null) return null;
-    assert(control.value is num); // Should be using number accessor
-    final value = control.value as num;
-    if (value < lowerBound) {
+    assert(control.value is Comparable, 'Value needs to be Comparable');
+    if (control.value < lowerBound) {
       return {numberBelowLowerBoundErrorKey: numberIsTooSmallMsg(lowerBound)};
     }
     return null;
@@ -95,9 +94,8 @@ class UpperBoundValidator implements Validator {
   @override
   Map<String, dynamic> validate(AbstractControl control) {
     if (control.value == null) return null; // Handled by accessor validator
-    assert(control.value is num); // Should be using number accessor
-    final value = control.value as num;
-    if (value > upperBound) {
+    assert(control.value is Comparable, 'Value needs to be Comparable');
+    if (control.value > upperBound) {
       return {numberAboveUpperBoundErrorKey: numberIsTooLargeMsg(upperBound)};
     }
     return null;

lib/src/components/material_input/material_number_validators.dart

@@ -3,6 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:html';
 import 'dart:math';
 
 import 'package:angular2/angular2.dart';
@@ -13,7 +14,6 @@ import '../../laminate/overlay/overlay.dart';
 import '../../laminate/popup/popup.dart'
     show PopupEvent, PopupRef, PopupService, PopupSizeProvider;
 import '../../utils/angular/properties/properties.dart';
-import '../../utils/async/async.dart';
 import '../../utils/browser/dom_service/dom_service.dart';
 import '../content/deferred_content_aware.dart';
 import '../mixins/material_dropdown_base.dart';
@@ -97,12 +97,8 @@ export '../../laminate/popup/popup.dart' show PopupSourceDirective;
       'z'
     ],
     outputs: const [
-      'onAnimationComplete: animationComplete',
       'onOpen: open',
-      // TODO(google): See if we can refactor this out (from old component).
-      'onOpened: opened',
       'onClose: close',
-      'visibleChange',
     ],
     providers: const [
       const Provider(PopupComponent, useExisting: MaterialPopupComponent),
@@ -125,10 +121,15 @@ class MaterialPopupComponent extends PopupComponent
   // Visible for testing.
   static const Duration SLIDE_DELAY = const Duration(milliseconds: 218);
 
-  final LazyEventEmitter onAnimationComplete = new LazyEventEmitter();
-  final LazyEventEmitter onOpened = new LazyEventEmitter();
-  final LazyEventEmitter<bool> _onContentVisible =
-      new LazyEventEmitter<bool>.broadcast();
+  @Output('animationComplete')
+  Stream get onAnimationComplete => _onAnimationComplete.stream;
+  final StreamController _onAnimationComplete =
+      new StreamController.broadcast(sync: true);
+  @Output('opened')
+  Stream get onOpened => _onOpened.stream;
+  final StreamController _onOpened = new StreamController.broadcast(sync: true);
+  final StreamController<bool> _onContentVisible =
+      new StreamController<bool>.broadcast(sync: true);
   final ChangeDetectorRef _changeDetector;
 
   // Used to have a maximum of one timer to wait for CSS animations.
@@ -169,6 +170,7 @@ class MaterialPopupComponent extends PopupComponent
   int z = 2;
 
   /// Output stream that supports [(visible)] syntax.
+  @Output()
   Stream<bool> get visibleChange => onVisible;
 
   /// The CSS transform origin based on configuration.
@@ -250,7 +252,7 @@ class MaterialPopupComponent extends PopupComponent
             changeDetector, elementRef);
 
   @override
-  Stream<bool> get contentVisible => _onContentVisible.distinct();
+  Stream<bool> get contentVisible => _onContentVisible.stream.distinct();
 
   // Returns a future that completes after a short duration that an animation
   // may occur (in this case, via CSS). If a pending animation is already in
@@ -270,7 +272,7 @@ class MaterialPopupComponent extends PopupComponent
         _animationTimer = null;
         _onAnimationCompleter = null;
         completer.complete();
-        onAnimationComplete.add(null);
+        _onAnimationComplete.add(null);
         _changeDetector.markForCheck();
       });
     }
@@ -344,15 +346,15 @@ class MaterialPopupComponent extends PopupComponent
       _animateContentSize();
       _afterAnimationDelay().then((_) {
         _resetContentSize();
-        onOpened.add(null);
+        _onOpened.add(null);
       });
     });
   }
 
   void _noAnimationPopupOpen() {
     showPopup = true;
     _resetContentSize();
-    onOpened.add(null);
+    _onOpened.add(null);
   }
 
   void _nextFrame(void fn()) {
@@ -373,7 +375,8 @@ class MaterialPopupComponent extends PopupComponent
     // Initializes the maximum size and content size based on the viewport size
     // before popup position is populated.
     if (_popupSizeProvider != null) {
-      _viewportSize = await _overlayService.measureContainer();
+      _viewportSize =
+          new Rectangle(0, 0, window.innerWidth, window.innerHeight);
       contentHeight =
           maxHeight = _popupSizeProvider.getMaxHeight(0, _viewportSize.height);
       contentWidth =

lib/src/components/material_popup/material_popup.dart

@@ -249,6 +249,7 @@ class MaterialDropdownSelectComponent extends MaterialSelectBase
     if (selection == null || selection.selectedValues.isEmpty) {
       activeModel.activate(null);
     } else if (activeModel.activeItem == null ||
+        (showDeselectItem && activeModel.activeItem == deselectLabel) ||
         !selection.isSelected(activeModel.activeItem)) {
       // If the current active item is not selected, activate the first selected
       // item.

lib/src/components/material_select/material_dropdown_select.dart

@@ -27,6 +27,10 @@ class TabChangeEvent {
     defaultPrevented = true;
   }
 
+  /// Returns whether the event is to or from a de-emphasized tab.
+  bool get isDeEmphasizedTabChange =>
+      oldSubIndex != noSelectionIndex || newSubIndex != noSelectionIndex;
+
   @override
   String toString() =>
       'TabChangeEvent: [$oldIndex:$oldSubIndex] => [$newIndex:$newSubIndex]';

lib/src/components/material_tab/tab_change_event.dart

@@ -0,0 +1,7 @@
+// 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.
+
+export 'src/group/material_tree_group.dart' show materialTreeLeftPaddingToken;
+export 'src/material_tree_dropdown.dart';
+export 'src/material_tree_impl.dart';