Merge branch 'develop' into feature/theming-utils

README.md

@@ -15,6 +15,9 @@ Monorepo for building-block type utilities that don't have dependencies on any o
   - Http Retry Backoff Operator
 - [Security](https://git.psu.edu/ais-swe/ux/utils/tree/develop/libs/utils/security)
   - `REQUIRE_AUTH_HEADER` string constant
+- [Responsive](https://git.psu.edu/ais-swe/ux/utils/tree/develop/libs/utils/responsive)
+  - Responsive Service
+  - ScreenSize Enumeration
 
 # Contributing
 

angular.json

@@ -152,7 +152,7 @@
       "projectType": "library",
       "root": "libs/utils/security",
       "sourceRoot": "libs/utils/security/src",
-      "prefix": "psu",
+      "prefix": "ut",
       "architect": {
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
@@ -180,7 +180,7 @@
       "projectType": "library",
       "root": "libs/utils/rx",
       "sourceRoot": "libs/utils/rx/src",
-      "prefix": "psu",
+      "prefix": "ut",
       "architect": {
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
@@ -208,7 +208,7 @@
       "projectType": "library",
       "root": "libs/utils/browser",
       "sourceRoot": "libs/utils/browser/src",
-      "prefix": "psu",
+      "prefix": "ut",
       "architect": {
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
@@ -236,7 +236,7 @@
       "projectType": "library",
       "root": "libs/utils/angular",
       "sourceRoot": "libs/utils/angular/src",
-      "prefix": "psu",
+      "prefix": "ut",
       "architect": {
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
@@ -260,6 +260,34 @@
         }
       }
     },
+    "utils-responsive": {
+      "projectType": "library",
+      "root": "libs/utils/responsive",
+      "sourceRoot": "libs/utils/responsive/src",
+      "prefix": "ut",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["libs/utils/responsive/tsconfig.lib.json", "libs/utils/responsive/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**", "!libs/utils/responsive/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/utils/responsive/jest.config.js",
+            "tsConfig": "libs/utils/responsive/tsconfig.spec.json",
+            "setupFile": "libs/utils/responsive/src/test-setup.ts"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "styleext": "scss"
+        }
+      }
+    },
     "utils-theming": {
       "projectType": "library",
       "root": "libs/utils/theming",

libs/utils/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.1",
   "peerDependencies": {
     "@angular/common": "^8.0.0",
-    "@angular/core": "^8.0.0"
+    "@angular/core": "^8.0.0",
+    "@angular/cdk": "^8.2.3"
   },
   "private": false,
   "repository": {

libs/utils/responsive/README.md

+# Responsive Utils
+
+## ResponsiveService
+
+Injectable singleton service responsible for tracking changes to screen sizes. To use, simply inject the service into the constructor.
+
+```typescript
+import { ResponsiveService } from '@psu/utils/responsive';
+
+constructor(public responsiveService: ResponsiveService) {}
+```
+
+### Public API
+
+```typescript
+  //  Reactive context
+  public currentScreenSize$: Observable<ScreenSize>;
+  public isMobile$: Observable<boolean>;
+  public isTabletSmall$: Observable<boolean>;
+  public isTabletLarge$: Observable<boolean>;
+  public isDesktop$: Observable<boolean>;
+
+  //  Static context
+  public currentScreenSize: ScreenSize;
+  public isMobile: boolean;
+  public isTabletSmall: boolean;
+  public isTabletLarge: boolean;
+  public isDesktop: boolean;
+```

libs/utils/responsive/jest.config.js

+module.exports = {
+  name: 'utils-responsive',
+  preset: '../../../jest.config.js',
+  coverageDirectory: '../../../coverage/libs/utils/responsive',
+  snapshotSerializers: [
+    'jest-preset-angular/AngularSnapshotSerializer.js',
+    'jest-preset-angular/HTMLCommentSerializer.js'
+  ]
+};

libs/utils/responsive/ng-package.json

+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

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/breakpoints.model.ts

+export interface PsuBreakpoint {
+  mobile: string;
+  tabletSmall: string;
+  tabletLarge: string;
+  desktop: string;
+}
+
+export const PSU_BREAKPOINTS: PsuBreakpoint = {
+  mobile: '(max-width: 599px)',
+  tabletSmall: '(min-width: 600px) and (max-width: 729px)',
+  tabletLarge: '(min-width: 730px) and (max-width: 959px)',
+  desktop: '(min-width: 960px)'
+};

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) => {
+        this.isMobile = size === ScreenSize.MOBILE;
+        this.isSmallTablet = size === ScreenSize.TABLET_SM;
+        this.isTablet = size === ScreenSize.TABLET;
+        this.isDesktop = size === ScreenSize.DESKTOP;
+      });
+  }
+
+  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 {}

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

+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { Subject } from 'rxjs';
+import { Mock } from 'ts-mocks';
+import { ResponsiveService } from './responsive.service';
+
+describe('ScreenService', () => {
+  let service: ResponsiveService;
+  let mockBreakpointObserver: Mock<BreakpointObserver>;
+
+  const breakpointObserverSubj: Subject<BreakpointState> = new Subject();
+  beforeEach(() => {
+    mockBreakpointObserver = new Mock<BreakpointObserver>({
+      observe: query => breakpointObserverSubj.asObservable()
+    });
+  });
+
+  it('should be created', () => {
+    service = new ResponsiveService(mockBreakpointObserver.Object);
+    expect(service).toBeTruthy();
+  });
+});

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 { PSU_BREAKPOINTS } from './breakpoints.model';
+import { ScreenSize } from './screen-size.model';
+
+// TODO Enhancement: Provide injection token for configuring custom breakpoints to support different breakpoint configurations per application
+
+@Injectable({ providedIn: 'root' })
+export class ResponsiveService implements OnDestroy {
+  //  Reactive context
+  public currentScreenSize$: Observable<ScreenSize>;
+  public isMobile$: Observable<boolean>;
+  public isTabletSmall$: Observable<boolean>;
+  public isTabletLarge$: Observable<boolean>;
+  public isDesktop$: Observable<boolean>;
+
+  //  Static context
+  public currentScreenSize: ScreenSize;
+  public isMobile: boolean;
+  public isTabletSmall: boolean;
+  public isTabletLarge: boolean;
+  public isDesktop: boolean;
+
+  private _screenSizeSubject = new ReplaySubject<ScreenSize>(1);
+  private _destroy$: Subject<any> = new Subject();
+
+  //  **** TODO Not convinced that this stuff belongs here with the elimination of ngrx.
+  public isMenuOpen$: Observable<boolean>;
+  public isSideSheetOpen$: Observable<boolean>;
+  private _isMenuOpen = false;
+  private _isSideSheetOpen = false;
+  private _menuSubject = new ReplaySubject<boolean>(1);
+  private _sideSheetSubject = new ReplaySubject<boolean>(1);
+  //  ****
+
+  constructor(private breakpointObserver: BreakpointObserver) {
+    this.currentScreenSize$ = this._screenSizeSubject.asObservable();
+    this.isMobile$ = this.breakpointMatches(PSU_BREAKPOINTS.mobile);
+    this.isTabletSmall$ = this.breakpointMatches(PSU_BREAKPOINTS.tabletSmall);
+    this.isTabletLarge$ = this.breakpointMatches(PSU_BREAKPOINTS.tabletLarge);
+    this.isDesktop$ = this.breakpointMatches(PSU_BREAKPOINTS.desktop);
+
+    combineLatest(this.isMobile$, this.isTabletSmall$, this.isTabletLarge$, this.isDesktop$)
+      .pipe(
+        map(([mobile, tabletSmall, tabletLarge, desktop]) => ({ mobile, tabletSmall, tabletLarge, desktop })),
+        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;
+          } else if (responsiveChange.tabletLarge) {
+            screenSize = ScreenSize.TABLET;
+            this.isTabletLarge = true;
+          } else {
+            screenSize = ScreenSize.DESKTOP;
+            this.isDesktop = true;
+          }
+
+          this.screenSizeChange(screenSize);
+        }),
+        takeUntil(this._destroy$)
+      )
+      .subscribe();
+
+    this.isMenuOpen$ = this._menuSubject.asObservable();
+    this.isSideSheetOpen$ = this._sideSheetSubject.asObservable();
+  }
+
+  public ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
+  public closeMenu(): void {
+    this._isMenuOpen = false;
+    this._menuSubject.next(this._isMenuOpen);
+  }
+
+  public closeSideSheet(): void {
+    this._isSideSheetOpen = false;
+    this._sideSheetSubject.next(this._isSideSheetOpen);
+  }
+
+  public openMenu(): void {
+    this._isMenuOpen = true;
+    this._menuSubject.next(this._isMenuOpen);
+  }
+
+  public openSideSheet(): void {
+    this._isSideSheetOpen = true;
+    this._sideSheetSubject.next(this._isSideSheetOpen);
+  }
+
+  public toggleMenu(): void {
+    this._isMenuOpen = !this._isMenuOpen;
+    this._menuSubject.next(this._isMenuOpen);
+  }
+
+  public toggleSideSheet(): void {
+    this._isSideSheetOpen = !this._isSideSheetOpen;
+    this._sideSheetSubject.next(this._isSideSheetOpen);
+  }
+
+  private screenSizeChange(newScreenSize: ScreenSize): void {
+    this.currentScreenSize = newScreenSize;
+    this._screenSizeSubject.next(this.currentScreenSize);
+  }
+
+  private breakpointMatches(breakpoints: string | string[]): Observable<boolean> {
+    return this.breakpointObserver.observe(breakpoints).pipe(map(result => result.matches));
+  }
+}

libs/utils/responsive/src/lib/screen-size.model.ts

+// TABLET_LG and DESKTOP_LG are not used for now.
+export enum ScreenSize {
+  MOBILE = 'MOBILE',
+  TABLET = 'TABLET',
+  TABLET_SM = 'TABLET_SM',
+  DESKTOP = 'DESKTOP',
+  DESKTOP_LG = 'DESKTOP_LG'
+}

libs/utils/responsive/src/test-setup.ts

+import 'jest-preset-angular';
+import 'jestGlobalMocks';

libs/utils/responsive/tsconfig.json

+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  },
+  "include": ["**/*.ts"]
+}

libs/utils/responsive/tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+}

libs/utils/responsive/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

libs/utils/responsive/tslint.json

+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "ut", "camelCase"],
+    "component-selector": [true, "element", "ut", "kebab-case"]
+  }
+}

nx.json

@@ -29,6 +29,9 @@
     "utils-angular": {
       "tags": []
     },
+    "utils-responsive": {
+      "tags": []
+    },
     "utils-theming": {
       "tags": []
     }

package.json

@@ -34,6 +34,7 @@
   },
   "private": false,
   "dependencies": {
+    "@angular/cdk": "^8.2.3",
     "@angular/common": "^8.2.0",
     "@angular/compiler": "^8.2.0",
     "@angular/core": "^8.2.0",

tsconfig.json

@@ -21,6 +21,7 @@
       "@psu/utils/rx": ["libs/utils/rx/src/index.ts"],
       "@psu/utils/browser": ["libs/utils/browser/src/index.ts"],
       "@psu/utils/angular": ["libs/utils/angular/src/index.ts"],
+      "@psu/utils/responsive": ["libs/utils/responsive/src/index.ts"],
       "@psu/utils/theming": ["libs/utils/theming/src/index.ts"]
     }
   },

yarn.lock

@@ -196,6 +196,15 @@
     minimist "^1.2.0"
     rxjs "^5.5.2"
 
+"@angular/cdk@^8.2.3":
+  version "8.2.3"
+  resolved "https://nexus.ci.psu.edu/repository/npm-all/@angular/cdk/-/cdk-8.2.3.tgz#16b96ffa935cbf5a646757ecaf2b19c434678f72"
+  integrity sha512-ZwO5Sn720RA2YvBqud0JAHkZXjmjxM0yNzCO8RVtRE9i8Gl26Wk0j0nQeJkVm4zwv2QO8MwbKUKGTMt8evsokA==
+  dependencies:
+    tslib "^1.7.1"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@angular/cli@8.3.14":
   version "8.3.14"
   resolved "https://nexus.ci.psu.edu/repository/npm-all/@angular/cli/-/cli-8.3.14.tgz#ce1df037d0c6a2e3c84fb1796c4b679e253a7cca"
@@ -8880,6 +8889,11 @@ parse5@^3.0.3:
   dependencies:
     "@types/node" "*"
 
+parse5@^5.0.0:
+  version "5.1.1"
+  resolved "https://nexus.ci.psu.edu/repository/npm-all/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://nexus.ci.psu.edu/repository/npm-all/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -11360,6 +11374,11 @@ tslib@1.10.0, tslib@^1.10.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://nexus.ci.psu.edu/repository/npm-all/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
+tslib@^1.7.1:
+  version "1.11.0"
+  resolved "https://nexus.ci.psu.edu/repository/npm-all/tslib/-/tslib-1.11.0.tgz#f1f3528301621a53220d58373ae510ff747a66bc"
+  integrity sha512-BmndXUtiTn/VDDrJzQE7Mm22Ix3PxgLltW9bSNLoeCY31gnG2OPx0QqJnuc9oMIKioYrz487i6K9o4Pdn0j+Kg==
+
 tslint@~5.11.0:
   version "5.11.0"
   resolved "https://nexus.ci.psu.edu/repository/npm-all/tslint/-/tslint-5.11.0.tgz#98f30c02eae3cde7006201e4c33cb08b48581eed"