Add material_dialog component

Update all changes since last release.

Author: nshahan

CHANGELOG.md

@@ -1,8 +1,14 @@
-## 0.1.2
+## 0.2.0
 
+* Add a modal dialog window called material_dialog.
+* Rename MultilineMaterialInputComponent to MaterialMultilineInputComponent.
+* Make the deferredContent placeholder element optional, off by default. 
+* Remove InputTextModel.
+* Cleanup linter warnings.
+* Refactor color support.
 * Many components now support removing whitespace in the templates.
 * Refactor tab key index to a mixin.
-* Various UI tweaks and cleanup.
+* Various updates and cleanup.
 
 ## 0.1.1
 

README.md

@@ -5,7 +5,7 @@ applications.
 
 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. 
+possible.
 
 * ✓ `<glyph>`
 * ✓ `<material-button>`
@@ -22,13 +22,15 @@ possible.
 * ✓ `<material-yes-no-buttons>`
 * ✓ `<reorder-list>`
 * ✓ `<acx-scorecard>`
-* ✓ `<material-input>` 
+* ✓ `<material-input>`
+* ✓ `<material-dialog>`
+* ☐ `<material-popup>`
+* ☐ `<material-tooltip>`
 * ☐ `<material-auto-suggest-input>`
 * ☐ `<material-date-range-picker>`
-* ☐ `<material-dialog>`
 * ☐ `<material-list>`
 * ☐ `<material-menu>`
-* ☐ many more, including a fast table
+* many more, including a fast table
 
 
 ## Useful links

lib/angular2_components.dart

@@ -10,19 +10,22 @@ export 'src/all_components.dart';
 
 /// A convenience list of all Directives exposed by this package.
 const List<Type> materialDirectives = const [
+  AutoDismissDirective,
+  AutoFocusDirective,
   CachingDeferredContentDirective,
   DeferredContentDirective,
   FixedMaterialTabStripComponent,
   FocusActivableItemDirective,
   FocusItemDirective,
   FocusListDirective,
   FocusableDirective,
+  FocusTrapComponent,
   GlyphComponent,
-  InputTextModel,
   MaterialButtonComponent,
   MaterialCheckboxComponent,
   MaterialChipComponent,
   MaterialChipsComponent,
+  MaterialDialogComponent,
   MaterialExpansionPanel,
   MaterialExpansionPanelSet,
   MaterialFabComponent,
@@ -37,13 +40,16 @@ const List<Type> materialDirectives = const [
   MaterialTabPanelComponent,
   MaterialToggleComponent,
   MaterialYesNoButtonsComponent,
-  MultilineMaterialInputComponent,
+  MaterialMultilineInputComponent,
+  ModalComponent,
+  NgModel,
   ReorderItemDirective,
   ReorderListComponent,
-  ScorecardComponent
+  ScorecardComponent,
 ];
 
 /// A convenience list of all providers exposed by this package.
 const List<List<Provider>> materialProviders = const <List<Provider>>[
-  rippleBindings
+  rippleBindings,
+  overlayBindings,
 ];

lib/src/all_components.dart

@@ -5,13 +5,15 @@
 library angular2_components.all_components;
 
 export 'components/annotations/rtl_annotation.dart';
+export 'components/auto_dismiss/auto_dismiss.dart';
 export 'components/button_decorator/button_decorator.dart';
 export 'components/content/deferred_content.dart';
 export 'components/content/deferred_content_aware.dart';
 export 'components/focus/focus.dart';
 export 'components/focus/focus_activable_item.dart';
 export 'components/focus/focus_item.dart';
 export 'components/focus/focus_list.dart';
+export 'components/focus/focus_trap.dart';
 export 'components/focus/keyboard_only_focus_indicator.dart';
 export 'components/glyph/glyph.dart';
 export 'components/material_button/material_button.dart';
@@ -21,6 +23,7 @@ export 'components/material_checkbox/material_checkbox.dart'
     show MaterialCheckboxComponent;
 export 'components/material_chips/material_chip.dart';
 export 'components/material_chips/material_chips.dart';
+export 'components/material_dialog/material_dialog.dart';
 export 'components/material_expansionpanel/material_expansionpanel.dart';
 export 'components/material_expansionpanel/material_expansionpanel_set.dart';
 export 'components/material_input/base_material_input.dart';
@@ -35,14 +38,10 @@ 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_ripple/src/wave.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/src/navigation_bar.dart';
-export 'components/material_tab/src/tab_button.dart';
-export 'components/material_tab/src/tab_mixin.dart';
 export 'components/material_tab/tab_change_event.dart';
 export 'components/material_toggle/material_toggle.dart';
 export 'components/material_yes_no_buttons/material_yes_no_buttons.dart';
@@ -51,6 +50,7 @@ export 'components/mixins/has_tab_index.dart';
 export 'components/reorder_list/reorder_list.dart';
 export 'components/scorecard/scoreboard.dart';
 export 'components/scorecard/scorecard.dart';
-export 'components/scorecard/src/scorecard_bar.dart';
 export 'components/theme/dark_theme.dart';
 export 'components/theme/module.dart';
+export 'laminate/components/modal/modal.dart';
+export 'laminate/overlay/module.dart';

lib/src/components/auto_dismiss/auto_dismiss.dart

@@ -0,0 +1,61 @@
+// 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 'package:angular2/angular2.dart';
+
+import '../../utils/angular/properties/properties.dart';
+import '../../utils/browser/events/events.dart';
+
+/// A directive that publishes a (dismiss) event when the user clicks outside of
+/// it.
+///
+/// Note: For [MaterialExpansionPanel] please consider using the dedicated
+///       directive [MaterialExpansionPanelAutoDismiss].
+///
+/// __Example Usage:__
+///
+///     <div>
+///       <div class="disclaimer" [class.visible]="disclaimerVisible"
+///            [autoDismissable]="disclaimerVisible"
+///            (dismiss)="disclaimerVisible = false">
+///         Some scary disclaimery text
+///       <div>
+///       <button (click)="disclaimerVisible = true">Confirm</button>
+///     </div>
+///
+@Directive(selector: '[autoDismissable]:not(material-expansionpanel)')
+class AutoDismissDirective {
+  final Stream _click;
+  final NgZone _zone;
+
+  AutoDismissDirective(ElementRef element, this._zone)
+      : _click = triggersOutside(element);
+
+  bool _ignoreClicks = false;
+  bool _autoDismissable = false;
+  bool get autoDismissable => _autoDismissable;
+
+  /// Boolean indicating if the dismiss event be published.
+  @Input()
+  set autoDismissable(b) {
+    _autoDismissable = getBool(b);
+
+    // If a click set autoDismissable to `true`, then we don't want the same
+    // click to dismiss right away. Stop listening for clicks until we see a
+    // click event, or until the next event loop.
+    _ignoreClicks = b;
+    _click.first.then(_listenForClicks);
+    // Run the timer outside of Angular so that it doesn't trigger a new digest
+    // cycle.
+    _zone.runOutsideAngular(() => Timer.run(_listenForClicks));
+  }
+
+  /// Event which is published when the user clicks outside of the element.
+  @Output()
+  Stream get dismiss => _click.where((_) => _autoDismissable && !_ignoreClicks);
+
+  _listenForClicks([_]) => _ignoreClicks = false;
+}

lib/src/components/content/deferred_content.dart

@@ -6,6 +6,7 @@ import 'dart:html';
 
 import 'package:angular2/angular2.dart';
 
+import '../../utils/angular/properties/properties.dart';
 import '../../utils/disposer/disposer.dart';
 
 import 'deferred_content_aware.dart';
@@ -31,35 +32,51 @@ class DeferredContentDirective implements OnDestroy {
   EmbeddedViewRef _viewRef;
   TemplateRef _template;
 
+  /// Create a placeholder element to maintain content size when hidden.
+  ///
+  /// Used like *deferredContent="true".
+  bool _preserveDimensions = false;
+  @Input('deferredContent')
+  set preserveDimensions(value) {
+    // If it's just *deferredContent, default to false.
+    _preserveDimensions = getBool(value ?? false);
+  }
+
   // Keep around the current state.
   bool _visible = false;
 
   void _setVisible(bool value) {
     if (value == _visible) return;
     if (value) {
-      // Remove the placeholder and add the deferred content.
-      _placeholder.remove();
+      if (_preserveDimensions) {
+        // Remove the placeholder and add the deferred content.
+        _placeholder.remove();
+      }
       _viewRef = _viewContainer.createEmbeddedView(_template);
     } else {
-      // Save the dimensions of the deferred content.
-      var rootNodes = _viewRef?.rootNodes ?? [];
-      var content = rootNodes.length > 0 ? rootNodes.first : null;
-      if (content is HtmlElement) {
-        // This isn't in DomService.schedule{Read,Write} because
-        // it needs to work with components that aren't scheduled.
-        var dimensions = content.getBoundingClientRect();
-        _placeholder.style
-          ..width = '${dimensions.width}px'
-          ..height = '${dimensions.height}px';
+      if (_preserveDimensions) {
+        // Save the dimensions of the deferred content.
+        var rootNodes = _viewRef?.rootNodes ?? [];
+        var content = rootNodes.length > 0 ? rootNodes.first : null;
+        if (content is HtmlElement) {
+          // This isn't in DomService.schedule{Read,Write} because
+          // it needs to work with components that aren't scheduled.
+          var dimensions = content.getBoundingClientRect();
+          _placeholder.style
+            ..width = '${dimensions.width}px'
+            ..height = '${dimensions.height}px';
+        }
       }
 
       // Remove the deferred content.
       _viewContainer.clear();
 
-      // Add the placeholder so the parent's size doesn't change.
-      var container = _viewContainer.element?.nativeElement;
-      if (container != null) {
-        container.parentNode.insertBefore(_placeholder, container);
+      if (_preserveDimensions) {
+        // Add the placeholder so the parent's size doesn't change.
+        var container = _viewContainer.element?.nativeElement;
+        if (container != null) {
+          container.parentNode.insertBefore(_placeholder, container);
+        }
       }
     }
     _visible = value;

lib/src/components/focus/focus.dart

@@ -7,6 +7,10 @@ import 'dart:html' show KeyCode, KeyboardEvent, Element;
 
 import 'package:angular2/angular2.dart';
 
+import '../../laminate/components/modal/modal.dart';
+import '../../laminate/popup/popup.dart';
+import '../../utils/angular/properties/properties.dart';
+import '../../utils/browser/dom_service/dom_service.dart';
 import '../../utils/disposer/disposer.dart';
 
 /// A component or directive that can be programmatically focused.
@@ -38,6 +42,7 @@ abstract class RootFocusable implements Focusable, Disposable {
     element.focus();
   }
 
+  @override
   void dispose() {
     _root = null;
   }
@@ -118,6 +123,82 @@ class FocusMoveEvent {
       keyCode == KeyCode.LEFT || keyCode == KeyCode.UP;
 }
 
+/// The element will be focused as soon as directive is initialized.
+///
+/// Please put only on content that appears after user action and
+/// requires focus to be changed to it.
+@Directive(selector: '[autoFocus]')
+class AutoFocusDirective extends RootFocusable implements OnInit, OnDestroy {
+  final _disposer = new Disposer.oneShot();
+
+  bool _autoFocus;
+  // These fields are not final to support nulling them out for easier memory
+  // leak detection.
+  Focusable _focusable;
+  DomService _domService;
+  ModalComponent _modal;
+  PopupRef _popupRef;
+
+  AutoFocusDirective(
+      ElementRef node,
+      this._domService,
+      @Optional() this._focusable,
+      @Optional() this._modal,
+      @Optional() this._popupRef)
+      : super(node);
+
+  @override
+  void ngOnInit() {
+    if (!_autoFocus) return;
+
+    if (_modal != null || _popupRef != null) {
+      var isVisible = _popupRef != null
+          ? _popupRef.isVisible
+          : _modal.resolvedOverlayRef.isVisible;
+      _onModalOrPopupVisibleChanged(isVisible);
+
+      var onVisibleChanged = _popupRef != null
+          ? _popupRef.onVisibleChanged
+          : _modal.resolvedOverlayRef.onVisibleChanged;
+      _disposer.addStreamSubscription(
+          onVisibleChanged.listen(_onModalOrPopupVisibleChanged));
+    } else {
+      _domService.scheduleWrite(focus);
+    }
+  }
+
+  /// Enables the auto focus directive so that it can be conditionally applied.
+  ///
+  /// This value should not change during the component's life.
+  @Input()
+  set autoFocus(value) {
+    assert(_autoFocus == null);
+    _autoFocus = getBool(value);
+  }
+
+  @override
+  void focus() {
+    if (_focusable != null) {
+      _focusable.focus();
+    } else {
+      super.focus();
+    }
+  }
+
+  @override
+  void ngOnDestroy() {
+    super.dispose();
+    _disposer.dispose();
+    _focusable = null;
+    _domService = null;
+    _modal = null;
+    _popupRef = null;
+  }
+
+  void _onModalOrPopupVisibleChanged(bool isVisible) {
+    if (isVisible) _domService.scheduleWrite(focus);
+  }
+}
 
 /// This directive is used to [ViewChild] focusable element in your view.
 @Directive(selector: '[focusableElement]', exportAs: 'focusableElement')

lib/src/components/focus/focus_activable_item.dart

@@ -17,6 +17,7 @@ class FocusActivableItemDirective extends RootFocusable
     implements FocusableActivateItem {
   /// Key to assign to the focusable item.
   @Input('focusActivableItem')
+  @override
   String key;
 
   FocusActivableItemDirective(ElementRef root) : super(root);

lib/src/components/focus/focus_list.dart

@@ -94,6 +94,7 @@ class FocusListDirective implements OnDestroy {
     _children[newIndex].tabbable = true;
   }
 
+  @override
   void ngOnDestroy() {
     _disposer.dispose();
   }