Add responsive directive

libs/utils/responsive/src/index.ts

+export { ResponsiveModule } from './lib/responsive.module';
 export { ResponsiveService } from './lib/responsive.service';
 export { ScreenSize } from './lib/screen-size.model';

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

+import { CommonModule } from '@angular/common';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { Observable, Subject } from 'rxjs';
+import { ResponsiveModule } from './responsive.module';
+import { ResponsiveService } from './responsive.service';
+import { ScreenSize } from './screen-size.model';
+
+const o = new Subject<ScreenSize>();
+
+class ResponsiveServiceStub {
+  currentScreenSize$: Observable<ScreenSize> = o.asObservable();
+}
+
+@Component({
+  selector: 'ut-test-comp',
+  template: `
+    <button utResponsive></button>
+  `
+})
+class TestComponent {}
+
+describe('ResponsiveDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let classes: any;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [CommonModule, ResponsiveModule],
+      declarations: [TestComponent],
+      providers: [{ provide: ResponsiveService, useClass: ResponsiveServiceStub }],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    classes = fixture.debugElement.query(By.css('button')).classes;
+  });
+
+  describe('when screen size is DESKTOP', () => {
+    beforeEach(() => {
+      o.next(ScreenSize.DESKTOP);
+      fixture.detectChanges();
+    });
+
+    it('should only have desktop class', () => {
+      expect(classes.desktop).toBeTruthy();
+      expect(classes.tablet).toBeFalsy();
+      expect(classes.mobile).toBeFalsy();
+    });
+  });
+
+  describe('when screen size is TABLET_SM', () => {
+    beforeEach(() => {
+      o.next(ScreenSize.TABLET_SM);
+      fixture.detectChanges();
+    });
+
+    it('should have tablet-sm class', () => {
+      expect(classes.desktop).toBeFalsy();
+      expect(classes.tablet).toBeFalsy();
+      expect(classes['tablet-sm']).toBeTruthy();
+      expect(classes.mobile).toBeFalsy();
+    });
+  });
+
+  describe('when screen size is TABLET', () => {
+    beforeEach(() => {
+      o.next(ScreenSize.TABLET);
+      fixture.detectChanges();
+    });
+
+    it('should have tablet class', () => {
+      expect(classes.desktop).toBeFalsy();
+      expect(classes.tablet).toBeTruthy();
+      expect(classes['tablet-sm']).toBeFalsy();
+      expect(classes.mobile).toBeFalsy();
+    });
+  });
+
+  describe('when screen size is MOBILE', () => {
+    beforeEach(() => {
+      o.next(ScreenSize.MOBILE);
+      fixture.detectChanges();
+    });
+
+    it('should only have mobile class', () => {
+      expect(classes.desktop).toBeFalsy();
+      expect(classes.tablet).toBeFalsy();
+      expect(classes.mobile).toBeTruthy();
+    });
+  });
+});

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

+import { Directive, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { ResponsiveService } from './responsive.service';
+import { ScreenSize } from './screen-size.model';
+
+@Directive({
+  selector: '[utResponsive]'
+})
+export class ResponsiveDirective implements OnInit, OnDestroy {
+  @HostBinding('class.desktop')
+  public isDesktop = false;
+  @HostBinding('class.tablet')
+  public isTablet = false;
+  @HostBinding('class.tablet-sm')
+  public isSmallTablet = false;
+  @HostBinding('class.mobile')
+  public isMobile = false;
+
+  private destroyed$ = new Subject<any>();
+
+  constructor(private responsiveService: ResponsiveService) {}
+
+  ngOnInit(): void {
+    this.responsiveService.currentScreenSize$
+      .pipe(
+        filter(size => !!size),
+        takeUntil(this.destroyed$)
+      )
+      .subscribe((size: ScreenSize) => {
+        switch (size) {
+          case ScreenSize.DESKTOP:
+            this.isDesktop = true;
+            this.isTablet = false;
+            this.isSmallTablet = false;
+            this.isMobile = false;
+            break;
+          case ScreenSize.TABLET:
+            this.isDesktop = false;
+            this.isTablet = true;
+            this.isSmallTablet = false;
+            this.isMobile = false;
+            break;
+          case ScreenSize.TABLET_SM:
+            this.isDesktop = false;
+            this.isTablet = false;
+            this.isSmallTablet = true;
+            this.isMobile = false;
+            break;
+          case ScreenSize.MOBILE:
+            this.isDesktop = false;
+            this.isTablet = false;
+            this.isSmallTablet = false;
+            this.isMobile = true;
+            break;
+        }
+      });
+  }
+
+  public ngOnDestroy(): void {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}

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

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ResponsiveDirective } from './responsive.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ResponsiveDirective],
+  exports: [ResponsiveDirective]
+})
+export class ResponsiveModule {}