Update all components (#153)

 * Update dependency to angular: ^4.0.0.
 * App Layout: Fix margins for header icons/links.
 * Material Button: Refactor raised styling so it can be used in a mixin.
 * Material Input: Add support for material dark theme.
 * Material Popup:
   * Constrain popups to the viewport if both `enforceSpaceConstraints` and
     `overlayRepositionLoop` are enabled.
   * Create the material-popup view synchronously.
   * Remove `animationComplete` event.
 * Add missing `MaterialIconComponent`, `MaterialPersistentDrawerDirective`,
   `MaterialTemporaryDrawerDirective`, and `MaterialSelectSearchboxComponent` to
   `materialDirectives`.
 * Change DisplayNameDirective to a functional directive.
 * Additional styling cleanup to support `ng-deep`.
 * Reduce visibility of common directives/components for smaller code size and
   better performance.
 * Refactor Angular annotations to inline versions.
 * Update documentation.

Author: nshahan

CHANGELOG.md

@@ -1,140 +1,114 @@
-## 0.6.0-beta
+## 0.6.0
 
-> NOTE: This code is considered production quality, but depends on angular:
-> 4.0.0-beta. The alpha tag represents the evolving nature of the AngularDart
-> api, not code quality (4.0.0-beta is used in production Google apps).
-
- * Material Dialog: Support a minimum height.
- * Material Input: Fix disabled color.
- * Material Popup: Additional merges to prepare for final refactoring.
- * Material Tree: Update positioning options and borders.
- * Deprecate LazyEventEmitter and migrate uses to the StreamController model.
- * Remove use of Compass in SASS files.
- * Remove unused alignment parameters.
- * Refactor Angular annotations to inline versions.
-
-## 0.6.0-alpha+3
-
-> NOTE: This code is considered production quality, but depends on angular:
-> 4.0.0-alpha+3. The alpha tag represents the evolving nature of the AngularDart
-> api, not code quality (4.0.0-alpha is used in production Google apps).
-
- * Add Application Layout styles and directives.
+ * Update dependency to angular: ^4.0.0.
+ * Update SDK dependencies.
  * Add Material Select Searchbox component.
- * Material Expansionpanel: Add high density mixin.
+ * Add Application Layout styles and directives.
+ * Add Material Icon.
+   * Deprecate `GlyphComponent` in favor of `MaterialIconComponent`.
+ * App Layout: Fix margins for header icons/links.
+ * Dynamic Component: Add ability to use `ComponentFactory` instead of a `Type`.
+ * Material Button: Refactor raised styling so it can be used in a mixin.
+ * Material Checkbox:
+   * Add ability to make readonly.
+   * Add mixin for checkbox with no left margin.
+ * Material Chips: Add ability to specify background color for left icon.
+ * Material Dialog:
+   * Support a minimum height.
+   * Fix header mixin.
+ * Material Expansionpanel:
+   * Add high density mixin.
+   * Add mixin to allow changes to panels without affecting nested panels.
  * Material Icon: Add back and forward arrows to the list of flipped icons.
- * Material Input: Add leading text color mixin.
+ * Material Input:
+   * Add support for material dark theme.
+   * Fix disabled color.
+   * Add leading text color mixin.
+   * Make local required errors to make controls invalid even when the control
+     has not been interacted with.
+   * Add upper and lower bounds validators.
+   * Re-calculate text length when custom character counter is set.
+   * Prevent mirror-text overflow in multiline material input.
+   * Remove unnecessary selector argument from mixins.
  * Material Popup:
+   * Constrain popups to the viewport if both `enforceSpaceConstraints` and
+     `overlayRepositionLoop` are enabled.
+   * Create the material-popup view synchronously.
+   * Remove `animationComplete` event.
    * Integrate with Angular CSS shimming and remove `shadowCssClass`.
    * Material design scrollbars by default (instead of the native scrollbars).
    * Add ARIA attributes.
- * Material Select: Fix selectable menu item property functionality.
- * Material Tree:
-   * Add optional row separator borders.
-   * Fix dropdown closing on toggle issue.
- * Material Tooltips: Add ARIA attributes.
- * Improve performance of `TreeSelectionOptions` constructor from O(n^2) to O(n)
-   in the size of `listOfOptions`.
- * Remove uses of 'getBool' in boolean typed inputs.
- * Remove use of Compass in SASS files.
- * Refactor Angular annotations to inline versions.
-
-## 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:
-> 4.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart
-> api, not code quality (4.0.0-alpha is used in production Google apps).
-
- * Add Material Icon.
- * Deprecate `GlyphComponent` in favor of `MaterialIconComponent`.
- * Update dependency to angular: 4.0.0-alpha+1.
- * Material Checkbox: Add mixin for checkbox with no left margin.
- * Material Chips: Add ability to specify background color for left icon.
- * Material Expansionpanel: Add mixin to allow changes to panels without
-   affecting nested panels.
- * Material Input:
-   * Add upper and lower bounds validators.
-   * Re-calculate text length when custom character counter is set.
-   * Prevent mirror-text overflow in multiline material input.
-   * Remove unnecessary selector argument from mixins.
- * Material Popup: Only set content removed if the popup is still not visible
-   when the timer is finished.
+   * Only set content removed if the popup is still not visible when the timer
+     is finished.
  * Material Radio:
    * Add mixin for radio button with no left margin.
    * Fix mixin to respect disabled status when a theme is applied.
  * Material Select:
+   * Fix selectable menu item property functionality.
+   * Allow dropdown to display an error while it's closed.
    * Fix `MaterialSelectItemComponent` to not cache the label.
    * Add input to material-dropdown-select to define custom a renderer for group
      labels.
    * Fix checkbox display handling and label padding in dropdown.
  * Material Toggle: Set the attribute instead of the property to fix a bug with
    incorrect type, and not setting the right property.
+ * Material Tooltips: Add ARIA attributes.
  * Material Tree:
+   * Update positioning options and borders.
+   * Add optional row separator borders.
+   * Fix dropdown closing on toggle issue.
+   * Added shift selection/deselection.
+   * Fix glyphs always shown expanded when `expandAll = true`.
    * Add ability to preserve expansion state.
    * Fix indentation of first child group.
    * Add input `showDisabledCheckboxes`.
    * Add a max-height mixin.
+ * Material Yes/No Buttons: Add dense style.
  * Reorder List:
    * Update to recommended syntax for ngFor.
    * Migrate from ManagedZone to NgZone.
  * Scorecard:
+   * Update tab index to prevent scroll errors when going through
+     buttons with tabs.
    * Replace deprecated Glyph with Material Icon.
    * Invoke inherited click handler from derived click handler.
- * Avoid adding placeholder for deferred content if the element is detached.
  * Selection Models:
    * Add deselect all option.
    * Add a limited filtering model.
    * Fix `selectAll` to only trigger a selection change event for the values
      that were added.
    * Add comparator as optional param to tree selection options for custom
      sorting.
+ * Avoid adding placeholder for deferred content if the element is detached.
+ * Add new color utils.
+ * Update animations to new Material specs.
+ * Migrate uses of `GlyphComponent` to `MaterialIconComponent`.
+ * Migrate uses of `ElementRef` to `Element`.
+ * Remove duplicate PopupSourceDirective.
+ * Remove deprecated popup `matchSourceWidth` options.
+ * Add missing `MaterialIconComponent`, `MaterialPersistentDrawerDirective`,
+   `MaterialTemporaryDrawerDirective`, and `MaterialSelectSearchboxComponent` to
+   `materialDirectives`.
+ * Improve performance of `TreeSelectionOptions` constructor from O(n^2) to O(n)
+    in the size of `listOfOptions`.
+ * Change DisplayNameRenderDirective to a functional directive.
+ * Deprecate LazyEventEmitter and migrate uses to the StreamController model.
+ * Additional styling cleanup to support `ng-deep`.
+ * Reduce visibility of common directives/components for smaller code size and
+   better performance.
+ * Remove use of Compass in SASS files.
+ * Remove uses of `getBool` in boolean typed inputs.
+ * Remove unused alignment parameters.
  * Updates to use metadata inheritance.
  * Migrate away from comment-style generic syntax.
  * Migrate stylesheet combinators `/deep/` and `>>>` to `::ng-deep`.
  * Migrate away from use of angular's `@View`.
- * Update animations to new Material specs.
- * Update documentation.
  * Remove unused library statements.
-
-## 0.6.0-alpha
-
-> NOTE: This code is considered production quality, but depends on angular:
-> 4.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart
-> api, not code quality (4.0.0-alpha is used in production Google apps).
-
- * Update dependency to `angular: 4.0.0-alpha`.
- * Update SDK dependencies.
+ * Refactor Angular annotations to inline versions.
+ * Update documentation.
 
 ### Known Issues
  * Warnings are present when building with dart2js. Specifically:

lib/angular_components.dart

@@ -11,7 +11,7 @@ import 'src/all_components.dart';
 export 'src/all_components.dart';
 
 /// A convenience list of all Directives exposed by this package.
-const List<Type> materialDirectives = const [
+const List<dynamic> materialDirectives = const [
   AutoDismissDirective,
   AutoFocusDirective,
   CachingDeferredContentDirective,
@@ -35,6 +35,7 @@ const List<Type> materialDirectives = const [
   MaterialExpansionPanel,
   MaterialExpansionPanelSet,
   MaterialFabComponent,
+  MaterialIconComponent,
   MaterialIconTooltipComponent,
   MaterialInkTooltipComponent,
   MaterialInputComponent,
@@ -43,13 +44,16 @@ const List<Type> materialDirectives = const [
   MaterialListItemComponent,
   MaterialMultilineInputComponent,
   MaterialPaperTooltipComponent,
+  MaterialPersistentDrawerDirective,
+  MaterialTemporaryDrawerComponent,
   MaterialPopupComponent,
   MaterialProgressComponent,
   MaterialRadioComponent,
   MaterialRadioGroupComponent,
   MaterialRippleComponent,
   MaterialSelectComponent,
   MaterialSelectItemComponent,
+  MaterialSelectSearchboxComponent,
   MaterialSpinnerComponent,
   MaterialTabComponent,
   MaterialTabPanelComponent,

lib/src/components/app_layout/README.md

@@ -10,17 +10,17 @@ the material spec.
 ## Setup
 
 The styles are provided by
-`package:third_party.dart_src.acx.app_layout/layout.scss.css`. To use these
-styles in an angular component simply add it as a `styleUrls` value in your
-`Component` annotation. It is suggested that the style is added before any
+`package:angular_components/src/components/app_layout/layout.scss.css`. To use 
+these styles in an angular component simply add it as a `styleUrls` value in 
+your `Component` annotation. It is suggested that the style is added before any
 component specific styling so you can easily override style values as needed.
 
 ```dart
 @Component(
     selector: 'my-component',
     templateUrl: 'my_component.html',
     styleUrls: const [
-      'package:third_party.dart_src.acx.app_layout/layout.scss.css',
+      'package:angular_components/src/components/app_layout/layout.scss.css',
       'my_component.scss.css'])
 class MyComponent {}
 ```
@@ -41,7 +41,7 @@ dense-header            | Makes the App Bar denser for interfaces that primarily
 material-drawer-button  | A button within the row that is placed on the left and <br>is used for navigation.
 material-header-title   | A title for the header.
 material-spacer         | Consumes space between the title and any navigation <br>links. Needs to be placed after the title and before <br>any navigation elements.
-material-navigation     | Navigation elements which will be displayed on the <br>left side of the header.
+material-navigation     | Navigation elements which will be displayed on the <br>left side of the header. Only use with anchor tags, <br>material-button have there own styling built in.
 
 <!-- mdformat on -->
 

lib/src/components/app_layout/layout.scss

@@ -19,7 +19,12 @@
 @import 'lib/src/css/material/material';
 @import 'lib/src/components/material_list/mixins';
 
+$mat-toolbar-mobile-breakpoint: 599px;
 $mat-drawer-border: 1px solid $mat-border-light;
+// Desktop spec calls for 24px margins have each element contribute half.
+$mat-desktop-drawer-margin: 3 * $mat-grid / 2;
+// Mobile spec calls for 16px margins have each element contribute half.
+$mat-mobile-drawer-margin: $mat-grid;
 
 material-drawer[persistent],
 material-drawer[permanent] {
@@ -168,16 +173,18 @@ $mat-header-dense-height: 48px;
   flex-shrink: 0;
   flex-wrap: nowrap;
   height: $mat-header-height;
-  margin: 0;
-  padding: 0 $mat-grid;
+  margin: 0 $mat-desktop-drawer-margin;
   // Allow title, and drawer button to be positioned absolutely.
   position: relative;
 
+  @media (max-width: $mat-toolbar-mobile-breakpoint) {
+    margin: 0 $mat-mobile-drawer-margin;
+  }
+
   // Special drawer button used to open/close the drawer.
   // Positioned at the start of the header.
   > .material-drawer-button {
     cursor: pointer;
-    margin-left: $mat-grid;
   }
 
   /// Class uses for the title inside of a header.
@@ -204,11 +211,20 @@ $mat-header-dense-height: 48px;
   }
 
   material-button {
-    margin: 0 $mat-grid;
+    // drawer margin - margin from button for ripple.
+    margin: 0 $mat-desktop-drawer-margin - $mat-grid;
+
+    @media (max-width: $mat-toolbar-mobile-breakpoint) {
+      margin: 0 $mat-mobile-drawer-margin - $mat-grid;
+    }
   }
 
   .material-navigation {
-    margin: 0 $mat-grid * 3;
+    margin: 0 $mat-desktop-drawer-margin;
+
+    @media (max-width: $mat-toolbar-mobile-breakpoint) {
+      margin: 0 $mat-mobile-drawer-margin;
+    }
   }
 
   > * {