Add Material List (#49)

 * Material Expansionpanel: Add `autoDismissable` directive.
 * Material Progress: Handle changes to "indeterminate" state.
 * Scorecard: Add input to display vertically.
 * Update styles to meet Material UI spec.
 * Add qualifying remark about alpha status

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.3.1-alpha
+
+This code is considered production quality, but depends on angular2: 3.0.0-alpha.
+The alpha tag represents the evolving nature of the AngularDart api, not
+code quality (3.0.0-alpha is used in production Google apps).
+
+ * Add Material List.
+ * Material Expansionpanel: Add `autoDismissable` directive.
+ * Material Progress: Handle changes to "indeterminate" state.
+ * Scorecard: Add input to display vertically.
+ * Update styles to meet Material UI spec.
+
 ## 0.3.0-alpha
 
 This code is considered production quality, but depends on angular2: 3.0.0-alpha.

README.md

@@ -31,8 +31,9 @@ possible.
 * ✓ `<material-dialog>`
 * ✓ `<material-popup>`
 * ✓ `<material-tooltip>`
-* ☐ `<material-list>`
+* ✓ `<material-list>`
 * ☐ `<material-select>`
+* ☐ `<material-tree>`
 * ☐ `<material-auto-suggest-input>`
 * ☐ `<material-date-range-picker>`
 * ☐ `<material-menu>`

lib/angular2_components.dart

@@ -35,6 +35,8 @@ const List<Type> materialDirectives = const [
   MaterialInkTooltipComponent,
   MaterialInputComponent,
   MaterialInputDefaultValueAccessor,
+  MaterialListComponent,
+  MaterialListItemComponent,
   MaterialMultilineInputComponent,
   MaterialPaperTooltipComponent,
   MaterialPopupComponent,

lib/src/all_components.dart

@@ -33,6 +33,9 @@ export 'components/material_input/material_input.dart'
     hide materialInputErrorKey;
 export 'components/material_input/material_input_default_value_accessor.dart';
 export 'components/material_input/material_input_multiline.dart';
+export 'components/material_list/material_list.dart';
+export 'components/material_list/material_list_item.dart';
+export 'components/material_list/material_list_size.dart';
 export 'components/material_popup/material_popup.dart';
 export 'components/material_progress/material_progress.dart';
 export 'components/material_radio/material_radio.dart';
@@ -59,3 +62,4 @@ export 'laminate/components/modal/modal.dart';
 export 'laminate/overlay/module.dart';
 export 'laminate/popup/module.dart';
 export 'laminate/popup/popup.dart';
+export 'model/selection/selection_model.dart';

lib/src/components/material_expansionpanel/src/material_expansionpanel_auto_dismiss.dart

@@ -0,0 +1,101 @@
+// 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.
+
+import 'dart:async';
+import 'dart:html';
+
+import 'package:angular2/angular2.dart';
+
+import '../material_expansionpanel.dart';
+import '../../../laminate/overlay/module.dart'
+    show overlayContainerToken;
+
+/// A directive that automatically collapses [MaterialExpansionPanel].
+///
+/// When a [MaterialExpansionPanel] is expanded, any click outside of it will
+/// automatically collapses the panel.
+///
+/// __Example Usage:__
+///
+///     <material-expansionpanel autoDismissable>
+///     </material-expansionpanel>
+///
+@Directive(
+    selector: 'material-expansionpanel[autoDismissable]',
+    host: const {'(expandedChange)': r'onExpandedChanged($event)'})
+class MaterialExpansionPanelAutoDismiss implements OnDestroy {
+  final MaterialExpansionPanel _expansionPanel;
+
+  /// The root node that all spawned elements will belong to.
+  ///
+  /// E.g. modal, dialog, popups.
+  final Element _overlayContainerToken;
+  final ElementRef _element;
+
+  StreamController<Event> _clicksOutsideController;
+  StreamSubscription<Event> _clicksOutsideSubscription;
+  StreamSubscription<MouseEvent> _mouseUpListener;
+
+  MaterialExpansionPanelAutoDismiss(
+      this._expansionPanel,
+      @Optional() @Inject(overlayContainerToken) this._overlayContainerToken,
+      this._element) {
+    _clicksOutsideController = new StreamController.broadcast(
+        sync: true,
+        onListen: () {
+          _mouseUpListener = document.onMouseUp.listen(_onMouseUp);
+        },
+        onCancel: () {
+          _mouseUpListener.cancel();
+          _mouseUpListener = null;
+        });
+  }
+
+  /// Handles expanded status changes from the panel.
+  void onExpandedChanged(bool expand) {
+    _clicksOutsideSubscription?.cancel();
+    if (expand) {
+      _clicksOutsideSubscription = _clicksOutsideController.stream
+          .listen((e) => _expansionPanel.collapse(byUserAction: false));
+    }
+  }
+
+  @override
+  void ngOnDestroy() {
+    _clicksOutsideSubscription?.cancel();
+  }
+
+  void _onMouseUp(MouseEvent e) {
+    var node = e.target as Element;
+    while (node != null) {
+      var tagName = node.tagName.toLowerCase();
+      if (node == this._element.nativeElement) {
+        // Excludes elements belonging to this panel.
+        return;
+      } else if (node == _overlayContainerToken) {
+        // Excludes elements spawned by portals.
+        return;
+      } else if (tagName == 'body') {
+        // Fires for these elements that can reach the 'body'.
+        //
+        // Choosing 'body' but not 'html' is because we want to exclude
+        // browser scroll-bars which are direct children of 'html'.
+        _clicksOutsideController.add(e);
+        return;
+      } else if (tagName == 'material-button' ||
+          tagName == 'dropdown-button' ||
+          tagName == 'input' ||
+          tagName == 'a') {
+        // Excludes any clickable elements.
+        return;
+      }
+      node = node.parent;
+    }
+    // Treats clicks on dangling elements as inside the panel.
+    //
+    // E.g. clicks on the header of [MaterialExpansionPanel] with
+    // 'hideExpandedHeader' set to true would result in the header being
+    // removed from DOM immediately.
+  }
+}

lib/src/components/material_list/material_list.dart

@@ -0,0 +1,91 @@
+// 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.
+
+import 'package:angular2/angular2.dart';
+
+import '../../model/ui/accepts_width.dart';
+import '../../utils/angular/properties/properties.dart';
+import 'material_list_size.dart';
+export 'material_list_size.dart';
+
+/// Material List is a container component for a set of items with which the
+/// user is intended to interact.
+///
+/// It forms the basis for selection and menu components.
+/// The `MaterialListComponent` class acts as the root node for a list
+/// providing styling and the ability to collect item events.
+///
+///
+/// __Example usage:__
+///     <material-list size="medium">
+///       <material-list-item>Item 1</material-list-item>
+///       <material-list-item>Item 2/material-list-item>
+///     </material-list>
+///
+/// ## List Item Grouping
+///
+/// Wrap `material-list-item` elements in a container with attribute
+/// `group` for a divider line between other groupings.
+///
+///     <material-list>
+///       <div group>
+///         <material-list-item>Item</material-list-item>
+///         <material-list-item>Item</material-list-item>
+///         <material-list-item>Item</material-list-item>
+///       </div>
+///       <material-list-item>Item</material-list-item>
+///       <material-list-item>Item</material-list-item>
+///       <div group>
+///         <material-list-item>Item</material-list-item>
+///         <material-list-item>Item</material-list-item>
+///         <material-list-item>Item</material-list-item>
+///       </div>
+///     <material-list>
+///
+/// ## List Item Group Labels
+///
+/// Denote the label for a list item group using the `label` attribute.
+///
+///     <material-list>
+///       <div group>
+///         <div label>My Menu Group</div>
+///         <material-list-item>Item</material-list-item>
+///         <material-list-item>Item</material-list-item>
+///         <material-list-item>Item</material-list-item>
+///       </div>
+///     </material-list>
+///
+/// __Attributes:__
+///
+/// - `size: string {x-small, small, medium, large, x-large}` Sizes for the
+///   list, resulting in the width being 64px * {1.5, 3, 5, 6, 7} respectively.
+///   The default size is "auto" which sizes the list to its contents.
+/// - `min-size: string {x-small, small, medium, large, x-large}` Minimum size
+///   for the list, resulting in the width at least the specified width.
+@Component(
+    selector: 'material-list',
+    styleUrls: const ['material_list.scss.css'],
+    directives: const [NgClass],
+    host: const {'[attr.size]': 'size'},
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush)
+class MaterialListComponent implements AcceptsWidth {
+  @Input()
+  String size = MaterialListSize.auto;
+
+  /// Preset width, 1 through 5. By default, the material list will expand to
+  /// the full width of its parent. Note: The spec clearly lays out predefined
+  /// list sizes so use the default, expanding size, sparingly.
+  /// Each width multiplies the base block width (64px on desktop and tablet) by
+  /// [1.5, 3, 5, 6, 7], respectively to obtain a predictable width.
+  /// Set to 0 to have the list expand to the full width of its parent.
+  @Deprecated('Use size attribute instead.')
+  @Input()
+  set width(val) {
+    val = getInt(val);
+    if (val >= 0 && val < MaterialListSize.values.length) {
+      size = MaterialListSize.values[val];
+    }
+  }
+}

lib/src/components/material_list/material_list.scss.css

@@ -0,0 +1,118 @@
+// 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.
+
+import 'dart:html' as dom;
+
+import 'package:angular2/angular2.dart';
+
+import '../button_decorator/button_decorator.dart';
+import '../mixins/has_tab_index.dart';
+import '../mixins/material_dropdown_base.dart';
+import '../../model/a11y/active_item_mixin.dart';
+import '../../utils/angular/properties/properties.dart';
+import '../../utils/browser/dom_service/dom_service.dart';
+import '../../utils/disposer/disposer.dart';
+
+/// Material List Item is a block element intended for user interaction; it has
+/// `:hover` styling and emits and `trigger` event when the user clicks or
+/// presses `enter` or `space` keys.
+///
+/// See [MaterialListComponent] for item **grouping** and **labelling**.
+///
+/// Note: If the material-list-item has a [DropdownHandle] in its ancestry, the
+/// dropdown will be closed on triggering (i.e. clicking or pressing enter/space
+/// on) the list item if [closeOnActivate] is true.
+///
+/// __Example usage:__
+///
+///     <material-list>
+///       <material-list-item (trigger)="select(1)">Item 1</material-list-item>
+///       <material-list-item (trigger)="select(2)">Item 2/material-list-item>
+///     </material-list>
+///
+/// __Properties:__
+///
+/// - `disabled:bool` -- disables the trigger and gives item a disabled style.
+/// - `active:bool` -- marks item as active from keyboard selection.
+/// - `closeOnActivate:bool` -- causes dropdown to be closed on activation.
+///   True by default.
+///
+/// __Events:__
+///
+/// - `trigger:MouseEvent|KeyboardEvent` -- fired when either mouse is clicked
+///   or __enter__ or __space__ keys are pressed.
+///
+// TODO(google): should activate/deactive on mouse hover
+@Component(
+    selector: 'material-list-item',
+    inputs: const [
+      'disabled',
+      'active', // from ActiveItemMixin
+    ],
+    outputs: const ['trigger'],
+    host: const {
+      'class': 'item',
+      '[class.active]': 'active',
+      '[class.disabled]': 'disabled',
+      '(click)': r'handleClick($event)',
+      '(keypress)': r'handleKeyPress($event)',
+      '[attr.aria-disabled]': 'disabledStr',
+      '[attr.tabindex]': 'tabIndex',
+      '(mouseenter)': 'onMouseEnter()',
+      '(mouseleave)': 'onMouseLeave()',
+      '[attr.role]': 'role != null ? role : "button"'
+    },
+    styleUrls: const ['material_list_item.scss.css'],
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush)
+class MaterialListItemComponent extends ButtonDirective
+    with HasTabIndex, ActiveItemMixin
+    implements OnDestroy {
+  final _disposer = new Disposer.oneShot();
+  final DropdownHandle _dropdown;
+  final String role;
+
+  final String _hostTabIndex;
+
+  @override
+  String get hostTabIndex => _hostTabIndex;
+
+  @override
+  dom.HtmlElement element;
+
+  @override
+  DomService domService;
+
+  MaterialListItemComponent(
+      ElementRef elementRef,
+      this.domService,
+      @Optional() this._dropdown,
+      @Attribute('tabindex') this._hostTabIndex,
+      @Attribute('role') this.role)
+      : super(elementRef) {
+    if (_dropdown != null) {
+      _disposer.addDisposable(trigger.listen(handleActivate));
+    }
+    this.element = elementRef.nativeElement;
+  }
+
+  bool _closeOnActivate = true;
+
+  /// Whether the encompassing dropdown should be close on selecting
+  /// this item.
+  bool get closeOnActivate => _closeOnActivate;
+  @Input()
+  set closeOnActivate(value) {
+    _closeOnActivate = getBool(value);
+  }
+
+  @override
+  void ngOnDestroy() {
+    _disposer.dispose();
+  }
+
+  void handleActivate(dom.UIEvent _) {
+    if (closeOnActivate) _dropdown?.close();
+  }
+}

lib/src/components/material_list/material_list_item.dart

@@ -0,0 +1,16 @@
+// 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.
+
+/// Size names (and corresponding values) for the standard widths of
+/// `material-list`.
+class MaterialListSize {
+  static const String auto = 'auto';
+  static const String xSmall = 'x-small';
+  static const String small = 'small';
+  static const String medium = 'medium';
+  static const String large = 'large';
+  static const String xLarge = 'x-large';
+  static List<String> get values =>
+      const <String>[auto, xSmall, small, medium, large, xLarge];
+}