fix(ObservableMedia): provide consistent reporting of active breakpoint (angular#186)

**ObservableMedia** event reports regarding current  active breakpoint are not consistent:

*  during page startup - active breakpoint may show as "gt-sm"  instead of "md", "lg", or "xl".
*  during manual resize - active breakpoint will as "xs", "sm", "md", "lg", or "xl".

fixes angular#185.

Author: ThomasBurleson

src/lib/flexbox/api/show-hide.ts

@@ -30,10 +30,10 @@ const FALSY = ['false', false, 0];
 /**
  * For fxHide selectors, we invert the 'value'
  * and assign to the equivalent fxShow selector cache
+ *  - When 'hide' === '' === true, do NOT show the element
+ *  - When 'hide' === false or 0... we WILL show the element
  */
 export function negativeOf(hide: any) {
-  // where 'hide' === '', do NOT show the element
-  // where 'hide' === false or 0... we WILL show the element
   return (hide === "") ? false :
          ((hide === "false") || (hide === 0)) ? true : !hide;
 }
@@ -45,25 +45,11 @@ export function negativeOf(hide: any) {
 @Directive({
   selector: `
   [fxShow],
-  [fxShow.xs],
-  [fxShow.gt-xs],
-  [fxShow.sm],
-  [fxShow.gt-sm],
-  [fxShow.md],
-  [fxShow.gt-md],
-  [fxShow.lg],
-  [fxShow.gt-lg],
-  [fxShow.xl],
+  [fxShow.xs],[fxShow.gt-xs],[fxShow.sm],[fxShow.gt-sm],
+  [fxShow.md],[fxShow.gt-md],[fxShow.lg],[fxShow.gt-lg],[fxShow.xl],  
   [fxHide],
-  [fxHide.xs],
-  [fxHide.gt-xs],
-  [fxHide.sm],
-  [fxHide.gt-sm],
-  [fxHide.md],
-  [fxHide.gt-md],
-  [fxHide.lg],
-  [fxHide.gt-lg],
-  [fxHide.xl]  
+  [fxHide.xs],[fxHide.gt-xs],[fxHide.sm],[fxHide.gt-sm],
+  [fxHide.md],[fxHide.gt-md],[fxHide.lg],[fxHide.gt-lg],[fxHide.xl]  
 `
 })
 export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

src/lib/media-query/match-media.spec.ts

@@ -223,7 +223,7 @@ describe('match-media-observable', () => {
 
     // "all" mediaQuery is already active; total count should be (3)
 
-    expect(activationCount).toEqual(3);
+    expect(activationCount).toEqual(2);
     expect(deactivationCount).toEqual(0);
 
     subscription.unsubscribe();

src/lib/media-query/mock/mock-match-media.ts

@@ -75,7 +75,7 @@ export class MockMatchMedia extends MatchMedia {
    *   "xs"    active == false
    *
    */
-  private _activateWithOverlaps(mediaQuery: string, useOverlaps: boolean) {
+  private _activateWithOverlaps(mediaQuery: string, useOverlaps: boolean): boolean {
     if (useOverlaps) {
       let bp = this._breakpoints.findByQuery(mediaQuery);
       switch (bp ? bp.alias : 'unknown') {
@@ -96,7 +96,7 @@ export class MockMatchMedia extends MatchMedia {
       }
     }
     // Activate last since the responsiveActivation is watching *this* mediaQuery
-    this._activateByQuery(mediaQuery);
+    return this._activateByQuery(mediaQuery);
   }
 
   /**

src/lib/media-query/observable-media-service.spec.ts

@@ -94,7 +94,7 @@ describe('match-media-observable-provider', () => {
         subscription.unsubscribe();
       }));
 
-  it('can can subscribe to built-in mediaQueries', async(inject(
+  it('can subscribe to built-in mediaQueries', inject(
       [ObservableMedia, MatchMedia],
       (media$, matchMedia) => {
         let current: MediaChange;
@@ -117,6 +117,9 @@ describe('match-media-observable-provider', () => {
           matchMedia.activate('md');
           expect(current.mediaQuery).toEqual(findMediaQuery('md'));
 
+          // Allow overlapping activations to be announced to observers
+          media$.filterOverlaps = false;
+
           matchMedia.activate('gt-lg');
           expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
 
@@ -127,7 +130,7 @@ describe('match-media-observable-provider', () => {
           matchMedia.autoRegisterQueries = true;
           subscription.unsubscribe();
         }
-      })));
+      }));
 
   it('can `.unsubscribe()` properly', async(inject(
       [ObservableMedia, MatchMedia],

src/lib/media-query/observable-media-service.ts

@@ -24,10 +24,12 @@ import {BreakPoint} from './breakpoints/break-point';
  */
 export abstract class ObservableMedia implements Subscribable<MediaChange> {
   abstract isActive(query: string): boolean;
+
   abstract asObservable(): Observable<MediaChange>;
+
   abstract subscribe(next?: (value: MediaChange) => void,
-              error?: (error: any) => void,
-              complete?: () => void): Subscription;
+                     error?: (error: any) => void,
+                     complete?: () => void): Subscription;
 }
 
 /**
@@ -74,12 +76,15 @@ export abstract class ObservableMedia implements Subscribable<MediaChange> {
  */
 @Injectable()
 export class MediaService implements ObservableMedia {
-  private observable$: Observable<MediaChange>;
+  /**
+   * Should we announce gt-<xxx> breakpoint activations ?
+   */
+  public filterOverlaps = true;
 
   constructor(private mediaWatcher: MatchMedia,
               private breakpoints: BreakPointRegistry) {
-    this._registerBreakPoints();
     this.observable$ = this._buildObservable();
+    this._registerBreakPoints();
   }
 
   /**
@@ -137,6 +142,10 @@ export class MediaService implements ObservableMedia {
         .map((change: MediaChange) => {
           // Inject associated (if any) alias information into the MediaChange event
           return mergeAlias(change, this._findByQuery(change.mediaQuery));
+        })
+        .filter((change: MediaChange) => {
+          let bp = this.breakpoints.findByQuery(change.mediaQuery);
+          return !bp ? true : !(this.filterOverlaps && bp.overlapping);
         });
   }
 
@@ -145,7 +154,7 @@ export class MediaService implements ObservableMedia {
    */
   private _findByAlias(alias) {
     return this.breakpoints.findByAlias(alias);
-  };
+  }
 
   /**
    * Breakpoint locator by mediaQuery
@@ -162,6 +171,7 @@ export class MediaService implements ObservableMedia {
     return bp ? bp.mediaQuery : query;
   };
 
+  private observable$: Observable<MediaChange>;
 }
 
 /**