feat(core): add print support with mediaQuery override (#954)

When printing developers can now configure how layouts should render. Default print will use the current layout and current elements shown/visible. By specifying 1..n mediaQuery aliases, developers can specify alternate layouts with alternate breakpoints to be used for printing. Elements can also be shown and hidden for printing-only. 

>  This feature supports totally different print outputs without modifying the current browser layout.

Implement PrintHook service to intercept print mediaQuery activation events.
  * add fxShow.print and fxHide.print support to show/hide elements during printing
  * suspend activation changes in MediaMarshaller while print-mode is active
  * trigger MediaObserver to notify subscribers with print mqAlias(es)
  * use PrintHook to intercept activation changes in MediaMarshaller while print-mode is active
  * trigger MediaObserver to notify subscribers with print mqAlias(es)
  * add watermark component to Demo app that is shown only during printing

Using the new `printWithBreakpoint` allows developers to specify a breakpoint that should be used to render layouts only during printing. With the configuration below, the breakpoint associated with the **`md`** alias will be used.

```ts
    FlexLayoutModule.withConfig({
      useColumnBasisZero: false,
      printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
    })
```
Shown below is the print layout rendered in floating dialog over the normal layout that is currently using 'lg' breakpoints.

![angular-layout-printing](https://user-images.githubusercontent.com/210413/50407211-2e04ca00-0798-11e9-8f35-b4e9e2fca864.jpg)

Fixes #603.

Author: ThomasBurleson

docs/documentation/BreakPoints.md

@@ -42,7 +42,7 @@ import {BREAKPOINT} from '@angular/flex-layout';
 const PRINT_BREAKPOINTS = [{
   alias: 'xs.print',
   suffix: 'XsPrint',
-  mediaQuery: 'print and (max-width: 297px)',
+  mediaQuery: 'screen and (max-width: 297px)',
   overlapping: false
 }];
 
@@ -157,4 +157,4 @@ export class CustomShowHideDirective extends ShowHideDirective {
     this._cacheInput("showXsPrint", negativeOf(val));
   }
 }
-```
+```

docs/documentation/fxHide-API.md

@@ -24,7 +24,7 @@ e.g.
 
 ### Using Responsive API
 
-When a mediaQuery range activates, the directive instances will be notified. If the current activate mediaQuery range 
+When a mediaQuery range activates, the directive instances will be notified. If the current activated mediaQuery range 
 (and its associated alias) are not used, then the static API value is restored as the fallback value.
 
 The *fallback* solution uses a **`largest_range-to-smallest_range`** search algorithm. Consider the following:

docs/documentation/fxShow-API.md

@@ -24,7 +24,7 @@ e.g.
 
 ### Using Responsive API
 
-When a mediaQuery range activates, the directive instances will be notified. If the current activate mediaQuery range 
+When a mediaQuery range activates, the directive instances will be notified. If the current activated mediaQuery range 
 (and its associated alias) are not used, then the static API value is restored as the fallback value.
 
 The *fallback* solution uses a **`largest_range-to-smallest_range`** search algorithm. Consider the following:

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

@@ -13,8 +13,8 @@ <h2>Layout Demos: </h2>
     </span>
   </div>
   <div fxLayout="row"
-       fxLayoutAlign="start center"
        fxLayoutGap="20px"
+       fxHide.print
        style="height:40px; min-height:40px;">
     <button mat-raised-button color="primary" [routerLink]="['']">
       Static
@@ -30,4 +30,8 @@ <h2>Layout Demos: </h2>
 
 <div class="demo-content">
   <router-outlet></router-outlet>
+  <watermark
+      title="@angular/layout"
+      message="HTML Layouts w/ Flex and Grid CSS"
+      fxHide fxShow.print></watermark>
 </div>

src/apps/demo-app/src/app/app.module.ts

@@ -6,26 +6,31 @@ import {FlexLayoutModule, BREAKPOINT} from '@angular/flex-layout';
 import {RoutingModule} from './routing.module';
 import {AppComponent} from './app.component';
 import {DemoMaterialModule} from './material.module';
+import {WatermarkComponent} from './watermark.component';
 
-const PRINT_BREAKPOINTS = [{
-  alias: 'xs.print',
-  suffix: 'XsPrint',
-  mediaQuery: 'print and (max-width: 297px)',
+const EXTRA_BREAKPOINT = [{
+  alias: 'xs.landscape',
+  suffix: 'XsLandscape',
+  mediaQuery: 'screen and (orientation: landscape) and (max-width: 559px)',
+  priority: 1000,
   overlapping: false
 }];
 
 @NgModule({
   declarations: [
-    AppComponent,
+    AppComponent, WatermarkComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     BrowserAnimationsModule,
     RoutingModule,
     DemoMaterialModule,
-    FlexLayoutModule.withConfig({useColumnBasisZero: false}),
+    FlexLayoutModule.withConfig({
+      useColumnBasisZero: false,
+      printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
+    }),
   ],
-  providers: [{provide: BREAKPOINT, useValue: PRINT_BREAKPOINTS, multi: true}],
+  providers: [{provide: BREAKPOINT, useValue: EXTRA_BREAKPOINT, multi: true}],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -3,7 +3,8 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'demo-docs-responsive',
   template: `
-    <demo-responsive-layout-direction  class='small-demo'>  </demo-responsive-layout-direction>
+    <demo-responsive-layout-direction  class='small-demo' fxHide.print>
+    </demo-responsive-layout-direction>
     <demo-responsive-row-column class='small-demo'>  </demo-responsive-row-column>
     <demo-responsive-flex-directive  class='small-demo'>  </demo-responsive-flex-directive>
     <demo-responsive-flex-order  class='small-demo'>  </demo-responsive-flex-order>

src/apps/demo-app/src/app/watermark.component.scss

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  position: absolute;
+
+  width: 100vw;
+  min-height: 100vh;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  div {
+    width: 100vw;
+    min-height: 100vh;
+  }
+}

src/apps/demo-app/src/app/watermark.component.ts

@@ -0,0 +1,56 @@
+import {Component, Input} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+@Component({
+  selector: 'watermark',
+  styleUrls: ['watermark.component.scss'],
+  template: `
+    <div [style.background]="backgroundImage">
+    </div>
+  `,
+})
+export class WatermarkComponent {
+  @Input() title = '@angular/layout';
+  @Input() message = 'Layout with FlexBox + CSS Grid';
+
+  constructor(private _sanitizer: DomSanitizer) {
+  }
+
+  /* tslint:disable:max-line-length */
+  get backgroundImage() {
+    const rawSVG = `
+       <svg id="diagonalWatermark"
+         width="100%" height="100%"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink" >
+          <style type="text/css">
+            text {
+              fill: currentColor;
+              font-family: Avenir, Arial, Helvetica, sans-serif;
+              opacity: 0.25;
+            }
+          </style>
+          <defs>
+            <pattern id="titlePattern" patternUnits="userSpaceOnUse" width="350" height="150">
+              <text y="30" font-size="30" id="title">
+               ${this.title}
+              </text>
+            </pattern>
+            <pattern xlink:href="#titlePattern">
+              <text y="60" x="0" font-size="16" id="message" width="350" height="150">
+                ${this.message}
+              </text>
+            </pattern>
+            <pattern id="combo" xlink:href="#titlePattern" patternTransform="rotate(-30)">
+              <use xlink:href="#title"/>
+              <use xlink:href="#message"/>
+            </pattern>
+          </defs>
+          	<rect width="100%" height="100%" fill="url(#combo)"/>
+        </svg>
+    `;
+    const bkgrndImageUrl = `data:image/svg+xml;base64,${window.btoa(rawSVG)}`;
+
+    return this._sanitizer.bypassSecurityTrustStyle(`url('${bkgrndImageUrl}') repeat-y`);
+  }
+}

src/apps/demo-app/src/styles.scss

@@ -8,6 +8,18 @@ body {
   font-size: 16px;
   line-height: 1.4;
   -webkit-font-smoothing: antialiased;
+  -webkit-print-color-adjust: exact !important;
+}
+
+@page {
+   size: auto;   /* auto is the initial value */
+   margin: 2cm;
+}
+
+@media print {
+  body {
+    background: white;
+  }
 }
 
 h3 {

src/lib/core/add-alias.ts

@@ -14,7 +14,7 @@ import {extendObject} from '../utils/object-extend';
  * and suffix (if available).
  */
 export function mergeAlias(dest: MediaChange, source: BreakPoint | null): MediaChange {
-  return extendObject(dest, source ? {
+  return extendObject(dest || {}, source ? {
         mqAlias: source.alias,
         suffix: source.suffix
       } : {});