chore(api): remove deprecated fxLayoutWrap

Closes #521, #565.
Fixes #564.

Author: CaerusKaru

src/demo-app/app/docs-layout/flexOtherValues.demo.ts

@@ -23,7 +23,7 @@ import {Component} from '@angular/core';
         </div>
       </mat-card-content>
       <mat-card-footer>
-        <div class="hint">&lt;div fxLayout="row" fxLayoutWrap &gt;</div>
+        <div class="hint">&lt;div fxLayout="row wrap" &gt;</div>
       </mat-card-footer>
     </mat-card>
   `

src/demo-app/app/docs-layout/flexRowFillWrap.demo.ts

@@ -10,7 +10,7 @@ import {Component} from '@angular/core';
       </mat-card-subtitle>
       <mat-card-content>
         <div class="containerX">
-          <div [fxLayout]="direction" fxLayoutWrap class="colored wrapped box"
+          <div [fxLayout]="direction + ' wrap'" class="colored wrapped box"
                (click)="toggleDirection()" style="cursor: pointer;">
 
             <div fxFlex="30"> fxFlex="30"</div>

src/demo-app/app/github-issues/issue.9897.demo.ts

@@ -14,7 +14,7 @@ import {Component} from '@angular/core';
       <mat-card-subtitle>Safari bug with layout-wrap and flex % values</mat-card-subtitle>
       <mat-card-content>
         <div class="containerX">
-          <div fxLayout="row" [fxLayoutWrap]="wrapDirection" class="colored wrapped box">
+          <div [fxLayout]="'row ' + wrapDirection" class="colored wrapped box">
 
             <div fxFlex="30"> fxFlex="30"</div>
             <div fxFlex="45"> fxFlex="45"</div>
@@ -28,7 +28,7 @@ import {Component} from '@angular/core';
         </div>
       </mat-card-content>
       <mat-card-footer>
-        <div class="hint">&lt;div fxLayout="row" fxLayoutWrap="{{ wrapDirection }}" &gt;</div>
+        <div class="hint">&lt;div [fxLayout]="'row ' + wrapDirection" &gt;</div>
       </mat-card-footer>
     </mat-card>
   `

src/demo-app/app/stack-overflow/columnOrder.demo.ts

@@ -14,7 +14,7 @@ import {Component} from '@angular/core';
       <mat-card-subtitle>Complex column ordering to wrap items to align to items above
       </mat-card-subtitle>
       <mat-card-content>
-        <div class="containerX" (click)="toggleDirection()" [fxLayout]="direction" fxLayoutWrap
+        <div class="containerX" (click)="toggleDirection()" [fxLayout]="direction + ' wrap'"
              style="cursor: pointer;">
           <div class="one   flexitem "> 1
             <div class="markup">&lt;div fxFlexOrder="1"&gt;</div>

src/lib/api/flexbox/flex.ts

@@ -27,7 +27,6 @@ import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 
 import {LayoutDirective} from './layout';
-import {LayoutWrapDirective} from './layout-wrap';
 import {validateBasis} from '../../utils/basis-validator';
 import {isFlowHorizontal} from '../../utils/layout-validator';
 
@@ -82,13 +81,12 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
   @Input('fxFlex.lt-xl') set flexLtXl(val) { this._cacheInput('flexLtXl', val); };
   /* tslint:enable */
 
-  // Note: Explicitly @SkipSelf on LayoutDirective and LayoutWrapDirective because we are looking
+  // Note: Explicitly @SkipSelf on LayoutDirective because we are looking
   //       for the parent flex container for this flex item.
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
               renderer: Renderer2,
               @Optional() @SkipSelf() protected _container: LayoutDirective,
-              @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective,
               @Inject(PLATFORM_ID) platformId: Object) {
 
     super(monitor, elRef, renderer, platformId);
@@ -233,14 +231,10 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
             basis = '0%';
           }
 
-          // Set max-width = basis if using layout-wrap
-          // tslint:disable-next-line:max-line-length
-          // @see https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
-
           css = extendObject(clearStyles, { // fix issue #5345
             'flex-grow' : `${grow}`,
             'flex-shrink' : `${shrink}`,
-            'flex-basis' : (isValue || this._wrap) ? `${basis}` : '100%'
+            'flex-basis' : isValue ? `${basis}` : '100%'
           });
           break;
       }

src/lib/api/flexbox/layout-gap.spec.ts

@@ -247,9 +247,8 @@ describe('layout-gap directive', () => {
       let styles = ['.col1 { display:none !important;'];
       let template = `
             <div class='container'
-                 [fxLayout]='direction'
-                 [fxLayoutGap]='gap'
-                 fxLayoutWrap>
+                 [fxLayout]='direction + " wrap"'
+                 [fxLayoutGap]='gap'>
               <div fxFlex class='col1'>Div 1</div>
               <div fxFlex class='col2'>Div 2</div>
               <div fxFlex class='col3'>Div 2</div>

src/lib/api/flexbox/layout-wrap.ts

@@ -12,7 +12,6 @@ export * from './core/responsive-activation';
 export * from './flexbox/layout';
 export * from './flexbox/layout-align';
 export * from './flexbox/layout-gap';
-export * from './flexbox/layout-wrap';
 
 export * from './flexbox/flex';
 export * from './flexbox/flex-align';

src/lib/api/index.ts

@@ -25,7 +25,6 @@ import {FlexFillDirective} from './api/flexbox/flex-fill';
 import {FlexOffsetDirective} from './api/flexbox/flex-offset';
 import {FlexOrderDirective} from './api/flexbox/flex-order';
 import {LayoutAlignDirective} from './api/flexbox/layout-align';
-import {LayoutWrapDirective} from './api/flexbox/layout-wrap';
 import {LayoutGapDirective} from './api/flexbox/layout-gap';
 
 import {ShowHideDirective} from './api/ext/show-hide';
@@ -43,7 +42,6 @@ import {ImgSrcDirective} from './api/ext/img-src';
 
 const ALL_DIRECTIVES = [
   LayoutDirective,
-  LayoutWrapDirective,
   LayoutGapDirective,
   LayoutAlignDirective,
   FlexDirective,