Add Material Tooltip (#48)

Add Material Tooltip

 * Material Ripple:
   * Add GPU acceleration.
   * `rippleBindings` have been removed as they are no longer used.
 * Internal updates for compatibility with Angular 3.0.0-alpha.
 * Material Expansion Panel:
   * Fix CSS rule that causes header text to turn gray on hover/focus.
   * Support auto-focus on a content element when the material expansion panel expands.
   * Fix Yes/No button ordering.
 * Material Input:
   * Add a blur update value accessor.
   * Add multiple attribute.
   * Remove unused properties: rows and maxRows.
 * Material Input Multiline: Add auto grow in size.
 * Material Popup: Update change detection for OnPush.
 * Material Progress: Update to animate when main thread is blocked.
 * Material Radio: Adjust size to 24px.
 * Material Yes/No: Add toggle for yes button visibility.
 * Scorecard: Update change detection.
 * Fix flipped alignment positions when isRtl is used.
 * Fix popup event handling.
 * Remove 'uninitialized' as a default value.
 * Remove unused CSS rules.
 * Update styles to meet Material UI spec.
 * Bug fixes.
 * Strong Mode fixes.

Author: nshahan

CHANGELOG.md

@@ -1,8 +1,40 @@
+## 0.3.0-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.
+
+ * Add Material Tooltip.
+ * Material Ripple:
+   * Add GPU acceleration.
+   * `rippleBindings` have been removed as they are no longer used.
+ * Internal updates for compatibility with Angular 3.0.0-alpha.
+ * Material Expansion Panel:
+   * Fix CSS rule that causes header text to turn gray on hover/focus.
+   * Support auto-focus on a content element when the material expansion panel expands.
+   * Fix Yes/No button ordering.
+ * Material Input:
+   * Add a blur update value accessor.
+   * Add multiple attribute.
+   * Remove unused properties: rows and maxRows.
+ * Material Input Multiline: Add auto grow in size.
+ * Material Popup: Update change detection for OnPush.
+ * Material Progress: Update to animate when main thread is blocked.
+ * Material Radio: Adjust size to 24px.
+ * Material Yes/No: Add toggle for yes button visibility.
+ * Scorecard: Update change detection.
+ * Fix flipped alignment positions when isRtl is used.
+ * Fix popup event handling.
+ * Remove 'uninitialized' as a default value.
+ * Remove unused CSS rules.
+ * Update styles to meet Material UI spec.
+ * Bug fixes.
+ * Strong Mode fixes.
+
 ## 0.2.2
 
  * Add Material Popup, a basic popup component.
  * Update Material Checkbox icon size.
- * Cleanup framework stabilizers since [issue #24843](https://github.com/dart-lang/sdk/issues/24843) 
+ * Cleanup framework stabilizers since [issue #24843](https://github.com/dart-lang/sdk/issues/24843)
    in the Dart SDK has been resolved.
  * Remove unused files.
 
@@ -15,7 +47,7 @@
 
 * Add a modal dialog window called material_dialog.
 * Rename MultilineMaterialInputComponent to MaterialMultilineInputComponent.
-* Make the deferredContent placeholder element optional, off by default. 
+* Make the deferredContent placeholder element optional, off by default.
 * Remove InputTextModel.
 * Cleanup linter warnings.
 * Refactor color support.

README.md

@@ -1,8 +1,13 @@
-**Preview Release**
+## Preview Release
 
 These are the AngularDart components that Google uses to build many of its web
 applications.
 
+These components are a productive and stable set of widgets, contributed to by
+hundreds of Googlers. Being able to debug your apps across all layers in Dart,
+supporting tree shaking for minimal code size, and strict latency policies make
+them an excellent fit for AngularDart projects.
+
 Only a small fragment of all the components is available right now. We want
 developers to have an opportunity to play around with the package as soon as
 possible.
@@ -25,13 +30,17 @@ possible.
 * ✓ `<material-input>`
 * ✓ `<material-dialog>`
 * ✓ `<material-popup>`
-* ☐ `<material-tooltip>`
+* ✓ `<material-tooltip>`
+* ☐ `<material-list>`
+* ☐ `<material-select>`
 * ☐ `<material-auto-suggest-input>`
 * ☐ `<material-date-range-picker>`
-* ☐ `<material-list>`
 * ☐ `<material-menu>`
 * many more, including a fast table
 
+At this time we are not taking pull requests but please file an issue and we will
+work with you.
+
 **Officially Supported Browsers:** The last two versions of Chrome, Edge, Firefox, and Safari.
 
 ## Useful links

lib/angular2_components.dart

@@ -13,6 +13,8 @@ const List<Type> materialDirectives = const [
   AutoDismissDirective,
   AutoFocusDirective,
   CachingDeferredContentDirective,
+  ClickableTooltipTargetDirective,
+  DarkThemeDirective,
   DeferredContentDirective,
   FixedMaterialTabStripComponent,
   FocusActivableItemDirective,
@@ -29,8 +31,12 @@ const List<Type> materialDirectives = const [
   MaterialExpansionPanel,
   MaterialExpansionPanelSet,
   MaterialFabComponent,
+  MaterialIconTooltipComponent,
+  MaterialInkTooltipComponent,
   MaterialInputComponent,
   MaterialInputDefaultValueAccessor,
+  MaterialMultilineInputComponent,
+  MaterialPaperTooltipComponent,
   MaterialPopupComponent,
   MaterialProgressComponent,
   MaterialRadioComponent,
@@ -40,8 +46,10 @@ const List<Type> materialDirectives = const [
   MaterialTabComponent,
   MaterialTabPanelComponent,
   MaterialToggleComponent,
+  MaterialTooltipDirective,
+  MaterialTooltipSourceDirective,
+  MaterialTooltipTargetDirective,
   MaterialYesNoButtonsComponent,
-  MaterialMultilineInputComponent,
   ModalComponent,
   NgModel,
   PopupSourceDirective,
@@ -53,5 +61,4 @@ const List<Type> materialDirectives = const [
 /// A convenience list of all providers exposed by this package.
 const List<List<Provider>> materialProviders = const <List<Provider>>[
   popupBindings,
-  rippleBindings,
 ];

lib/src/all_components.dart

@@ -38,13 +38,14 @@ export 'components/material_progress/material_progress.dart';
 export 'components/material_radio/material_radio.dart';
 export 'components/material_radio/material_radio_group.dart';
 export 'components/material_ripple/material_ripple.dart';
-export 'components/material_ripple/module.dart';
 export 'components/material_spinner/material_spinner.dart';
 export 'components/material_tab/fixed_material_tab_strip.dart';
 export 'components/material_tab/material_tab.dart';
 export 'components/material_tab/material_tab_panel.dart';
 export 'components/material_tab/tab_change_event.dart';
 export 'components/material_toggle/material_toggle.dart';
+export 'components/material_tooltip/material_tooltip.dart';
+export 'components/material_tooltip/module.dart';
 export 'components/material_yes_no_buttons/material_yes_no_buttons.dart';
 export 'components/mixins/focusable_mixin.dart';
 export 'components/mixins/has_tab_index.dart';

lib/src/components/annotations/rtl_annotation.dart

@@ -18,4 +18,6 @@ const rtlProvider =
     const Provider(rtlToken, useFactory: determineRtl, deps: const [Document]);
 
 @Injectable()
-bool determineRtl(Document document) => 'rtl' == document.documentElement.dir;
+bool determineRtl(Document document) =>
+    document.documentElement.dir == 'rtl' ||
+    (document as HtmlDocument).body.dir == 'rtl';

lib/src/components/material_button/material_button.dart

@@ -52,7 +52,7 @@ import 'material_button_base.dart';
 /// By default the ripple is the same color as the foreground at 25% opacity.
 /// You may customize the color using this selector:
 ///     /* Make #myButton use a blue ripple instead of foreground color */
-///     #myButton material-ripple {
+///     #myButton gpu-ripple {
 ///       color: blue;
 ///     }
 ///
@@ -72,6 +72,7 @@ import 'material_button_base.dart';
     host: const {
       '[class.is-disabled]': 'disabled',
       '[class.is-raised]': 'raised',
+      '[class.is-focused]': 'visualFocus',
       '(mousedown)': r'onMouseDown($event)',
       '(mouseup)': r'onMouseUp($event)',
       '(click)': r'handleClick($event)',

lib/src/components/material_button/material_button.html

@@ -9,6 +9,5 @@
 </div>
 <!-- Add a material ripple effect. When pressed, we will increase the z -->
 <material-ripple (mousedown)="onMouseDown($event)"
-                 (mouseup)="onMouseUp($event)"
-                 [focused]="visualFocus">
+                 (mouseup)="onMouseUp($event)">
 </material-ripple>

lib/src/components/material_button/material_button.scss.css

@@ -47,6 +47,9 @@ class MaterialButtonBase extends ButtonDirective {
   /// Whether button appears focused right now.
   bool get visualFocus => _focused;
 
+  /// Whether the mouse is currently pressed on the button.
+  bool get isMouseDown => _isMouseDown;
+
   /// The elevation the material-shadow component should show.
   ///
   /// When a button is pressed, this is increased.

lib/src/components/material_button/material_button_base.dart

@@ -56,6 +56,7 @@ import 'material_button_base.dart';
     host: const {
       '[class.is-disabled]': 'disabled',
       '[class.is-raised]': 'raised',
+      '[class.is-focused]': 'visualFocus',
       '(mousedown)': r'onMouseDown($event)',
       '(mouseup)': r'onMouseUp($event)',
       '(click)': r'handleClick($event)',