Add Material Auto Suggest Input component (#164)

 * Material Checkbox: Fix disabled state to match material-spec which is a light 
   grey not a certain opacity of the checkbox. 
 * Material Chips: Add high density mixin. 
 * Material Input: 
   * Add selectAll function for calling the underlying input element's select 
     method that focuses the input and selects all its content. 
   * Add ability to update the data on a change instead of keypress or blur for 
     the standard Material Input. 
   * Remove error color from floating label to conform to material spec. 
 * Material Popup: 
   * Fix mismatch between the variable used as a reference point for 
     repositioning the popup and the variable used to initially set the popup's 
     position. This caused issues when the tab was in the background because 
     these variables could have changed significantly before the next animation 
     frame fired (since requestAnimationFrame is throttled when the tab isn't 
     visible). 
   * Use `_sourceDimensions` instead of `layoutRects[1]` to take overlay 
     container offset into account. Using popupSourceLayoutStream directly 
     caused issues when the .acx-overlay-container offset was not (0, 0). 
 * Material Select: Fix orientation when groups are used. 
 * Scorecard: 
   * Fix styling for extra-big cards. 
   * Fix to allow selectable scorecards in a "custom" scoreboard. 
   * Add a tooltip field enabling scenarios where more information about the 
     value can be displayed. 
 * Theme: Prepare dark theme for upcoming Visibility.None change. 
 * Cleanup unused fields. 
 * Update default material scrollbar width to 8px. This is easier to use with a 
   mouse or touch input compared to the previous default of 4px. 
 * Cleanup unused styles and reorganize `.scss` files. 
 * Remove link hover style. 
 * Migrate uses of `ElementRef` to `Element`. 
 * Remove `visibility: Visibility.none` from all components since compatibility 
   is not yet fully supported in Angular. Will be added in a future release. 
 * Update documentation.

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,42 @@
+## 0.7.1
+
+ * Add Material Auto Suggest Input component.
+ * Material Checkbox: Fix disabled state to match material-spec which is a light
+   grey not a certain opacity of the checkbox.
+ * Material Chips: Add high density mixin.
+ * Material Input:
+   * Add selectAll function for calling the underlying input element's select
+     method that focuses the input and selects all its content.
+   * Add ability to update the data on a change instead of keypress or blur for
+     the standard Material Input.
+   * Remove error color from floating label to conform to material spec.
+ * Material Popup:
+   * Fix mismatch between the variable used as a reference point for
+     repositioning the popup and the variable used to initially set the popup's
+     position. This caused issues when the tab was in the background because
+     these variables could have changed significantly before the next animation
+     frame fired (since requestAnimationFrame is throttled when the tab isn't
+     visible).
+   * Use `_sourceDimensions` instead of `layoutRects[1]` to take overlay
+     container offset into account. Using popupSourceLayoutStream directly
+     caused issues when the .acx-overlay-container offset was not (0, 0).
+ * Material Select: Fix orientation when groups are used.
+ * Scorecard:
+   * Fix styling for extra-big cards.
+   * Fix to allow selectable scorecards in a "custom" scoreboard.
+   * Add a tooltip field enabling scenarios where more information about the
+     value can be displayed.
+ * Theme: Prepare dark theme for upcoming Visibility.None change.
+ * Cleanup unused fields.
+ * Update default material scrollbar width to 8px. This is easier to use with a
+   mouse or touch input compared to the previous default of 4px.
+ * Cleanup unused styles and reorganize `.scss` files.
+ * Remove link hover style.
+ * Migrate uses of `ElementRef` to `Element`.
+ * Remove `visibility: Visibility.none` from all components since compatibility
+   is not yet fully supported. Will be added in an upcoming release.
+ * Update documentation.
+
 ## 0.7.0
 
  * Material Button: Add raised mixin so that buttons can be made to be raised 

README.md

@@ -32,7 +32,7 @@ developers to be able to use the package as soon as possible.
 * ✓ `<material-list>`
 * ✓ `<material-select>`
 * ✓ `<material-tree>`
-* ☐ `<material-auto-suggest-input>`
+* ✓ `<material-auto-suggest-input>`
 * ☐ `<material-date-range-picker>`
 * ☐ `<material-menu>`
 * many more, including a fast table

lib/src/all_components.dart

@@ -21,6 +21,8 @@ export 'components/focus/focus_trap.dart';
 export 'components/focus/keyboard_only_focus_indicator.dart';
 export 'components/forms/error_renderer.dart';
 export 'components/glyph/glyph.dart';
+export 'components/highlighted_text/highlighted_text.dart';
+export 'components/highlighted_text/highlighted_value.dart';
 export 'components/material_button/material_button.dart';
 export 'components/material_button/material_button_base.dart';
 export 'components/material_button/material_fab.dart';
@@ -36,6 +38,7 @@ export 'components/material_icon/material_icon.dart';
 export 'components/material_input/base_material_input.dart';
 export 'components/material_input/deferred_validator.dart';
 export 'components/material_input/input_wrapper.dart';
+export 'components/material_input/material_auto_suggest_input.dart';
 export 'components/material_input/material_input.dart'
     hide materialInputErrorKey;
 export 'components/material_input/material_input_default_value_accessor.dart';
@@ -77,12 +80,14 @@ export 'components/material_yes_no_buttons/material_yes_no_buttons.dart';
 export 'components/mixins/button_wrapper.dart';
 export 'components/mixins/focusable_mixin.dart';
 export 'components/mixins/has_tab_index.dart';
+export 'components/mixins/highlight_assistant_mixin.dart';
 export 'components/mixins/material_dropdown_base.dart';
 export 'components/mixins/track_layout_changes.dart';
 export 'components/reorder_list/reorder_events.dart';
 export 'components/reorder_list/reorder_list.dart';
 export 'components/scorecard/scoreboard.dart';
 export 'components/scorecard/scorecard.dart';
+export 'components/stop_propagation/stop_propagation.dart';
 export 'components/theme/dark_theme.dart';
 export 'components/theme/module.dart';
 export 'laminate/components/modal/modal.dart';

lib/src/components/app_layout/layout.scss

@@ -14,9 +14,9 @@
 /// Styles provided to more easily layout an application.
 /// This includes:
 ///   material-drawer (persistent and permanent)
-@import 'lib/src/components/material_shadow/css/shadow';
 @import 'material_drawer';
 @import 'lib/src/css/material/material';
+@import 'lib/src/css/material/shadow';
 @import 'lib/src/components/material_list/mixins';
 
 $mat-toolbar-mobile-breakpoint: 599px;

lib/src/components/app_layout/material_temporary_drawer.scss

@@ -11,9 +11,9 @@
  * to include CSS generation from SASS files during the build process.
  */
 
-@import 'lib/src/components/material_shadow/css/shadow';
 @import 'material_drawer';
 @import 'lib/src/css/material/material';
+@import 'lib/src/css/material/shadow';
 
 :host {
   @include fit;

lib/src/components/auto_dismiss/auto_dismiss.dart

@@ -26,9 +26,7 @@ import '../../utils/browser/events/events.dart';
 ///       <button (click)="disclaimerVisible = true">Confirm</button>
 ///     </div>
 ///
-@Directive(
-    selector: '[autoDismissable]:not(material-expansionpanel)',
-    visibility: Visibility.none)
+@Directive(selector: '[autoDismissable]:not(material-expansionpanel)')
 class AutoDismissDirective {
   final Stream _click;
   final NgZone _zone;

lib/src/components/content/deferred_content.dart

@@ -21,7 +21,7 @@ import 'deferred_content_aware.dart';
 /// <modal [(visible)]="visible">
 ///   <expensive-content *deferredContent></expensive-content>
 /// </modal>
-@Directive(selector: '[deferredContent]', visibility: Visibility.none)
+@Directive(selector: '[deferredContent]')
 class DeferredContentDirective implements OnDestroy {
   final _disposer = new Disposer.oneShot();
   final _placeholder = new DivElement();
@@ -95,7 +95,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]')
 class CachingDeferredContentDirective implements OnDestroy {
   ViewContainerRef _viewContainer;
   TemplateRef _template;

lib/src/components/focus/focus.dart

@@ -125,7 +125,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]')
 class AutoFocusDirective extends RootFocusable implements OnInit, OnDestroy {
   final _disposer = new Disposer.oneShot();
 

lib/src/components/glyph/glyph.dart

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

lib/src/components/highlighted_text/highlighted_text.dart

@@ -0,0 +1,33 @@
+// 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:angular/angular.dart';
+
+import '../../model/ui/highlighted_text_model.dart';
+
+/// A component that presents a list of [HighlightedTextSegment]s.
+///
+/// Example parent component:
+///
+///     var highlighter = new TextHighlighter();
+///     var segments = highlighter.highlight(text, ['search', 'tokens']);
+///
+/// And template:
+///
+///     <highlighted-text [segments]="segments"></highlighted-text>
+///
+/// Use [HighlightedValueComponent] for highlighting a value instead of
+/// providing segments as required by this component.
+@Component(
+    selector: 'highlighted-text',
+    preserveWhitespace: false,
+    templateUrl: 'highlighted_text.html',
+    styleUrls: const ['highlighted_text.scss.css'],
+    directives: const [NgFor],
+    changeDetection: ChangeDetectionStrategy.OnPush)
+class HighlightedTextComponent {
+  /// List of [HighlightedTextSegment]s to present.
+  @Input()
+  List<HighlightedTextSegment> segments;
+}