Sync latest updates to all components

CHANGELOG.md

@@ -1,3 +1,39 @@
+## 0.9.0-alpha+2
+
+> NOTE: This code is considered production quality, but depends on angular:
+> 5.0.0-alpha+2. The alpha tag represents the evolving nature of the AngularDart
+> api, not code quality (5.0.0-alpha+2 is used in production Google apps).
+
+**NOTE**: As of `angular 5.0.0-alpha+1` [`dependency_overrides`][dep_overrides]
+are **required**:
+
+```yaml
+dependency_overrides:
+  analyzer: ^0.31.0-alpha.1
+```
+
+ * Material Auto-Suggest Input: Add ability to give a tooltip for the clear
+   icon.
+ * Material Expansionpanel: Add mixin for flat on collapse.
+ * Material Input:
+   * Protected against input being destroyed and blur event still happening.
+   * Add mixin for fixed width error text.
+ * Material Menu: Add mixin for lowercase button text.
+ * Material Toggle: Add mixin to display label on the right.
+ * Material Select: Add mixin to change `material-select-dropdown-item` padding.
+ * Allow `material-scrollbar` mixin to be used in global css (without angular).
+ * Add directives for Material Menu to `materialDirectives`.
+ * Remove `MaterialButtonBase` from `materialDirectives`.
+ * Migrate from Glyph to Material Icon.
+ * Provide a path to use Component Factories when using code that was previously
+   using the `ComponentRenderer` pattern.
+ * Generic type fixes.
+ * Continue migration from `SlowComponentLoader` to `ComponentLoader`.
+ * Continue migration from `LazyStreamController` to `StreamController`.
+ * Cleanup Angular static analysis warnings.
+ * Rename `Visibility.none` to `Visibility.local`.
+ * Add optional punctuation around trackBy functions.
+
 ## 0.9.0-alpha+1
 
 > NOTE: This code is considered production quality, but depends on angular:

analysis_options.yaml

@@ -1,7 +1,8 @@
 analyzer:
   strong-mode: true
   errors:
+    dead_code: warning
     unused_element: warning
     unused_import: warning
     unused_local_variable: warning
-    dead_code: warning
+    uri_has_not_been_generated: ignore

lib/angular_components.dart

@@ -25,7 +25,6 @@ import 'laminate/components/modal/modal.dart';
 import 'laminate/popup/module.dart';
 import 'laminate/popup/popup.dart';
 import 'material_button/material_button.dart';
-import 'material_button/material_button_base.dart';
 import 'material_button/material_fab.dart';
 import 'material_checkbox/material_checkbox.dart'
     show MaterialCheckboxComponent;
@@ -45,6 +44,13 @@ import 'material_input/material_number_validators.dart';
 import 'material_input/material_percent_directive.dart';
 import 'material_list/material_list.dart';
 import 'material_list/material_list_item.dart';
+import 'material_menu/dropdown_menu.dart';
+import 'material_menu/material_fab_menu.dart';
+import 'material_menu/material_menu.dart';
+import 'material_menu/menu_item_affix_list.dart';
+import 'material_menu/menu_item_groups.dart';
+import 'material_menu/menu_popup.dart';
+import 'material_menu/menu_root.dart';
 import 'material_popup/material_popup.dart';
 import 'material_progress/material_progress.dart';
 import 'material_radio/material_radio.dart';
@@ -122,6 +128,13 @@ export 'material_input/material_percent_directive.dart';
 export 'material_list/material_list.dart';
 export 'material_list/material_list_item.dart';
 export 'material_list/material_list_size.dart';
+export 'material_menu/dropdown_menu.dart';
+export 'material_menu/material_fab_menu.dart';
+export 'material_menu/material_menu.dart';
+export 'material_menu/menu_item_affix_list.dart';
+export 'material_menu/menu_item_groups.dart';
+export 'material_menu/menu_popup.dart';
+export 'material_menu/menu_popup_wrapper.dart';
 export 'material_popup/material_popup.dart';
 export 'material_progress/material_progress.dart';
 export 'material_radio/material_radio.dart';
@@ -183,6 +196,7 @@ const List<dynamic> materialDirectives = const [
   DeferredContentDirective,
   displayNameRendererDirective,
   DropdownButtonComponent,
+  DropdownMenuComponent,
   DynamicComponent,
   FixedMaterialTabStripComponent,
   FocusActivableItemDirective,
@@ -197,7 +211,6 @@ const List<dynamic> materialDirectives = const [
   LowerBoundValidator,
   MaterialAutoSuggestInputComponent,
   MaterialButtonComponent,
-  MaterialButtonBase,
   MaterialCheckboxComponent,
   MaterialChipComponent,
   MaterialChipsComponent,
@@ -207,13 +220,17 @@ const List<dynamic> materialDirectives = const [
   MaterialExpansionPanelAutoDismiss,
   MaterialExpansionPanelSet,
   MaterialFabComponent,
+  MaterialFabMenuComponent,
   MaterialIconComponent,
   MaterialIconTooltipComponent,
   MaterialInkTooltipComponent,
   MaterialInputComponent,
   MaterialInputDefaultValueAccessor,
+  MenuItemAffixListComponent,
+  MenuItemGroupsComponent,
   MaterialListComponent,
   MaterialListItemComponent,
+  MaterialMenuComponent,
   MaterialMultilineInputComponent,
   MaterialPaperTooltipComponent,
   MaterialPercentInputDirective,
@@ -238,6 +255,8 @@ const List<dynamic> materialDirectives = const [
   MaterialTooltipSourceDirective,
   MaterialTooltipTargetDirective,
   MaterialYesNoButtonsComponent,
+  MenuPopupComponent,
+  MenuRootDirective,
   ModalComponent,
   NgModel,
   PositiveNumValidator,

lib/app_layout/material_drawer_base.dart

@@ -3,7 +3,6 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'dart:async';
-import 'dart:html';
 
 import 'package:angular/angular.dart';
 import 'package:angular_components/content/deferred_content_aware.dart';
@@ -13,9 +12,7 @@ import 'package:angular_components/content/deferred_content_aware.dart';
 const animationDuration = const Duration(milliseconds: 500);
 
 class MaterialDrawerBase implements DeferredContentAware, OnInit {
-  MaterialDrawerBase(this._element, {bool visible = true}) : _visible = visible;
-
-  final HtmlElement _element;
+  MaterialDrawerBase({bool visible = true}) : _visible = visible;
 
   bool _visible;
 
@@ -30,7 +27,7 @@ class MaterialDrawerBase implements DeferredContentAware, OnInit {
     if (!_visible) {
       // Wait until after the animation to remove the content
       new Timer(animationDuration, () {
-        // Make sure we are still not visible incase the drawer was toggled
+        // Make sure we are still not visible in case the drawer was toggled
         // quickly before the animation was done.
         if (!_visible) _visibleChange.add(_visible);
       });
@@ -42,7 +39,7 @@ class MaterialDrawerBase implements DeferredContentAware, OnInit {
 
   final _visibleChange = new StreamController<bool>.broadcast(sync: true);
 
-  /// Event fired when the visibilty of the drawer changes.
+  /// Event fired when the visibility of the drawer changes.
   ///
   /// Note: does not fire until after the animation is complete.
   @Output('visibleChange')

lib/app_layout/material_persistent_drawer.dart

@@ -2,8 +2,6 @@
 // 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 'package:angular_components/content/deferred_content_aware.dart';
 
@@ -35,5 +33,5 @@ import 'material_drawer_base.dart';
   },
 )
 class MaterialPersistentDrawerDirective extends MaterialDrawerBase {
-  MaterialPersistentDrawerDirective(HtmlElement element) : super(element);
+  MaterialPersistentDrawerDirective() : super();
 }

lib/app_layout/material_temporary_drawer.dart

@@ -2,8 +2,6 @@
 // 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 'package:angular_components/content/deferred_content_aware.dart';
 
@@ -38,6 +36,5 @@ import 'material_drawer_base.dart';
   changeDetection: ChangeDetectionStrategy.OnPush,
 )
 class MaterialTemporaryDrawerComponent extends MaterialDrawerBase {
-  MaterialTemporaryDrawerComponent(HtmlElement element)
-      : super(element, visible: false);
+  MaterialTemporaryDrawerComponent() : super(visible: false);
 }

lib/auto_dismiss/auto_dismiss.dart

@@ -27,7 +27,7 @@ import 'package:angular_components/utils/browser/events/events.dart';
 ///
 @Directive(
     selector: '[autoDismissable]:not(material-expansionpanel)',
-    visibility: Visibility.none)
+    visibility: Visibility.local)
 class AutoDismissDirective {
   final Stream _click;
   final NgZone _zone;

lib/content/deferred_content.dart

@@ -22,7 +22,7 @@ import 'deferred_content_aware.dart';
 ///     <modal [(visible)]="visible">
 ///         <expensive-content *deferredContent></expensive-content>
 ///     </modal>
-@Directive(selector: '[deferredContent]', visibility: Visibility.none)
+@Directive(selector: '[deferredContent]', visibility: Visibility.local)
 class DeferredContentDirective implements OnDestroy {
   final _disposer = new Disposer.oneShot();
   final _placeholder = new DivElement();
@@ -96,7 +96,7 @@ class DeferredContentDirective implements OnDestroy {
 /// This directive is not recommended as it will cause Angular to change-detect
 /// the contents even when hidden. If your hidden content has push-detection
 /// enabled, go for it.
-@Directive(selector: '[cachedDeferredContent]', visibility: Visibility.none)
+@Directive(selector: '[cachedDeferredContent]', visibility: Visibility.local)
 class CachingDeferredContentDirective implements OnDestroy {
   ViewContainerRef _viewContainer;
   TemplateRef _template;

lib/css/material/_mixins.scss

@@ -15,7 +15,21 @@
     $thumb-hover-color,
     $scrollbar-size: $mat-grid-type,
     $thumb-min-size: 6 * $mat-grid) {
-  ::ng-deep ::-webkit-scrollbar {
+  ::ng-deep {
+    @include material-scrollbar(
+      $thumb-hover-color, $scrollbar-size, $thumb-min-size);
+  }
+}
+
+/// Style all scrollbars within the scope to material spec.
+///
+/// Note: This is the same as material-scrollbar-theme expect it can be used
+/// globally outside the context angular components.
+@mixin material-scrollbar(
+    $thumb-hover-color,
+    $scrollbar-size: $mat-grid-type,
+    $thumb-min-size: 6 * $mat-grid) {
+  ::-webkit-scrollbar {
     background-color: $mat-scrollbar-background;
 
     // Height only applies to horizontal scrollbars.
@@ -29,7 +43,7 @@
     }
   }
 
-  ::ng-deep ::-webkit-scrollbar-thumb {
+  ::-webkit-scrollbar-thumb {
     background-color: $mat-scrollbar-thumb;
 
     // min-height only applies to vertical scrollbar thumbs.
@@ -43,7 +57,7 @@
     }
   }
 
-  ::ng-deep ::-webkit-scrollbar-button {
+  ::-webkit-scrollbar-button {
     width: 0;
     height: 0;
   }

lib/dynamic_component/dynamic_component.dart

@@ -6,7 +6,6 @@ import 'dart:async';
 
 import 'package:angular/angular.dart';
 import 'package:angular_components/model/ui/has_renderer.dart';
-import 'package:angular_components/utils/async/async.dart';
 
 /// Dynamically renders another component, setting the [value] field on the
 /// dynamic component if it implements [RendersValue] (and not if the component
@@ -28,7 +27,7 @@ class DynamicComponent implements OnDestroy {
   final SlowComponentLoader _slowComponentLoader;
   final ComponentLoader _componentLoader;
   final ChangeDetectorRef _changeDetectorRef;
-  final _onLoadController = new LazyStreamController<ComponentRef>();
+  final _onLoadController = new StreamController<ComponentRef>();
 
   ViewContainerRef _viewContainerRef;
   bool _loadDeferred = false;
@@ -69,15 +68,8 @@ class DynamicComponent implements OnDestroy {
     _childComponent = null;
   }
 
-  /// The type of component to dynamically render.
-  @Deprecated('Use componentFactory instead as it is more tree-shakable')
-  @Input()
-  set componentType(Type dartType) {
+  void _checkAndInitialize() {
     _disposeChildComponent();
-    _componentType = dartType;
-    if (dartType == null) {
-      return;
-    }
     if (_viewContainerRef != null) {
       _initialize();
     } else {
@@ -86,17 +78,37 @@ class DynamicComponent implements OnDestroy {
   }
 
   /// The type of component to dynamically render.
+  ///
+  /// If something other than a null or Type is passed in, it will
+  /// be ignored.
+  @Deprecated('Use componentFactory instead as it is more tree-shakable')
   @Input()
-  set componentFactory(ComponentFactory component) {
-    _disposeChildComponent();
-    _componentFactory = component;
-    if (component == null) {
-      return;
+  set componentType(Object dartType) {
+    // Ignore unsupported type.
+    if (dartType == null) {
+      _disposeChildComponent();
+    } else if (dartType is Type) {
+      _componentFactory = null;
+      _componentType = dartType;
+      _checkAndInitialize();
     }
-    if (_viewContainerRef != null) {
-      _initialize();
-    } else {
-      _loadDeferred = true;
+  }
+
+  /// The ComponentFactory of component to dynamically render.
+  ///
+  /// If something other than a null or ComponentFactory is passed in, it will
+  /// be ignored. Note: This only temporarially supports Object to allow for
+  /// an easier transition of code. This does make this code slightly slower,
+  /// but will be changed to [ComponentFactory] when [componentType] is
+  /// removed.
+  @Input()
+  set componentFactory(Object component) {
+    if (component == null) {
+      _disposeChildComponent();
+    } else if (component is ComponentFactory) {
+      _componentType = null;
+      _componentFactory = component;
+      _checkAndInitialize();
     }
   }
 

lib/focus/focus.dart

@@ -124,7 +124,7 @@ class FocusMoveEvent {
 ///
 /// Please put only on content that appears after user action and
 /// requires focus to be changed to it.
-@Directive(selector: '[autoFocus]', visibility: Visibility.none)
+@Directive(selector: '[autoFocus]', visibility: Visibility.local)
 class AutoFocusDirective extends RootFocusable implements OnInit, OnDestroy {
   final _disposer = new Disposer.oneShot();
 

lib/focus/focus_item.dart

@@ -7,7 +7,6 @@ import 'dart:html' show KeyboardEvent, HtmlElement;
 
 import 'package:angular/angular.dart';
 import 'package:angular_components/focus/focus.dart';
-import 'package:angular_components/utils/async/async.dart';
 
 /// `FocusItemDirective`, used in conjunction with [FocusListDirective],
 /// provides a means to move focus between a list of components (or elements)
@@ -31,7 +30,7 @@ import 'package:angular_components/utils/async/async.dart';
     providers: const [
       const Provider(FocusableItem, useExisting: FocusItemDirective)
     ],
-    visibility: Visibility.none)
+    visibility: Visibility.local)
 class FocusItemDirective extends RootFocusable implements FocusableItem {
   final String role;
 
@@ -42,7 +41,7 @@ class FocusItemDirective extends RootFocusable implements FocusableItem {
   String tabIndex = '0';
 
   final _focusMoveCtrl =
-      new LazyStreamController<FocusMoveEvent>.broadcast(sync: true);
+      new StreamController<FocusMoveEvent>.broadcast(sync: true);
   @override
   Stream<FocusMoveEvent> get focusmove => _focusMoveCtrl.stream;
 

lib/glyph/glyph.dart

@@ -54,7 +54,7 @@ const List<String> _flippedIcons = const [
     templateUrl: 'glyph.html',
     styleUrls: const ['glyph.scss.css'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    visibility: Visibility.none)
+    visibility: Visibility.local)
 class GlyphComponent {
   static const String _materialIconsExtended = 'material-icons-extended';