Update all components (#137)

 * Dynamic Component: Add ability to use `ComponentFactory` instead of a `Type`.
 * Material Dialog: Fix header mixin.
 * Material Checkbox: Add ability to make readonly.
 * Material Input: Make local required errors to make controls invalid even when
   the control has not been interacted with.
 * Material Popup: 
   * Add an option to reposition visible popups every frame with
     `trackLayoutChanges`.
   * Merge laminate/components/popup into Material Popup.
 * Material Select: Allow dropdown to display an error while it's closed.
 * Material Tree: 
   * Added shift selection/deselection.
   * Fix glyphs always shown expanded when `expandAll = true`.
 * Material Yes/No Buttons: Add dense style.
 * Scorecard: Update tab index to prevent scroll errors when going through
   buttons with tabs.
 * Add new color utils.
 * Migrate uses of `GlyphComponent` to `MaterialIconComponent`.
 * Migrate uses of `ElementRef` to `Element`.
 * Remove duplicate PopupSourceDirective.
 * Remove deprecated popup `matchSourceWidth` options.
 * Updates to use metadata inheritance.
 * Remove unused library statements.
 * Update documentation.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,34 @@
+## 0.6.0-alpha+2
+
+> NOTE: This code is considered production quality, but depends on angular:
+> 4.0.0-alpha+2. The alpha tag represents the evolving nature of the AngularDart
+> api, not code quality (4.0.0-alpha is used in production Google apps).
+
+ * Dynamic Component: Add ability to use `ComponentFactory` instead of a `Type`.
+ * Material Dialog: Fix header mixin.
+ * Material Checkbox: Add ability to make readonly.
+ * Material Input: Make local required errors to make controls invalid even when
+   the control has not been interacted with.
+ * Material Popup:
+   * Add an option to reposition visible popups every frame with
+     `trackLayoutChanges`.
+   * Merge laminate/components/popup into Material Popup.
+ * Material Select: Allow dropdown to display an error while it's closed.
+ * Material Tree:
+   * Added shift selection/deselection.
+   * Fix glyphs always shown expanded when `expandAll = true`.
+ * Material Yes/No Buttons: Add dense style.
+ * Scorecard: Update tab index to prevent scroll errors when going through
+   buttons with tabs.
+ * Add new color utils.
+ * Migrate uses of `GlyphComponent` to `MaterialIconComponent`.
+ * Migrate uses of `ElementRef` to `Element`.
+ * Remove duplicate PopupSourceDirective.
+ * Remove deprecated popup `matchSourceWidth` options.
+ * Updates to use metadata inheritance.
+ * Remove unused library statements.
+ * Update documentation.
+
 ## 0.6.0-alpha+1
 
 > NOTE: This code is considered production quality, but depends on angular:

lib/src/components/auto_dismiss/auto_dismiss.dart

@@ -3,6 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:html';
 
 import 'package:angular/angular.dart';
 
@@ -31,7 +32,7 @@ class AutoDismissDirective {
   final Stream _click;
   final NgZone _zone;
 
-  AutoDismissDirective(ElementRef element, this._zone)
+  AutoDismissDirective(HtmlElement element, this._zone)
       : _click = triggersOutside(element);
 
   bool _ignoreClicks = false;

lib/src/components/button_decorator/button_decorator.dart

@@ -41,7 +41,7 @@ class ButtonDirective extends RootFocusable with HasTabIndex {
 
   String _hostTabIndex;
 
-  ButtonDirective(ElementRef element) : super(element);
+  ButtonDirective(Element element) : super(element);
 
   /// String value to be passed to aria-disabled.
   String get disabledStr => '$_disabled';

lib/src/components/button_decorator/button_decorator.scss.css

@@ -4,3 +4,4 @@
  * BSD-style license that can be found in the LICENSE file.
  */
 [buttonDecorator]{cursor:pointer}[buttonDecorator].is-disabled{cursor:not-allowed}
+

lib/src/components/dynamic_component/dynamic_component.dart

@@ -17,19 +17,16 @@ import '../../utils/async/async.dart';
 ///
 ///     ... *ngFor="item in items">
 ///       <dynamic-component
-///           [componentType]="aTypeThatMayNotRenderValue"
+///           [componentFactory]="aFactoryThatMayNotRenderValue"
 ///           [value]="item">
 ///       </dynamic-component>
 ///
 @Component(
     selector: 'dynamic-component',
-// #marker variable is used to refer to the <div> tag later when calling
-// DynamicComponentLoader.loadNextToLocation. The tag does not have to be
-// <span>. It can be anything. In this case, we simply needed something
-// that's not visible, and <span> does the job perfectly.
-    template: '''<span #marker></span>''')
+    template: '''<template #marker></template>''')
 class DynamicComponent implements OnDestroy {
-  final DynamicComponentLoader _componentLoader;
+  final SlowComponentLoader _slowComponentLoader;
+  final ComponentLoader _componentLoader;
   final ChangeDetectorRef _changeDetectorRef;
   final _onLoadController = new LazyStreamController<ComponentRef>();
 
@@ -47,14 +44,16 @@ class DynamicComponent implements OnDestroy {
 
   ComponentRef _childComponent;
   Type _componentType;
+  ComponentFactory _componentFactory;
   Object _value;
 
   /// Fired when component is loaded allowing clients to get a handle on the
   /// component loaded.
   @Output()
   Stream<ComponentRef> get onLoad => _onLoadController.stream;
 
-  DynamicComponent(this._componentLoader, this._changeDetectorRef);
+  DynamicComponent(this._slowComponentLoader, this._changeDetectorRef,
+      this._componentLoader);
 
   /// Returns the loaded dynamic component reference.
   ComponentRef get childComponent => _childComponent;
@@ -71,6 +70,7 @@ class DynamicComponent implements OnDestroy {
   }
 
   /// The type of component to dynamically render.
+  @Deprecated('Use componentFactory instead as it is more tree-shakable')
   @Input()
   set componentType(Type dartType) {
     _disposeChildComponent();
@@ -85,24 +85,51 @@ class DynamicComponent implements OnDestroy {
     }
   }
 
+  /// The type of component to dynamically render.
+  @Input()
+  set componentFactory(ComponentFactory component) {
+    _disposeChildComponent();
+    _componentFactory = component;
+    if (component == null) {
+      return;
+    }
+    if (_viewContainerRef != null) {
+      _initialize();
+    } else {
+      _loadDeferred = true;
+    }
+  }
+
   void _initialize() {
-    Type loadType = _componentType;
-    _componentLoader
-        .loadNextToLocation(loadType, _viewContainerRef)
-        .then((ComponentRef componentRef) {
-      if (loadType != _componentType) {
-        // During the load time, the component type has changed,
-        // and the type we just loaded is no longer valid.
-        componentRef.destroy();
-        return;
-      }
+    if (_componentFactory != null) {
       if (_childComponent != null) {
         throw 'Attempting to overwrite a dynamic component';
       }
-      _childComponent = componentRef;
-      _onLoadController.add(componentRef);
+
+      _childComponent = _componentLoader.loadNextToLocation(
+          _componentFactory, _viewContainerRef);
+      _onLoadController.add(_childComponent);
       _updateChildComponent();
-    });
+    } else {
+      // TODO(google): Remove this code once componentType is no longer used.
+      Type loadType = _componentType;
+      _slowComponentLoader
+          .loadNextToLocation(loadType, _viewContainerRef)
+          .then((ComponentRef componentRef) {
+        if (loadType != _componentType) {
+          // During the load time, the component type has changed,
+          // and the type we just loaded is no longer valid.
+          componentRef.destroy();
+          return;
+        }
+        if (_childComponent != null) {
+          throw 'Attempting to overwrite a dynamic component';
+        }
+        _childComponent = componentRef;
+        _onLoadController.add(componentRef);
+        _updateChildComponent();
+      });
+    }
   }
 
   /// The value to set on the component if the component implements

lib/src/components/focus/focus.dart

@@ -3,7 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' show KeyCode, KeyboardEvent, Element;
+import 'dart:html' show KeyCode, KeyboardEvent, Element, HtmlElement;
 
 import 'package:angular/angular.dart';
 
@@ -24,22 +24,21 @@ abstract class Focusable {
 /// An abstract class for components to extend if their programmatic focus
 /// should simply put focus on root element.
 abstract class RootFocusable implements Focusable, Disposable {
-  ElementRef _root;
+  Element _root;
   RootFocusable(this._root);
 
   @override
   void focus() {
     if (_root == null) return;
-    Element element = _root.nativeElement;
     // if element does not have positive tab index attribute already specified
     // or is native element.
     // NOTE: even for elements with tab index unspecified it will return
     // tabIndex as "-1" and we have to set it to "-1"
     // to actually make it focusable.
-    if (element.tabIndex < 0) {
-      element.tabIndex = -1;
+    if (_root.tabIndex < 0) {
+      _root.tabIndex = -1;
     }
-    element.focus();
+    _root.focus();
   }
 
   @override
@@ -59,19 +58,19 @@ abstract class ProjectedFocus implements Focusable {
       return;
     }
     focusDelegate.then((delegate) {
-      assert(delegate is Focusable || delegate is ElementRef);
+      assert(delegate is Focusable || delegate is Element);
       if (delegate is Focusable) {
         _resolvedFocusable = delegate;
       } else {
-        _resolvedFocusable = new _FocusableElement(delegate as ElementRef);
+        _resolvedFocusable = new _FocusableElement(delegate);
       }
       _resolvedFocusable.focus();
     });
   }
 }
 
 class _FocusableElement extends RootFocusable {
-  _FocusableElement(ElementRef element) : super(element);
+  _FocusableElement(HtmlElement element) : super(element);
 }
 
 /// A focusable component that can publish to the
@@ -140,7 +139,7 @@ class AutoFocusDirective extends RootFocusable implements OnInit, OnDestroy {
   PopupRef _popupRef;
 
   AutoFocusDirective(
-      ElementRef node,
+      HtmlElement node,
       this._domService,
       @Optional() this._focusable,
       @Optional() this._modal,
@@ -203,5 +202,5 @@ class AutoFocusDirective extends RootFocusable implements OnInit, OnDestroy {
 /// This directive is used to [ViewChild] focusable element in your view.
 @Directive(selector: '[focusableElement]', exportAs: 'focusableElement')
 class FocusableDirective extends RootFocusable {
-  FocusableDirective(ElementRef node) : super(node);
+  FocusableDirective(HtmlElement node) : super(node);
 }

lib/src/components/focus/focus_activable_item.dart

@@ -2,6 +2,8 @@
 // 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';
+
 import 'package:angular/angular.dart';
 
 import './focus.dart';
@@ -20,7 +22,7 @@ class FocusActivableItemDirective extends RootFocusable
   @override
   String key;
 
-  FocusActivableItemDirective(ElementRef root) : super(root);
+  FocusActivableItemDirective(HtmlElement root) : super(root);
 }
 
 /// A focusable component with a matching [key].

lib/src/components/focus/focus_item.dart

@@ -3,7 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html' show KeyboardEvent;
+import 'dart:html' show KeyboardEvent, HtmlElement;
 
 import 'package:angular/angular.dart';
 
@@ -32,7 +32,7 @@ import './focus.dart';
 class FocusItemDirective extends RootFocusable implements FocusableItem {
   final String role;
 
-  FocusItemDirective(ElementRef element, @Attribute('role') String role)
+  FocusItemDirective(HtmlElement element, @Attribute('role') String role)
       : this.role = role ?? 'listitem',
         super(element);
 

lib/src/components/focus/focus_trap.dart

@@ -85,9 +85,9 @@ class FocusTrapComponent implements OnDestroy {
 @Directive(selector: '[focusContentWrapper]')
 class FocusContentWrapper extends FocusableDirective {
   Element _element;
-  FocusContentWrapper(ElementRef elementRef)
-      : _element = elementRef.nativeElement,
-        super(elementRef);
+  FocusContentWrapper(HtmlElement element)
+      : _element = element,
+        super(element);
 
   Element get element => _element;
 }

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

@@ -4,3 +4,4 @@
  * BSD-style license that can be found in the LICENSE file.
  */
 :host{display:block}[focusContentWrapper]{height:inherit;max-height:inherit}
+