feat(grid): add CSS Grid directives and demo (angular#712)

* Add guide for using new CSS Grid directives under the guides directory
* Add five demos from gridbyexample.com
* Add testing for all components
* Change `BaseFxDirective` to `BaseDirective`. `BaseFxDirective`
  will remain but is deprecated and will be removed in beta.17
* Bump testing for Edge to v16 due to Grid incompatability
* Design doc: https://docs.google.com/document/d/1YjKHAV7-wh5UZd4snoyw6bVWe1X5JF-zDaUFa8-JDtE

Author: CaerusKaru

docs/documentation/API-Documentation.md

@@ -17,7 +17,7 @@ import {BREAKPOINTS} from '@angular/flex-layout';
 providers: [{provide: BREAKPOINTS, useValue: MY_CUSTOM_BREAKPOINTS }]
 ```
 
-* **[BaseFxDirectiveAdapter](https://github.com/angular/flex-layout/wiki/BaseFxDirectiveAdapter)**:  
+* **[BaseDirectiveAdapter](https://github.com/angular/flex-layout/wiki/BaseDirectiveAdapter)**:  
 Adapter class useful to extend existing Directives with MediaQuery activation features.  
 ```typescript
 import {NgClass} from '@angular/core';

docs/documentation/Custom-Breakpoints.md

@@ -81,7 +81,7 @@ Consider, for example, the
 
 ```typescript
 import {Directive} from '@angular/core';
-import {BaseFxDirective} from '@angular/flex-layout';
+import {BaseDirective} from '@angular/flex-layout';
 
 @Directive({selector: `
   [fxLayout],
@@ -95,7 +95,7 @@ import {BaseFxDirective} from '@angular/flex-layout';
   [fxLayout.gt-lg],
   [fxLayout.xl]
 `})
-export class LayoutDirective extends BaseFxDirective { 
+export class LayoutDirective extends BaseDirective { 
  ... 
 }
 ```

guides/Grid.md

@@ -0,0 +1,64 @@
+# CSS Grid with Angular Layout
+
+### Introduction
+
+CSS Grid is a relatively new, powerful layout library available in all evergreen browsers. It provides
+an extra level of dimensionality for constructing web layouts compared to Flexbox. We have added 11 new
+directives with responsive functionality to the Angular Layout library to enable developers to easily add
+the new engine to their apps.
+
+### Usage
+
+The new suite of directives is extensive, and covers the majority of CSS Grid functionality. The
+following table shows the parity between directives and CSS properties:
+
+| Grid Directive   | CSS Property(s)                           | Extra Inputs               |
+| ---------------- |:-----------------------------------------:| --------------------------:|
+| `gdAlignColumns` | `align-content` and `align-items`         | `gdInline` for inline-grid |
+| `gdAlignRows`    | `justify-content` and `justify-items`     | `gdInline` for inline-grid |
+| `gdArea`         | `grid-area`                               | none                       |
+| `gdAreas`        | `grid-areas`                              | `gdInline` for inline-grid |
+| `gdAuto`         | `grid-auto-flow`                          | `gdInline` for inline-grid |
+| `gdColumn`       | `grid-column`                             | none                       |
+| `gdColumns`      | `grid-template-columns`                   | `gdInline` for inline-grid<br>`!` at the end means `grid-auto-columns` |
+| `gdGap`          | `grid-gap`                                | `gdInline` for inline-grid |
+| `gdGridAlign`    | `justify-self` and `align-self`           | none                       |
+| `gdRow`          | `grid-row`                                | none                       |
+| `gdRows`         | `grid-template-rows`                      | `gdInline` for inline-grid<br>`!` at the end means `grid-auto-rows`  |
+
+Note: unless otherwise specified, the above table represents exact parity. The inputs for the
+directives will be mapped verbatim to the CSS property without sanitization
+
+### Limitations
+
+While CSS Grid has excellent cross-browser and mobile support, it is currently unsupported in IE11
+due to an outdated spec implementation
+
+### Using with Flexbox
+
+The new CSS Grid directives can be used in concert with the existing Flexbox directives seamlessly.
+Simply import the top-level `FlexLayoutModule`, or both `FlexModule` and `GridModule` as follows:
+
+```typescript
+import {FlexLayoutModule} from '@angular/flex-layout';
+```
+
+```typescript
+import {FlexModule} from '@angular/flex-layout/flex';
+import {GridModule} from '@angular/flex-layout/grid';
+```
+
+This allows you to use, for example, Flexbox inside a CSS Grid as follows:
+
+```html
+<div gdAuto>
+  <div fxLayout="row">
+    <div fxFlex></div>
+  </div>
+</div>
+```
+
+### References
+
+The design doc for this part of the library can be found
+[here](https://docs.google.com/document/d/1YjKHAV7-wh5UZd4snoyw6bVWe1X5JF-zDaUFa8-JDtE)

package-lock.json

@@ -33,7 +33,7 @@
     "@angular/core": "^6.0.0-rc.0",
     "@angular/platform-browser": "^6.0.0-rc.0",
     "core-js": "^2.4.1",
-    "rxjs": "^6.0.0-beta.4",
+    "rxjs": "^6.0.0-rc.0",
     "systemjs": "0.19.43",
     "tsickle": "^0.27.0",
     "tslib": "^1.8.0",

package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "@angular/cli": "1.7.2",
     "@angular/compiler-cli": "file:../../../node_modules/@angular/compiler-cli",
-    "@angular/language-service": "^6.0.0-rc.0",
+    "@angular/language-service": "^6.0.0-rc.1",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",

src/apps/demo-app/package.json

@@ -9,12 +9,10 @@ <h2>Layout Demos: </h2>
   <div fxFlex fxLayout="column"
        fxLayoutAlign="left top"
        style="font-size: 0.85em; margin-top: 10px; padding-bottom:20px; white-space:normal">
-    These Layout demos are curated from the Angular Material v1.x documentation, GitHub Issues,
-    StackOverflow,
-    and CodePen.
+    These Layout demos are curated from the AngularJS Material documentation, GitHub Issues, StackOverflow, and CodePen.
     <span class="title" style="font-size: 0.7em; font-weight:normal;">
-                Hint: Click on any of the samples below to toggle the layout direction(s).
-              </span>
+      Hint: Click on any of the samples below to toggle the layout direction(s).
+    </span>
   </div>
   <div fxLayout="row"
        fxLayoutAlign="start center"
@@ -23,6 +21,7 @@ <h2>Layout Demos: </h2>
     <button mat-raised-button color="primary" [routerLink]="['']">
       Static
     </button>
+    <button mat-raised-button color="primary" [routerLink]="['grid']"> Grids</button>
     <button mat-raised-button color="primary" [routerLink]="['responsive']"> Responsive
     </button>
     <button mat-raised-button color="primary" [routerLink]="['issues']"> Github</button>

src/apps/demo-app/src/app/app.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocsLayoutComponent } from './docs-grid.component';
+
+describe('DocsLayoutComponent', () => {
+  let component: DocsLayoutComponent;
+  let fixture: ComponentFixture<DocsLayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DocsLayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocsLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/apps/demo-app/src/app/grid/docs-grid/docs-grid.component.spec.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'demo-docs-grid',
+  template: `
+    <demo-grid-layout class="small-demo"></demo-grid-layout>
+    <demo-grid-nested class="small-demo"></demo-grid-nested>
+    <demo-grid-minmax class="small-demo"></demo-grid-minmax>
+    <demo-grid-position class="small-demo"></demo-grid-position>
+    <demo-grid-overlay class="small-demo"></demo-grid-overlay>
+  `
+})
+export class DocsGridComponent {}

src/apps/demo-app/src/app/grid/docs-grid/docs-grid.component.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlexOffsetValuesComponent } from './grid-layout.component';
+
+describe('FlexOffsetValuesComponent', () => {
+  let component: FlexOffsetValuesComponent;
+  let fixture: ComponentFixture<FlexOffsetValuesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FlexOffsetValuesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlexOffsetValuesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});