Add filter to prevent cases of no and/or multiple fulfilled breakpoints

libs/utils/responsive/src/lib/responsive.directive.ts

@@ -21,7 +21,7 @@ export class ResponsiveDirective implements OnInit, OnDestroy {
 
   constructor(private responsiveService: ResponsiveService) {}
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     this.responsiveService.currentScreenSize$
       .pipe(
         filter(size => !!size),

libs/utils/responsive/src/lib/responsive.service.ts

 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Injectable, OnDestroy } from '@angular/core';
 import { combineLatest, Observable, ReplaySubject, Subject } from 'rxjs';
-import { map, takeUntil, tap } from 'rxjs/operators';
+import { filter, map, takeUntil, tap } from 'rxjs/operators';
 import { PSU_BREAKPOINTS } from './breakpoints.model';
 import { ScreenSize } from './screen-size.model';
 
@@ -45,23 +45,29 @@ export class ResponsiveService implements OnDestroy {
     combineLatest(this.isMobile$, this.isTabletSmall$, this.isTabletLarge$, this.isDesktop$)
       .pipe(
         map(([mobile, tabletSmall, tabletLarge, desktop]) => ({ mobile, tabletSmall, tabletLarge, desktop })),
+        filter(responsiveChange => {
+          const values = Object.values(responsiveChange);
+          return values.some(breakpoints => !!breakpoints) && values.filter(val => !!val).length === 1;
+        }),
         tap(responsiveChange => {
           let screenSize: ScreenSize;
-          if (responsiveChange.mobile) {
-            screenSize = ScreenSize.MOBILE;
-            this.isMobile = true;
-          } else if (responsiveChange.tabletSmall) {
-            screenSize = ScreenSize.TABLET_SM;
-            this.isTabletSmall = true;
+          if (responsiveChange.desktop) {
+            screenSize = ScreenSize.DESKTOP;
+            this.isDesktop = true;
           } else if (responsiveChange.tabletLarge) {
             screenSize = ScreenSize.TABLET;
             this.isTabletLarge = true;
-          } else {
-            screenSize = ScreenSize.DESKTOP;
-            this.isDesktop = true;
+          } else if (responsiveChange.tabletSmall) {
+            screenSize = ScreenSize.TABLET_SM;
+            this.isTabletSmall = true;
+          } else if (responsiveChange.mobile) {
+            screenSize = ScreenSize.MOBILE;
+            this.isMobile = true;
           }
 
-          this.screenSizeChange(screenSize);
+          if (!!screenSize) {
+            this.screenSizeChange(screenSize);
+          }
         }),
         takeUntil(this._destroy$)
       )