feat(): upgrade to [email protected] and [email protected] (#967)

* chore(): upgrade to [email protected] and material 5.0.0-rc * fix(): add test.ts to spec.json * fix(): breaking change replace MatDrawerToggleResult with void return * chore(): add TrackByFunction type to virtual scroll * fix(): remove deprecated methods and classes * feat(): breaking change from angular 5 we have to register specific locales now * fix(): test registered and unregistered locales * fix(): fix navigation-drawer layout alignment because of material breaking change * chore(): add aliases for `aot` and `reinstall:latest` * fix(data-table): fixed clickable demo * fix(menu): add height:auto to lists inside td-menu * fix(dynamic-forms): fix input width for demo * chore(): add node-sass rebuild for yarn reinstall
Teradata · Nov 13, 2017 · ba18ef5 · ba18ef5
1 parent 4cd45db
commit ba18ef5
Show file tree

Hide file tree

Showing 18 changed files with 621 additions and 284 deletions.
diff --git a/package.json b/package.json
@@ -11,23 +11,25 @@
   "scripts": {
     "e2e": "protractor",
     "e2e-test": "protractor ./protractor.conf.js",
+    "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
     "lint": "tslint --format codeFrame -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
     "postinstall": "webdriver-manager update",
-    "reinstall": "rm -rf node_modules tmp deploy dist && npm i",
-    "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
+    "reinstall": "rm -rf node_modules tmp deploy dist && yarn install && npm rebuild node-sass",
+    "reinstall:latest": "rm -rf node_modules tmp deploy dist && npm install",  
     "test": "ng test --code-coverage --single-run --sourcemap=false",
-    "coverage-win": "start chrome ./coverage/index.html",
-    "coverage-mac": "open -a \"Google Chrome\" coverage/index.html",
+    "coverage:win": "start chrome ./coverage/index.html",
+    "coverage:mac": "open -a \"Google Chrome\" coverage/index.html",
     "coveralls": "cat ./coverage/lcov.info | node ./node_modules/coveralls/bin/coveralls.js",
     "bump-dev": "gulp bump-version",
     "bump-patch": "gulp bump-version --ver patch",
     "bump-minor": "gulp bump-version --ver minor",
     "bump-major": "gulp bump-version --ver major",
     "aot": "./node_modules/.bin/ngc -p deploy/platform/tsconfig-aot.json && tsc -p src/platform/tsconfig-aot.json",
+    "serve:prod": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng serve --aot --prod --sourcemap=false --build-optimizer",
     "build": "bash scripts/build-release",
     "npm-publish": "npm run build && bash scripts/npm-publish",
     "nightly-publish": "npm run build && bash scripts/nightly-publish",
-    "ghpages-deploy": "./node_modules/.bin/ng build --base-href /covalent/ --aot -prod --sourcemap=false && bash scripts/ghpages-deploy",
+    "ghpages-deploy": "node --max_old_space_size=5048 ./node_modules/@angular/cli/bin/ng build --base-href /covalent/ --aot --prod --sourcemap=false --build-optimizer && bash scripts/ghpages-deploy",
     "start-release": "bash scripts/start-release",
     "finish-release": "bash scripts/finish-release",
     "combat-training": "bash scripts/combat-training"
@@ -60,23 +62,23 @@
     "ie 11"
   ],
   "dependencies": {
-    "@angular/animations": "^4.4.3",
-    "@angular/cdk": "^2.0.0-beta.12",
-    "@angular/common": "^4.4.3",
-    "@angular/compiler": "^4.4.3",
-    "@angular/core": "^4.4.3",
-    "@angular/forms": "^4.4.3",
-    "@angular/http": "^4.4.3",
-    "@angular/material": "^2.0.0-beta.12",
-    "@angular/platform-browser": "^4.4.3",
-    "@angular/platform-browser-dynamic": "^4.4.3",
-    "@angular/platform-server": "^4.4.3",
-    "@angular/router": "^4.4.3",
+    "@angular/animations": "^5.0.0",
+    "@angular/cdk": "5.0.0-rc0",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/material": "5.0.0-rc0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/platform-server": "^5.0.0",
+    "@angular/router": "^5.0.0",
     "@covalent/code-editor": "^1.0.0-beta.1",
     "@covalent/text-editor": "^1.0.0-alpha.4",
     "@ngx-translate/core": "8.0.0",
     "@ngx-translate/http-loader": "1.0.2",
-    "@swimlane/ngx-charts": "5.3.1",
+    "@swimlane/ngx-charts": "6.1.0",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "d3": "^4.4.0",
@@ -86,18 +88,18 @@
     "showdown": "1.6.4",
     "tslib": "^1.7.1",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
+    "zone.js": "^0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.2",
-    "@angular/compiler-cli": "^4.4.3",
+    "@angular/cli": "1.5.0",
+    "@angular/compiler-cli": "^5.0.0",
     "@types/fs-extra": "^4.0.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "@types/selenium-webdriver": "^2.52.0",
     "autoprefixer": "7.1.2",
-    "codelyzer": "~3.0.0",
+    "codelyzer": "~4.0.0",
     "coveralls": "^2.12.0",
     "fs-extra": "^4.0.0",
     "glob": "^6.0.4",
@@ -130,7 +132,7 @@
     "semver": "5.2.0",
     "ts-node": "^3.0.4",
     "tslint": "5.2.0",
-    "typescript": "~2.3.2",
+    "typescript": "~2.4.2",
     "uglify-js": "^2.8.14"
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,6 +7,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
 
+import { registerLocaleData } from '@angular/common';
+import localeEs from '@angular/common/locales/es';
+
+// register 'es' locale
+registerLocaleData(localeEs);
+
 import { DocsAppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
 import { TemplatesComponent } from './components/templates/templates.component';

diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
@@ -294,7 +294,7 @@ <h3>No results to display.</h3>
               selectedRows: any[] = [];
               sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
 
-              constructor(private _dataTableService: TdDataTableService) {}
+               constructor(private _dataTableService: TdDataTableService) {}
 
               ngOnInit(): void {
                 this.filter();
@@ -319,9 +319,8 @@ <h3>No results to display.</h3>
               }
 
               showAlert(event: any): void {
-                this._dialogService.openAlert({
-                  message: JSON.stringify('You clicked on row: ' + event.row.name),
-                });
+                let row: any = event.row;
+                // .. do something with event.row
               }
 
               filter(): void {

diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts
@@ -180,7 +180,7 @@ export class DataTableDemoComponent implements OnInit {
 
   showAlert(event: any): void {
     this._dialogService.openAlert({
-      message: 'You clicked on row: ' + event.row.name,
+      message: 'You clicked on row: ' + event.row.first_name + ' ' + event.row.last_name,
     });
   }
 }
diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.scss b/src/app/components/components/dynamic-forms/dynamic-forms.component.scss
@@ -0,0 +1,3 @@
+/deep/ .mat-input-infix.mat-form-field-infix {
+  width: 100%;
+}
diff --git a/src/platform/core/common/pipes/digits/digits.pipe.spec.ts b/src/platform/core/common/pipes/digits/digits.pipe.spec.ts
@@ -1,11 +1,19 @@
 import { TdDigitsPipe } from './digits.pipe';
 
+import { registerLocaleData } from '@angular/common';
+import localeEs from '@angular/common/locales/es';
+
+// register 'es' locale
+registerLocaleData(localeEs);
+
 describe('TdDigitsPipe', () => {
   let pipe: TdDigitsPipe;
-  let l10nPipe: TdDigitsPipe;
+  let l10nEsPipe: TdDigitsPipe;
+  let l10nFrPipe: TdDigitsPipe;
   beforeEach(() => {
     pipe = new TdDigitsPipe();
-    l10nPipe = new TdDigitsPipe('es');
+    l10nEsPipe = new TdDigitsPipe('es');
+    l10nFrPipe = new TdDigitsPipe('fr');
   });
 
   it('should return with an empty or invalid input', () => {
@@ -31,18 +39,25 @@ describe('TdDigitsPipe', () => {
     expect(pipe.transform(5.35765e+16, undefined)).toEqual('53.6 Q');
 
     /* transformations in 'es'*/
-    expect(l10nPipe.transform('34', undefined)).toEqual('34');
-    expect(l10nPipe.transform(0.45, 1)).toEqual('0,5');
-    expect(l10nPipe.transform(0.724, 2)).toEqual('0,72');
-    expect(l10nPipe.transform(535, undefined)).toEqual('535');
-    expect(l10nPipe.transform(138540, undefined)).toEqual('138,5 K');
-    expect(l10nPipe.transform(138540, 2)).toEqual('138,54 K');
-    expect(l10nPipe.transform(1571800, undefined)).toEqual('1,6 M');
-    expect(l10nPipe.transform(1571800, 3)).toEqual('1,572 M');
-    expect(l10nPipe.transform(10000000, undefined)).toEqual('10 M');
-    expect(l10nPipe.transform(10200000, undefined)).toEqual('10,2 M');
-    expect(l10nPipe.transform(3.81861e+10, undefined)).toEqual('38,2 B');
-    expect(l10nPipe.transform(1.890381861e+14, undefined)).toEqual('189 T');
-    expect(l10nPipe.transform(5.35765e+16, undefined)).toEqual('53,6 Q');
+    expect(l10nEsPipe.transform('34', undefined)).toEqual('34');
+    expect(l10nEsPipe.transform(0.45, 1)).toEqual('0,5');
+    expect(l10nEsPipe.transform(0.724, 2)).toEqual('0,72');
+    expect(l10nEsPipe.transform(535, undefined)).toEqual('535');
+    expect(l10nEsPipe.transform(138540, undefined)).toEqual('138,5 K');
+    expect(l10nEsPipe.transform(138540, 2)).toEqual('138,54 K');
+    expect(l10nEsPipe.transform(1571800, undefined)).toEqual('1,6 M');
+    expect(l10nEsPipe.transform(1571800, 3)).toEqual('1,572 M');
+    expect(l10nEsPipe.transform(10000000, undefined)).toEqual('10 M');
+    expect(l10nEsPipe.transform(10200000, undefined)).toEqual('10,2 M');
+    expect(l10nEsPipe.transform(3.81861e+10, undefined)).toEqual('38,2 B');
+    expect(l10nEsPipe.transform(1.890381861e+14, undefined)).toEqual('189 T');
+    expect(l10nEsPipe.transform(5.35765e+16, undefined)).toEqual('53,6 Q');
+  });
+
+  it('should fail since locale is not registered', () => {
+    /* not registered transformations */
+    expect(() => {
+      l10nFrPipe.transform(1000, undefined);
+    }).toThrowError();
   });
 });
diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, Directive, Input, ViewChild } from '@angular/core';
 
-import { MatSidenav, MatDrawerToggleResult } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 import { ILayoutTogglable } from '../layout-toggle.class';
 
@@ -57,21 +57,21 @@ export class TdLayoutManageListComponent implements ILayoutTogglable {
   /**
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
-  public toggle(): Promise<MatDrawerToggleResult> {
+  public toggle(): Promise<void> {
     return this.sidenav.toggle(!this.sidenav.opened);
   }
 
   /**
    * Proxy open method to access sidenav from outside (from td-layout template).
    */
-  public open(): Promise<MatDrawerToggleResult> {
+  public open(): Promise<void> {
     return this.sidenav.open();
   }
 
   /**
    * Proxy close method to access sidenav from outside (from td-layout template).
    */
-  public close(): Promise<MatDrawerToggleResult> {
+  public close(): Promise<void> {
     return this.sidenav.close();
   }
 

diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, ViewChild, Optional } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { MatSidenav, MatDrawerToggleResult } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 import { ILayoutTogglable } from '../layout-toggle.class';
 
@@ -108,21 +108,21 @@ export class TdLayoutNavListComponent implements ILayoutTogglable {
   /**
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
-  public toggle(): Promise<MatDrawerToggleResult> {
+  public toggle(): Promise<void> {
     return this.sidenav.toggle(!this.sidenav.opened);
   }
 
   /**
    * Proxy open method to access sidenav from outside (from td-layout template).
    */
-  public open(): Promise<MatDrawerToggleResult> {
+  public open(): Promise<void> {
     return this.sidenav.open();
   }
 
   /**
    * Proxy close method to access sidenav from outside (from td-layout template).
    */
-  public close(): Promise<MatDrawerToggleResult> {
+  public close(): Promise<void> {
     return this.sidenav.close();
   }
 

diff --git a/src/platform/core/layout/layout-toggle.class.ts b/src/platform/core/layout/layout-toggle.class.ts
@@ -1,17 +1,15 @@
 import { Input, HostBinding, HostListener, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
 
-import { MatDrawerToggleResult, MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
-import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
-import { merge } from 'rxjs/observable/merge';
 
 export interface ILayoutTogglable {
   opened: boolean;
   sidenav: MatSidenav;
-  toggle(): Promise<MatDrawerToggleResult>;
-  open(): Promise<MatDrawerToggleResult>;
-  close(): Promise<MatDrawerToggleResult>;
+  toggle(): Promise<void>;
+  open(): Promise<void>;
+  close(): Promise<void>;
 }
 
 export abstract class LayoutToggle implements AfterViewInit, OnDestroy {

diff --git a/src/platform/core/layout/layout.component.ts b/src/platform/core/layout/layout.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core';
 
-import { MatSidenav, MatDrawerToggleResult } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 import { ILayoutTogglable } from './layout-toggle.class';
 
@@ -57,21 +57,21 @@ export class TdLayoutComponent implements ILayoutTogglable {
   /**
    * Proxy toggle method to access sidenav from outside (from td-layout template).
    */
-  public toggle(): Promise<MatDrawerToggleResult> {
+  public toggle(): Promise<void> {
     return this.sidenav.toggle(!this.sidenav.opened);
   }
 
   /**
    * Proxy open method to access sidenav from outside (from td-layout template).
    */
-  public open(): Promise<MatDrawerToggleResult> {
+  public open(): Promise<void> {
     return this.sidenav.open();
   }
 
   /**
    * Proxy close method to access sidenav from outside (from td-layout template).
    */
-  public close(): Promise<MatDrawerToggleResult> {
+  public close(): Promise<void> {
     return this.sidenav.close();
   }
 

diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html
@@ -1,19 +1,22 @@
-<mat-toolbar [color]="color" [style.background-image]="backgroundImage" [class.td-toolbar-background]="!!isBackgroundAvailable">
+<mat-toolbar [color]="color"
+             [style.background-image]="backgroundImage"
+             [class.td-toolbar-background]="!!isBackgroundAvailable"
+             class="td-nagivation-drawer-toolbar">
   <ng-content select="[td-navigation-drawer-toolbar]"></ng-content>
   <ng-container *ngIf="!isCustomToolbar">
-    <span *ngIf="icon || logo || sidenavTitle"
+    <div *ngIf="icon || logo || sidenavTitle"
           class="td-navigation-drawer-toolbar-content"
           [class.cursor-pointer]="routerEnabled"
           (click)="handleNavigationClick()">
       <mat-icon *ngIf="icon">{{icon}}</mat-icon>
       <mat-icon *ngIf="logo && !icon" class="mat-icon-logo" [svgIcon]="logo"></mat-icon>
       <span *ngIf="sidenavTitle" class="md-subhead">{{sidenavTitle}}</span>
-    </span>
+    </div>
     <div class="md-body-2" *ngIf="email && name">{{name}}</div>
     <div class="td-navigation-drawer-menu-toggle md-body-1"
-         href
-         *ngIf="email || name"
-         (click)="toggleMenu()">
+        href
+        *ngIf="email || name"
+        (click)="toggleMenu()">
       <span class="td-navigation-drawer-label">{{email || name}}</span>
       <button mat-icon-button class="td-navigation-drawer-menu-button" *ngIf="isMenuAvailable">
         <mat-icon *ngIf="!menuToggled">arrow_drop_down</mat-icon>

diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.scss b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.scss
@@ -6,6 +6,11 @@
       background-repeat: no-repeat;
       background-size: cover;
     }
+    &.td-nagivation-drawer-toolbar {
+      flex-direction: column;
+      height: auto !important;
+      display: block !important;
+    }
     .td-navigation-drawer-toolbar-content {
       // [layout="row"]
       flex-direction: row;
@@ -32,10 +37,6 @@
         width: 24px;
       }
     }
-    /deep/ > .mat-toolbar-layout > mat-toolbar-row {
-      height: auto !important;
-      display: block !important;
-    }
   }
   > div {
     overflow: hidden;