feat(grid): add CSS Grid directives and demo (#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();
+  });
+});

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

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+
+// Example taken from https://gridbyexample.com/examples/example13/
+/* tslint:disable */
+@Component({
+  selector: 'demo-grid-layout',
+  template: `
+    <mat-card class="card-demo">
+      <mat-card-title>Basic Responsive Grid App</mat-card-title>
+      <mat-card-content class="containerX">
+        <div class="colorNested box" style="height: auto;">
+          <div gdAreas.xs="header | sidebar | content | sidebar2 | footer" gdGap="1em"
+               gdColumns.xs="none"
+               gdAreas.sm="header header | sidebar content | sidebar2 sidebar2 | footer footer"
+               gdColumns.sm="20%!"
+               gdAreas.gt-sm="header header header | sidebar content sidebar2 | footer footer footer"
+               gdColumns.gt-sm="120px auto 120px" gdGap.gt-sm="20px" [ngStyle]="{'max-width': 'auto'}"
+               [ngStyle.gt-sm]="{'max-width': '600px'}">
+            <div class="blocks one" gdArea="header">Header</div>
+            <div class="blocks two" gdArea="sidebar">Sidebar</div>
+            <div class="blocks three" gdArea="sidebar2">Sidebar 2</div>
+            <div class="blocks four" gdArea="content">Content
+              <br /> More content than we had before so this column is now quite tall.</div>
+            <div class="blocks five" gdArea="footer">Footer</div>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  `
+})
+export class GridLayoutComponent {}

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

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

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

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+
+// Example taken from https://gridbyexample.com/examples/example29/
+@Component({
+  selector: 'demo-grid-minmax',
+  template: `
+    <mat-card class="card-demo">
+      <mat-card-title>Grid with Minmax</mat-card-title>
+      <mat-card-content class="containerX">
+        <div class="colorNested" style="height: auto;">
+          <div gdGap="10px" gdColumns="repeat(auto-fill, minmax(200px, 1fr))">
+            <div class="box" gdColumn="auto / span 2">A</div>
+            <div class="box">B</div>
+            <div class="box">C</div>
+            <div class="box">D</div>
+            <div class="box">E</div>
+            <div class="box">F</div>
+            <div class="box" gdColumn="auto / span 2" gdRow="auto / span 2">G</div>
+            <div class="box">H</div>
+            <div class="box">I</div>
+            <div class="box">J</div>
+            <div class="box" gdColumn="auto / span 3">K</div>
+            <div class="box">L</div>
+            <div class="box">M</div>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  `,
+  styles: [`.box {
+    /*background-color: #444;*/
+    /*color: #fff;*/
+    border-radius: 5px;
+    padding: 20px;
+    font-size: 150%;
+
+  }`]
+})
+export class GridMinmaxComponent {
+}

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

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

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

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+// Example taken from https://gridbyexample.com/examples/example21/
+@Component({
+  selector: 'demo-grid-nested',
+  template: `
+    <mat-card class="card-demo">
+      <mat-card-title>Nested Grid</mat-card-title>
+      <mat-card-content class="containerX">
+        <div class="colorNested" style="height: auto;">
+          <div gdGap="20px" gdColumns="repeat(4, [col] 150px)" gdRows="repeat(2, [row] auto)">
+            <div class="box" gdColumn="col / span 2" gdRow="row">A</div>
+            <div class="box" gdColumn="col 3 / span 2" gdRow="row">B</div>
+            <div class="box" gdColumn="col / span 2" gdRow="row 2">C</div>
+            <div class="box" gdColumn="col 3 / span 2" gdRow="row 2" gdGap="10px"
+                 gdColumns="1fr 1fr">
+              <div class="box one" gdColumn="1 / 3" gdRow="1">E</div>
+              <div class="box two" gdColumn="1" gdRow="2">F</div>
+              <div class="box three" gdColumn="2" gdRow="2">G</div>
+            </div>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  `,
+  styles: [`.box {
+    border-radius: 5px;
+    padding: 20px;
+    font-size: 150%;
+  }`]
+})
+export class GridNestedComponent {
+}

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

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