From e784766de5198a0f71ea45d1b41d0973e202fb42 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 13 Nov 2017 15:12:45 -0800 Subject: [PATCH] feat(): upgrade to angular@5.0.0 and material@5.0.0.rc (#967) * chore(): upgrade to angular@5.0.0 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 --- package.json | 48 +- src/app/app.module.ts | 6 + .../data-table/data-table.component.html | 7 +- .../data-table/data-table.component.ts | 2 +- .../dynamic-forms.component.scss | 3 + .../common/pipes/digits/digits.pipe.spec.ts | 45 +- .../layout-manage-list.component.ts | 8 +- .../layout-nav-list.component.ts | 8 +- .../core/layout/layout-toggle.class.ts | 10 +- src/platform/core/layout/layout.component.ts | 8 +- .../navigation-drawer.component.html | 15 +- .../navigation-drawer.component.scss | 9 +- .../navigation-drawer.component.ts | 14 +- .../core/loading/services/loading.factory.ts | 2 +- src/platform/core/menu/menu.component.scss | 25 +- .../virtual-scroll-container.component.ts | 4 +- src/tsconfig.spec.json | 1 + yarn.lock | 690 +++++++++++++----- 18 files changed, 621 insertions(+), 284 deletions(-) diff --git a/package.json b/package.json index 13a67d88dd..69684d2f28 100644 --- 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 index 1b072e6078..f359821c0e 100644 --- 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 index f6aeef1654..7d9d8b9ed4 100644 --- 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 @@

No results to display.

selectedRows: any[] = []; sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending; - constructor(private _dataTableService: TdDataTableService) {} + constructor(private _dataTableService: TdDataTableService) {} ngOnInit(): void { this.filter(); @@ -319,9 +319,8 @@

No results to display.

} 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 index 22b4e6ffbc..d804c07308 100644 --- 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 index e69de29bb2..83fc55db76 100644 --- 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%; +} \ No newline at end of file diff --git a/src/platform/core/common/pipes/digits/digits.pipe.spec.ts b/src/platform/core/common/pipes/digits/digits.pipe.spec.ts index f869ae2099..826164509f 100644 --- 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 index f2efc8df45..1d6ca4f427 100644 --- 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 { + public toggle(): Promise { return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { 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 index 44c15adaf5..042c74bac0 100644 --- 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 { + public toggle(): Promise { return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { return this.sidenav.close(); } diff --git a/src/platform/core/layout/layout-toggle.class.ts b/src/platform/core/layout/layout-toggle.class.ts index 8bd8bd5497..964f917e57 100644 --- 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; - open(): Promise; - close(): Promise; + toggle(): Promise; + open(): Promise; + close(): Promise; } 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 index 94df4e30ec..5e5d791793 100644 --- 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 { + public toggle(): Promise { return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { 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 index 8307eca6c9..19b01e8fc6 100644 --- 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 @@ - + - {{icon}} {{sidenavTitle}} - +
{{name}}
+ href + *ngIf="email || name" + (click)="toggleMenu()"> {{email || name}}