feat(): update dependencies + pull in theme + pre-loader (#122)

* feat(style): pull in theme service and pre-loader

* feat(ui-platform): upgrade

* feat(): update ui-platform

* feat(): point to latest covalent & ui-platform

angular.json

@@ -14,8 +14,9 @@
       "sourceRoot": "src",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "indexTransform": "node_modules/@td-vantage/ui-platform/utilities/pre-loader",
             "outputPath": "dist",
             "index": "src/vantage-ui-template/index.html",
             "main": "src/vantage-ui-template/main.ts",
@@ -66,7 +67,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "vantage-ui-template:build",
             "proxyConfig": "./proxy.conf.js"

package.json

@@ -37,54 +37,55 @@
   "license": "MIT",
   "author": "Teradata UI",
   "dependencies": {
-    "@angular/animations": "^8.2.14",
-    "@angular/cdk": "^8.0.2",
-    "@angular/common": "^8.2.14",
-    "@angular/compiler": "^8.2.14",
-    "@angular/core": "^8.2.14",
-    "@angular/forms": "^8.2.14",
-    "@angular/material": "^8.0.2",
-    "@angular/platform-browser": "^8.2.14",
-    "@angular/platform-browser-dynamic": "^8.2.14",
-    "@angular/platform-server": "^8.2.14",
-    "@angular/router": "^8.2.14",
-    "@covalent/core": "3.0.0-beta.2",
-    "@covalent/echarts": "3.0.0-beta.2",
-    "@covalent/highlight": "3.0.0-beta.2",
-    "@covalent/http": "3.0.0-beta.2",
-    "@ngx-translate/core": "^11.0.1",
+    "@angular/animations": "^9.0.5",
+    "@angular/cdk": "^9.1.1",
+    "@angular/common": "^9.0.5",
+    "@angular/compiler": "^9.0.5",
+    "@angular/core": "^9.0.5",
+    "@angular/forms": "^9.0.5",
+    "@angular/material": "^9.1.1",
+    "@angular/platform-browser": "^9.0.5",
+    "@angular/platform-browser-dynamic": "^9.0.5",
+    "@angular/platform-server": "^9.0.5",
+    "@angular/router": "^9.0.5",
+    "@covalent/core": "^3.0.0",
+    "@covalent/echarts": "^3.0.0",
+    "@covalent/highlight": "^3.0.0",
+    "@covalent/http": "^3.0.0",
+    "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "^4.0.0",
-    "@td-vantage/ui-platform": "https://github.com/Teradata/vantage-ui-platform-nightly",
+    "@td-vantage/ui-platform": "1.0.0-beta.1",
     "core-js": "^2.6.11",
     "echarts": "^4.6.0",
     "hammerjs": "^2.0.8",
     "rxjs": "^6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^1.11.1",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.9.1"
+    "zone.js": "^0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.801.1",
-    "@angular/cli": "^8.3.22",
-    "@angular/compiler-cli": "^8.2.14",
-    "@covalent/coding-standards": "3.0.0-beta.2",
-    "@cypress/webpack-preprocessor": "^4.1.0",
-    "@nrwl/cypress": "^8.6.0",
-    "@nrwl/workspace": "^8.6.0",
-    "@types/hammerjs": "^2.0.30",
-    "@types/jasmine": "^3.5.0",
-    "@types/jasminewd2": "^2.0.3",
-    "@types/node": "^8.10.59",
-    "cypress": "^3.4.1",
+    "@angular-builders/custom-webpack": "^9.0.0",
+    "@angular-devkit/build-angular": "^0.900.5",
+    "@angular/cli": "^9.0.5",
+    "@angular/compiler-cli": "^9.0.5",
+    "@covalent/coding-standards": "^3.0.0",
+    "@cypress/webpack-preprocessor": "^4.1.3",
+    "@nrwl/cypress": "^9.0.4",
+    "@nrwl/workspace": "^9.0.4",
+    "@types/hammerjs": "^2.0.36",
+    "@types/jasmine": "^3.5.8",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^13.9.0",
+    "cypress": "^4.1.0",
     "jasmine-core": "^3.5.0",
     "karma": "^4.4.1",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^2.1.1",
-    "karma-jasmine": "^2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.1",
+    "karma-jasmine": "^3.1.1",
+    "karma-jasmine-html-reporter": "^1.5.2",
     "karma-spec-reporter": "^0.0.32",
-    "ts-loader": "^6.0.4",
-    "ts-node": "^7.0.0",
-    "typescript": "~3.5.3"
+    "ts-loader": "^6.2.1",
+    "ts-node": "^8.6.2",
+    "typescript": "~3.7.5"
   }
 }

src/theme.scss

@@ -31,15 +31,8 @@ $custom-typography: mat-typography-config(
 // Include covalent color classes
 @include covalent-colors();
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
-$primary: mat-palette($td-teal, 800, 100, 900);
-$accent: mat-palette($td-orange, 800, 100, 900);
-$warn: mat-palette($mat-red, 900);
-
 // Create the theme object (a Sass map containing all of the palettes).
-$theme: mat-light-theme($primary, $accent, $warn);
+$theme: mat-light-theme($td-primary, $td-accent, $td-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
@@ -53,11 +46,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
 /* ------------------------------------- DARK THEME ------------------------------------------ */
 
 .dark-theme {
-  $dark-primary: mat-palette($td-teal, 700, 100, 800);
-  $dark-accent: mat-palette($td-orange, 800, 200, 900);
-  $dark-warn: mat-palette($mat-red, 300);
-
-  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
+  $dark-theme: mat-dark-theme($td-dark-primary, $td-dark-accent, $td-dark-warn);
 
   @include angular-material-theme($dark-theme);
   @include covalent-theme($dark-theme);
@@ -69,6 +58,6 @@ $theme: mat-light-theme($primary, $accent, $warn);
     color: white !important;
   }
   .mat-focused:not(.mat-form-field-invalid) .mat-form-field-placeholder {
-    color: mat-color($dark-primary, lighter);
+    color: mat-color($td-dark-primary, lighter);
   }
 }

src/vantage-ui-template/app/app.module.ts

@@ -23,7 +23,7 @@ import { CovalentMediaModule } from '@covalent/core/media';
 import { CovalentLoadingModule } from '@covalent/core/loading';
 import { CovalentDialogsModule } from '@covalent/core/dialogs';
 import { CovalentHttpModule, ITdHttpInterceptor } from '@covalent/http';
-import { CovalentBaseEchartsModule } from '@covalent/echarts';
+import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
 import { VantageUserModule } from '@td-vantage/ui-platform/user';
 import { VantageSystemModule } from '@td-vantage/ui-platform/system';
 import { VantageAuthenticationModule, VantageAuthenticationInterceptor } from '@td-vantage/ui-platform/auth';
@@ -35,6 +35,7 @@ import { getSelectedLanguage, SUPPORTED_LANGS } from '@shared/utils/translate';
 import { MainComponent } from './main/main.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { CovalentNavLinksModule } from '@covalent/core/nav-links';
+import { VantageThemeModule } from '@td-vantage/ui-platform/theme';
 
 const httpInterceptorProviders: Type<ITdHttpInterceptor>[] = [VantageAuthenticationInterceptor];
 
@@ -70,6 +71,7 @@ const httpInterceptorProviders: Type<ITdHttpInterceptor>[] = [VantageAuthenticat
     VantageUserModule,
     VantageSystemModule,
     VantageUserFeedbackModule,
+    VantageThemeModule,
     // Covalent Modules
     CovalentCommonModule,
     CovalentLayoutModule,

src/vantage-ui-template/app/main/main.component.html

@@ -1,6 +1,6 @@
 <td-layout #layout>
   <td-navigation-drawer
-    [logo]="logo"
+    [logo]="_themeService.map({ 'dark-theme': 'teradata', 'light-theme': 'teradata-dark' }) | async"
     [sidenavTitle]="'APP_TITLE' | translate"
     [name]="user?.display_name"
     [email]="user?.email"
@@ -29,18 +29,12 @@
         </mat-icon>
       </button>
       <mat-menu #moreMenu>
-        <ng-container *ngIf="!lightThemeIsActive">
-          <button mat-menu-item (click)="applyLightTheme()">
-            <mat-icon matListIcon>brightness_high</mat-icon>
-            {{ 'LIGHT_MODE' | translate }}
-          </button>
-        </ng-container>
-        <ng-container *ngIf="!darkThemeIsActive">
-          <button mat-menu-item (click)="applyDarkTheme()">
-            <mat-icon matListIcon>brightness_low</mat-icon>
-            {{ 'DARK_MODE' | translate }}
-          </button>
-        </ng-container>
+        <button mat-menu-item (click)="_themeService.toggleTheme()">
+          <mat-icon matListIcon>
+            {{ _themeService.map({ 'dark-theme': 'brightness_high', 'light-theme': 'brightness_low' }) | async }}
+          </mat-icon>
+          {{ _themeService.map({ 'dark-theme': 'LIGHT_MODE', 'light-theme': 'DARK_MODE' }) | async | translate }}
+        </button>
       </mat-menu>
     </div>
     <router-outlet></router-outlet>

src/vantage-ui-template/app/main/main.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { IUser } from '@td-vantage/ui-platform';
+import { VantageThemeService } from '@td-vantage/ui-platform/theme';
+import { IUser } from '@td-vantage/ui-platform/user';
+
 import { VantageSessionService } from '@td-vantage/ui-platform/auth';
 import { ITdLink } from '@covalent/core/nav-links';
-import { VantageThemeService, VantageTheme } from '../theme.service';
 
 @Component({
   selector: 'td-main',
@@ -27,7 +28,7 @@ export class MainComponent implements OnInit {
     },
   ];
 
-  constructor(private _vantageSessionService: VantageSessionService, private _themeService: VantageThemeService) {}
+  constructor(private _vantageSessionService: VantageSessionService, public _themeService: VantageThemeService) {}
 
   ngOnInit(): void {
     this.user = this._vantageSessionService.user;
@@ -37,20 +38,4 @@ export class MainComponent implements OnInit {
     this.user = undefined;
     this._vantageSessionService.logout();
   }
-
-  get logo(): string {
-    return this.darkThemeIsActive ? 'teradata' : 'teradata-dark';
-  }
-  get darkThemeIsActive(): boolean {
-    return this._themeService.darkThemeIsActive;
-  }
-  get lightThemeIsActive(): boolean {
-    return this._themeService.lightThemeIsActive;
-  }
-  applyLightTheme(): void {
-    this._themeService.applyLightTheme();
-  }
-  applyDarkTheme(): void {
-    this._themeService.applyDarkTheme();
-  }
 }