feat(lib): add config options for flex basis and other tokens

* Revert default flex-basis value in column mode back to 1e-9px
* Add static method on main module to allow for configuration of
  tokens, including the ability to set the flex-basis value in
  column mode to auto instead of the above hack
* Add flex stylings to parent to prevent excessive breaking change,
  also configurable by the static method
* Add extra check to prevent max-width from being added when
  `fxFlex` is empty
* Change development port to 5000
* Change karma reporter back to dots to get back detailed reporting
  in case of error

BREAKING CHANGE:

* Four configuration tokens have been removed:

* * `ADD_FLEX_STYLES`
* * `ADD_ORIENTATION_BREAKPOINTS`
* * `DISABLE_DEFAULT_BREAKPOINTS`
* * `DISABLE_VENDOR_PREFIXES`

These tokens have been consolidated into a new configuration token:

* * `LAYOUT_CONFIG`

* The default column flex-basis has been reverted to `1e-9px`. To
  have that value be `auto` instead, set the config in your top-level
  module as follows:

```
FlexLayoutModule.withConfig({useColumnBasisZero: false})
```

docs/documentation/Configuration.md

@@ -0,0 +1,35 @@
+# Configuring Angular Layout
+
+### Introduction
+
+Angular Layout comes built-in with several advanced capabilities that are meant to help developers
+seamlessly integrate Flexbox and CSS Grid utilities into their applications. However, there are times
+where these behaviors are not desirable, and so this library offers the ability to configure them. 
+The specific configurable behaviors, and how to turn them off, are detailed below.
+
+### Configuration
+
+To configure Angular Layout, initialize the top-level module using the `withConfig` method as follows:
+
+```ts
+import {FlexLayoutModule} from '@angular/flex-layout';
+
+FlexLayoutModule.withConfig(configOptions, [breakpoints]);
+```
+
+The `withConfig` method takes two arguments: a configuration object, and a list of custom breakpoints.
+This is the same as providing the breakpoints following the Custom Breakpoints guide.
+
+### Options
+
+The Angular Layout module can be configured with the following options:
+
+* `addFlexToParent`: whether to add `flex-direction` stylings to the parent of an `fxFlex` directive, 
+if not present
+* `addOrientationBps`: whether to add the orientation breakpoints to the module
+* `disableDefaultBps`: whether to disable the default breakpoints from use in the module
+* `disableVendorPrefixes`: whether to disable the `--webkit` prefix from applied stylings
+* `serverLoaded`: whether to simulate the module being in server mode
+* `useColumnBasisZero`: whether the default `flex-basis` value should be `1e-9px` (otherwise `auto`)
+
+The breakpoints provided as the second argument can be either a singular `BreakPoint`, or a `BreakPoint` array

guides/Configuration.md

@@ -0,0 +1,35 @@
+# Configuring Angular Layout
+
+### Introduction
+
+Angular Layout comes built-in with several advanced capabilities that are meant to help developers
+seamlessly integrate Flexbox and CSS Grid utilities into their applications. However, there are times
+where these behaviors are not desirable, and so this library offers the ability to configure them. 
+The specific configurable behaviors, and how to turn them off, are detailed below.
+
+### Configuration
+
+To configure Angular Layout, initialize the top-level module using the `withConfig` method as follows:
+
+```ts
+import {FlexLayoutModule} from '@angular/flex-layout';
+
+FlexLayoutModule.withConfig(configOptions, [breakpoints]);
+```
+
+The `withConfig` method takes two arguments: a configuration object, and a list of custom breakpoints.
+This is the same as providing the breakpoints following the Custom Breakpoints guide.
+
+### Options
+
+The Angular Layout module can be configured with the following options:
+
+* `addFlexToParent`: whether to add `flex-direction` stylings to the parent of an `fxFlex` directive, 
+if not present
+* `addOrientationBps`: whether to add the orientation breakpoints to the module
+* `disableDefaultBps`: whether to disable the default breakpoints from use in the module
+* `disableVendorPrefixes`: whether to disable the `--webkit` prefix from applied stylings
+* `serverLoaded`: whether to simulate the module being in server mode
+* `useColumnBasisZero`: whether the default `flex-basis` value should be `1e-9px` (otherwise `auto`)
+
+The breakpoints provided as the second argument can be either a singular `BreakPoint`, or a `BreakPoint` array

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

@@ -6,9 +6,7 @@
     <h2>Layout Demos: </h2>
     <span>Version: {{version}}</span>
   </div>
-  <div fxFlex fxLayout="column"
-       fxLayoutAlign="left top"
-       style="font-size: 0.85em; margin-top: 10px; padding-bottom:20px; white-space:normal">
+  <div 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 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).

src/lib/core/breakpoints/break-points-token.ts

@@ -8,14 +8,11 @@
 
 import {inject, InjectionToken} from '@angular/core';
 import {BreakPoint} from './break-point';
-import {
-  ADD_ORIENTATION_BREAKPOINTS,
-  BREAKPOINT,
-  DISABLE_DEFAULT_BREAKPOINTS,
-} from '../tokens/breakpoint-token';
+import {BREAKPOINT} from '../tokens/breakpoint-token';
 import {DEFAULT_BREAKPOINTS} from '../breakpoints/data/break-points';
 import {ORIENTATION_BREAKPOINTS} from '../breakpoints/data/orientation-break-points';
 import {mergeByAlias} from '../breakpoints/breakpoint-tools';
+import {LAYOUT_CONFIG} from '../tokens/library-config';
 
 /**
  *  Injection token unique to the flex-layout library.
@@ -26,12 +23,12 @@ export const BREAKPOINTS =
     providedIn: 'root',
     factory: () => {
       const breakpoints: any = inject(BREAKPOINT);
-      const disableDefaults = inject(DISABLE_DEFAULT_BREAKPOINTS);
-      const addOrientation = inject(ADD_ORIENTATION_BREAKPOINTS);
-      const bpFlattenArray = [].concat.apply([], (breakpoints || [])
+      const layoutConfig = inject(LAYOUT_CONFIG);
+      const bpFlattenArray: BreakPoint[] = [].concat.apply([], (breakpoints || [])
         .map(v => Array.isArray(v) ? v : [v]));
-      const builtIns = DEFAULT_BREAKPOINTS.concat(addOrientation ? ORIENTATION_BREAKPOINTS : []);
-      return disableDefaults ?
-        mergeByAlias(bpFlattenArray) : mergeByAlias(builtIns, bpFlattenArray);
+      const builtIns = (layoutConfig.disableDefaultBps ? [] : DEFAULT_BREAKPOINTS)
+        .concat(layoutConfig.addOrientationBps ? ORIENTATION_BREAKPOINTS : []);
+
+      return mergeByAlias(builtIns, bpFlattenArray);
     }
   });

src/lib/core/breakpoints/breakpoint-tools.spec.ts

@@ -5,12 +5,12 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {TestBed, inject, fakeAsync} from '@angular/core/testing';
+import {fakeAsync} from '@angular/core/testing';
 
 import {BreakPoint} from './break-point';
-import {BREAKPOINTS} from './break-points-token';
-import {BREAKPOINTS_PROVIDER, BREAKPOINTS_PROVIDER_FACTORY} from './break-points-provider';
 import {validateSuffixes, mergeByAlias} from './breakpoint-tools';
+import {DEFAULT_BREAKPOINTS} from './data/break-points';
+import {ORIENTATION_BREAKPOINTS} from './data/orientation-break-points';
 
 describe('breakpoint-tools', () => {
   let all: BreakPoint[];
@@ -19,7 +19,7 @@ describe('breakpoint-tools', () => {
   }, null);
 
   beforeEach(() => {
-    all = BREAKPOINTS_PROVIDER_FACTORY([], [], false, true);
+    all = DEFAULT_BREAKPOINTS.concat(ORIENTATION_BREAKPOINTS);
   });
 
   describe('validation', () => {
@@ -96,31 +96,4 @@ describe('breakpoint-tools', () => {
     });
   });
 
-  describe('with BREAKPOINTS_PROVIDER', () => {
-    beforeEach(() => {
-      // Configure testbed to prepare services
-      TestBed.configureTestingModule({
-        providers: [
-          BREAKPOINTS_PROVIDER  // Supports developer overrides of list of known breakpoints
-        ]
-      });
-    });
-
-    it('should inject the BREAKPOINTS with auto-validate items', inject([BREAKPOINTS], (list) => {
-      all = list;
-      let xsBp: BreakPoint = findByAlias('xs')!;
-      let gtLgBp: BreakPoint = findByAlias('gt-lg')!;
-      let xlBp: BreakPoint = findByAlias('xl')!;
-
-      expect(xsBp.alias).toEqual('xs');
-      expect(xsBp.suffix).toEqual('Xs');
-
-      expect(gtLgBp.alias).toEqual('gt-lg');
-      expect(gtLgBp.suffix).toEqual('GtLg');
-
-      expect(xlBp.alias).toEqual('xl');
-      expect(xlBp.suffix).toEqual('Xl');
-    }));
-  });
-
 });