feat(upgrade): upgrade to us angular 7 rc.0/1 (#1252)

* feat(): upgrade to max cap angular 6.x.x at time of writing Upgrade steps used below: 1) ng update @angular/cli --from=6.0.1 2) ng update rxjs --from=6.3.3 3) yarn upgrade tsickle@0.32.1 - (b/c core and material upgrade (below) require typescript 2.9.2 support - ng update was complaining - 0.33.0 support typescript 3) 4) ng update @angular/core --from=6.0.2 5) remove unused tests helpers causing typescript tying complaints 6) ng update @angular/material --from=6.0.2 7) ng update @angular-devkit/build-angular * feat(): upgrade to angular 7.0.0-rc.0 steps used below: 1) ng update @angular/cli --next --from=6.2.4 2) yarn upgrade tsickle@0.33.0 3) ng update @angular/core --next --force --from=6.1.9 4) ng update @angular/cdk --next --force --from=6.4.7 5) ng update @angular/material --next --force --from=6.4.7 6) yarn upgrade codelyzer@4.5.0 7) yarn upgrade ng-packagr@4.3.0 * chore(): update other dependencies * fix(): scroll issue in management/nav-list layouts * fix(): layout dom change for scrolling * fix(layout): safari collapse animation issue * feat(collapse): consistency change display to visibility auto style * fix(animation): fade/in/out on safari not working * fix(animation): similar safari fixes for depercated collapse animation * fix(scss): elevation function signature changes * feat(universal): upgrade universal app to use angular 7 rc versions * fix(typing): fix upgraded type being used/returned * chore(): update to 7.0.0 release + fixes * fix(): lint error * fix(): lint issue * chore(): fix angular.json to be able to run unit tests * fix(steps): unit tests * fix(loading): unit tests * fix(json-formatter): unit tests * fix(expansion-panel): unit tests * fix(docs): funky scrollbar in virtual scroll docs when always visible * fix(): remove border sidenav from layout-nav-list * fix(): logo fix in markdown * fix(logo): broken navigation to navigation-drawer * fix(): reduce z-index on branding top to 999 * fix(layout-nav): right to left border on sidenav
Teradata · Oct 25, 2018 · a9a067d · a9a067d
1 parent 7f6a9ca
commit a9a067d
Show file tree

Hide file tree

Showing 28 changed files with 1,927 additions and 1,346 deletions.
diff --git a/angular.json b/angular.json
@@ -85,18 +85,12 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              {
-                "input": "styles.scss"
-              }, {
-                "input": "theme.scss"
-              }, {
-                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
-              }
+              "src/styles.scss",
+              "src/theme.scss",
+              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": [
-              {
-               "input": "node_modules/hammerjs/hammer.min.js"
-              }
+              "node_modules/hammerjs/hammer.min.js"
             ],
             "assets": [
               {

diff --git a/build.conf.js b/build.conf.js
@@ -2,8 +2,8 @@
 
 module.exports = {
   deployed: 'deploy/platform/',
-  angularVersion: '6.0.0',
-  materialVersion: '6.0.0',
+  angularVersion: '7.0.0',
+  materialVersion: '7.0.0',
   paths: {
     PostNgPackngrBuildRequiredFiles: [
       '!src/platform/core/**/*.component.scss',

diff --git a/package.json b/package.json
@@ -63,45 +63,45 @@
     "ie 11"
   ],
   "dependencies": {
-    "@angular/animations": "6.0.2",
-    "@angular/cdk": "6.0.2",
-    "@angular/common": "6.0.2",
-    "@angular/compiler": "6.0.2",
-    "@angular/core": "6.0.2",
-    "@angular/forms": "6.0.2",
-    "@angular/http": "6.0.2",
-    "@angular/material": "6.0.1",
-    "@angular/platform-browser": "6.0.2",
-    "@angular/platform-browser-dynamic": "6.0.2",
-    "@angular/platform-server": "6.0.2",
-    "@angular/router": "6.0.2",
+    "@angular/animations": "7.0.0",
+    "@angular/cdk": "7.0.1",
+    "@angular/common": "7.0.0",
+    "@angular/compiler": "7.0.0",
+    "@angular/core": "7.0.0",
+    "@angular/forms": "7.0.0",
+    "@angular/http": "7.0.0",
+    "@angular/material": "7.0.1",
+    "@angular/platform-browser": "7.0.0",
+    "@angular/platform-browser-dynamic": "7.0.0",
+    "@angular/platform-server": "7.0.0",
+    "@angular/router": "7.0.0",
     "@covalent/code-editor": "2.0.0-beta.5",
     "@covalent/text-editor": "2.0.0-beta.2",
-    "@covalent/tools": "2.0.0-beta.2",
-    "@ngx-translate/core": "10.0.1",
-    "@ngx-translate/http-loader": "3.0.1",
+    "@ngx-translate/core": "11.0.0",
+    "@ngx-translate/http-loader": "4.0.0",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
-    "highlight.js": "9.11.0",
-    "rxjs": "6.0.0",
+    "highlight.js": "9.13.1",
+    "rxjs": "6.3.3",
     "showdown": "1.6.4",
-    "tslib": "^1.9.0",
+    "tslib": "^1.9.3",
     "web-animations-js": "2.3.1",
-    "zone.js": "^0.8.24"
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.1",
-    "@angular/cli": "6.0.1",
-    "@angular/compiler-cli": "6.0.2",
+    "@angular-devkit/build-angular": "^0.10.2",
+    "@angular/cli": "7.0.2",
+    "@angular/compiler-cli": "7.0.0",
+    "@covalent/tools": "2.0.0-beta.2",
     "@types/fs-extra": "^4.0.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "@types/selenium-webdriver": "^2.52.0",
     "autoprefixer": "7.1.2",
-    "codelyzer": "~4.2.1",
+    "codelyzer": "4.5.0",
     "conventional-changelog-cli": "^1.3.5",
     "coveralls": "^2.12.0",
     "fs-extra": "^4.0.0",
@@ -120,17 +120,17 @@
     "karma-coverage-istanbul-reporter": "~1.4.2",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "2.4.2",
+    "ng-packagr": "4.4.0",
     "node-sass": "4.9.0",
-    "pa11y": "^5.0.0-beta.5",
+    "pa11y": "^5.1.0",
     "protractor": "~5.3.0",
     "require-dir": "0.3.2",
     "semver": "5.2.0",
     "stylelint": "^8.4.0",
     "ts-node": "~5.0.1",
-    "tsickle": "^0.26.0",
+    "tsickle": "0.33.1",
     "tslint": "5.9.1",
-    "typescript": "~2.7.2",
+    "typescript": "~3.1.3",
     "webpack-bundle-analyzer": "^2.9.1",
     "webpack-stats-plugin": "^0.1.5"
   }

diff --git a/src/_teradata-branding.scss b/src/_teradata-branding.scss
@@ -597,7 +597,7 @@ body {
     top: 0;
     height: 2px;
     width: 100%;
-    z-index: 1000;
+    z-index: 999;
     background-color: mat-color($accent);
   }
 

diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.scss b/src/app/components/components/dynamic-forms/dynamic-forms.component.scss
@@ -1,3 +0,0 @@
-::ng-deep .mat-form-field-infix {
-  width: 100%;
-}

diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html
@@ -85,12 +85,12 @@ <h3>Links &amp; Images</h3>
           [teradata github Landing]: https://teradata.github.io/
 
           Inline image
-          ![alt text here](assets/icons/teradata.svg)
+          ![alt text here](assets/icons/teradata-dark.svg)
 
           Reference-style image:
           ![alt text][logo]
 
-          [logo]: assets/icons/teradata.svg "Teradata Labs"
+          [logo]: assets/icons/teradata-dark.svg "Teradata Labs"
         </td-markdown>
       </mat-tab>
       <mat-tab>
@@ -105,12 +105,12 @@ <h3>Links &amp; Images</h3>
               [teradata github Landing]: https://teradata.github.io/
 
               Inline image
-              ![alt text here](assets/icons/teradata.svg)
+              ![alt text here](assets/icons/teradata-dark.svg)
 
               Reference-style image:
               ![alt text][logo]
 
-              [logo]: assets/icons/teradata.svg "Teradata Labs"
+              [logo]: assets/icons/teradata-dark.svg "Teradata Labs"
             </td-markdown>
           ]]>
         </td-highlight>

diff --git a/src/app/components/components/virtual-scroll/virtual-scroll.component.html b/src/app/components/components/virtual-scroll/virtual-scroll.component.html
@@ -12,71 +12,69 @@
     Scroll virtually on a set of items
   </mat-card-subtitle>
   <mat-divider></mat-divider>
-  <mat-card-content>
-    <div [style.overflow]="'hidden'" [@tdCollapse]="!toggleDemoCode">
-      <mat-tab-group mat-stretch-tabs dynamicHeight>
-        <mat-tab>
-          <ng-template matTabLabel>HTML</ng-template>
-          <td-highlight lang="html">
-            <![CDATA[
-              <mat-list>
-                <mat-list-item>
-                  Column Header
-                </mat-list-item>
-                <mat-divider></mat-divider>
-                <td-virtual-scroll-container #virtualScroll [style.height.px]="400" [data]="data">
-                  <ng-template let-row="row" let-last="last" tdVirtualScrollRow>
-                    <mat-list-item>
-                      <mat-icon matListAvatar>person</mat-icon>
-                      <h4 matLine>{ {row.name} }</h4>
-                      <p matLine>Row: { {row.index} }</p>
-                    </mat-list-item>
-                    <mat-divider *ngIf="!last" [inset]="true"></mat-divider>
-                  </ng-template>
-                </td-virtual-scroll-container>
-              </mat-list>
-            ]]>
-          </td-highlight>
-        </mat-tab>
-        <mat-tab>
-          <ng-template matTabLabel>TS</ng-template>
-          <td-highlight lang="typescript">
-            <![CDATA[
-              import { Component, OnInit } from '@angular/core';
-              ...
-              export class Demo implements OnInit {
-
-                data: any[] = [];
-
-                ngOnInit(): void {
-                  for (let index: number = 1; index <= 1500; index++) {
-                    this.data.push({index: index, name: 'element-' + index});
-                  }
+  <div [style.overflow]="'hidden'" [@tdCollapse]="!toggleDemoCode">
+    <mat-tab-group mat-stretch-tabs dynamicHeight>
+      <mat-tab>
+        <ng-template matTabLabel>HTML</ng-template>
+        <td-highlight lang="html">
+          <![CDATA[
+            <mat-list>
+              <mat-list-item>
+                Column Header
+              </mat-list-item>
+              <mat-divider></mat-divider>
+              <td-virtual-scroll-container #virtualScroll [style.height.px]="400" [data]="data">
+                <ng-template let-row="row" let-last="last" tdVirtualScrollRow>
+                  <mat-list-item>
+                    <mat-icon matListAvatar>person</mat-icon>
+                    <h4 matLine>{ {row.name} }</h4>
+                    <p matLine>Row: { {row.index} }</p>
+                  </mat-list-item>
+                  <mat-divider *ngIf="!last" [inset]="true"></mat-divider>
+                </ng-template>
+              </td-virtual-scroll-container>
+            </mat-list>
+          ]]>
+        </td-highlight>
+      </mat-tab>
+      <mat-tab>
+        <ng-template matTabLabel>TS</ng-template>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            import { Component, OnInit } from '@angular/core';
+            ...
+            export class Demo implements OnInit {
+
+              data: any[] = [];
+
+              ngOnInit(): void {
+                for (let index: number = 1; index <= 1500; index++) {
+                  this.data.push({index: index, name: 'element-' + index});
                 }
               }
-            ]]>
-          </td-highlight>
-        </mat-tab>
-      </mat-tab-group>
-      <mat-divider></mat-divider>
-    </div>
-    <mat-list>
-      <mat-list-item>
-        Column Header
-      </mat-list-item>
-      <mat-divider></mat-divider>
-      <td-virtual-scroll-container #virtualScroll [style.height.px]="400" [data]="data">
-        <ng-template let-row="row" let-last="last" tdVirtualScrollRow>
-          <mat-list-item>
-            <mat-icon matListAvatar>person</mat-icon>
-            <h4 matLine>{{row.name}}</h4>
-            <p matLine>Row: {{row.index}}</p>
-          </mat-list-item>
-          <mat-divider *ngIf="!last" [inset]="true"></mat-divider>
-        </ng-template>
-      </td-virtual-scroll-container>
-    </mat-list>
-  </mat-card-content>
+            }
+          ]]>
+        </td-highlight>
+      </mat-tab>
+    </mat-tab-group>
+    <mat-divider></mat-divider>
+  </div>
+  <mat-list>
+    <mat-list-item>
+      Column Header
+    </mat-list-item>
+    <mat-divider></mat-divider>
+    <td-virtual-scroll-container #virtualScroll [style.height.px]="400" [data]="data">
+      <ng-template let-row="row" let-last="last" tdVirtualScrollRow>
+        <mat-list-item>
+          <mat-icon matListAvatar>person</mat-icon>
+          <h4 matLine>{{row.name}}</h4>
+          <p matLine>Row: {{row.index}}</p>
+        </mat-list-item>
+        <mat-divider *ngIf="!last" [inset]="true"></mat-divider>
+      </ng-template>
+    </td-virtual-scroll-container>
+  </mat-list>
   <mat-divider></mat-divider>
   <mat-card-actions>
     <button mat-button class="text-upper" (click)="virtualScroll.scrollToStart()">

diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
@@ -24,7 +24,7 @@
   <mat-divider></mat-divider>
   <div [style.height]="'400px'" class="relative">
     <td-layout>
-      <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+      <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
         <mat-nav-list>
           <a mat-list-item><mat-icon>home</mat-icon>Home</a>
         </mat-nav-list>
@@ -49,7 +49,7 @@
     <td-highlight lang="html">
       <![CDATA[
         <td-layout>
-          <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+          <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
             <mat-nav-list>
               <a mat-list-item><mat-icon>home</mat-icon>Home</a>
             </mat-nav-list>
@@ -78,7 +78,7 @@
   <mat-divider></mat-divider>
   <div [style.height]="'400px'" class="relative">
     <td-layout>
-      <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+      <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
         <mat-nav-list>
           <a *ngFor="let item of routes" mat-list-item><mat-icon>{{item.icon}}</mat-icon>{{item.title}}</a>
         </mat-nav-list>
@@ -139,7 +139,7 @@ <h3 matLine> {{item.date | timeAgo}} </h3>
     <td-highlight lang="html">
       <![CDATA[
         <td-layout>
-          <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+          <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
             <mat-nav-list>
               <a *ngFor="let item of routes" mat-list-item><mat-icon>{ {item.icon} }</mat-icon>{ {item.title} }</a>
             </mat-nav-list>

diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -34,7 +34,7 @@
   <mat-divider></mat-divider>
   <div [style.height]="'400px'" class="relative">
     <td-layout>
-      <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+      <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
         <mat-nav-list>
           <a mat-list-item><mat-icon>home</mat-icon>Home</a>
         </mat-nav-list>
@@ -69,7 +69,7 @@
     <td-highlight lang="html">
       <![CDATA[
         <td-layout>
-          <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+          <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
             <mat-nav-list>
               <a mat-list-item><mat-icon>home</mat-icon>Home</a>
             </mat-nav-list>
@@ -108,7 +108,7 @@
   <mat-divider></mat-divider>
   <div [style.height]="'400px'" class="relative">
     <td-layout>
-      <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+      <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
         <mat-nav-list>
           <a *ngFor="let item of routes" mat-list-item><mat-icon>{{item.icon}}</mat-icon>{{item.title}}</a>
         </mat-nav-list>
@@ -232,7 +232,7 @@
     <td-highlight lang="html">
       <![CDATA[
         <td-layout>
-          <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
+          <td-navigation-drawer flex sidenavTitle="Covalent" logo="teradata-dark" name="Firstname Lastname" email="firstname.lastname@company.com">
             <mat-nav-list>
               <a *ngFor="let item of routes" mat-list-item><mat-icon>{ {item.icon} }</mat-icon>{ {item.title} }</a>
             </mat-nav-list>