From 22ae17bb0b49116924e7f17371840f6a914c652c Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 24 Nov 2017 15:18:09 +0200 Subject: [PATCH] build(aio): upgrade to latest `@angular/material` and `@angular/cdk` (#18428) PR Close #18428 --- aio/package.json | 4 ++-- aio/src/app/app.component.spec.ts | 14 +++++++++++--- aio/src/app/app.component.ts | 2 +- aio/src/app/app.module.ts | 4 ---- aio/src/app/shared/custom-icon-registry.ts | 15 +-------------- aio/src/app/shared/scroll.service.ts | 2 +- aio/src/styles/0-base/_typography.scss | 2 +- aio/yarn.lock | 12 ++++++------ 8 files changed, 23 insertions(+), 32 deletions(-) diff --git a/aio/package.json b/aio/package.json index b93341dae4..2d049b30f3 100644 --- a/aio/package.json +++ b/aio/package.json @@ -65,13 +65,13 @@ "private": true, "dependencies": { "@angular/animations": "^5.1.0-beta.2", - "@angular/cdk": "^2.0.0-beta.12", + "@angular/cdk": "^5.0.0-rc.1", "@angular/common": "^5.1.0-beta.2", "@angular/compiler": "^5.1.0-beta.2", "@angular/core": "^5.1.0-beta.2", "@angular/forms": "^5.1.0-beta.2", "@angular/http": "^5.1.0-beta.2", - "@angular/material": "^2.0.0-beta.12", + "@angular/material": "^5.0.0-rc.1", "@angular/platform-browser": "^5.1.0-beta.2", "@angular/platform-browser-dynamic": "^5.1.0-beta.2", "@angular/platform-server": "^5.1.0-beta.2", diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index a2697c3eb5..8667b95d4c 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -6,6 +6,7 @@ import { HttpClient } from '@angular/common/http'; import { MatProgressBar, MatSidenav } from '@angular/material'; import { By } from '@angular/platform-browser'; +import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { AppComponent } from './app.component'; @@ -381,20 +382,27 @@ describe('AppComponent', () => { checkHostClass('view', ''); }); - it('should set the css class of the host container based on the open/closed state of the side nav', () => { + it('should set the css class of the host container based on the open/closed state of the side nav', async () => { locationService.go('guide/pipes'); fixture.detectChanges(); checkHostClass('sidenav', 'open'); sidenav.close(); - sidenav.onClose.next(); + await waitForEmit(sidenav.onClose); fixture.detectChanges(); checkHostClass('sidenav', 'closed'); sidenav.open(); - sidenav.onOpen.next(); + await waitForEmit(sidenav.onOpen); fixture.detectChanges(); checkHostClass('sidenav', 'open'); + + function waitForEmit(emitter: Observable): Promise { + return new Promise(resolve => { + emitter.subscribe(resolve); + fixture.detectChanges(); + }); + } }); it('should set the css class of the host container based on the initial deployment mode', () => { diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 2d2be1011b..dd7d170cd5 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -298,7 +298,7 @@ export class AppComponent implements OnInit { const el = this.hostElement.nativeElement as Element; this.tocMaxHeightOffset = el.querySelector('footer').clientHeight + - el.querySelector('mat-toolbar.app-toolbar').clientHeight + + el.querySelector('.app-toolbar').clientHeight + 24; // fudge margin } diff --git a/aio/src/app/app.module.ts b/aio/src/app/app.module.ts index 75c47ce125..a7a7d9b83d 100644 --- a/aio/src/app/app.module.ts +++ b/aio/src/app/app.module.ts @@ -13,10 +13,6 @@ import { MatToolbarModule } from '@angular/material/toolbar'; import { ROUTES } from '@angular/router'; -// Temporary fix for MatSidenavModule issue: -// crashes with "missing first" operator when SideNav.mode is "over" -import 'rxjs/add/operator/first'; - import { AppComponent } from 'app/app.component'; import { EMBEDDED_COMPONENTS, EmbeddedComponentsMap } from 'app/embed-components/embed-components.service'; diff --git a/aio/src/app/shared/custom-icon-registry.ts b/aio/src/app/shared/custom-icon-registry.ts index fdec8bd247..cb974c4a2e 100644 --- a/aio/src/app/shared/custom-icon-registry.ts +++ b/aio/src/app/shared/custom-icon-registry.ts @@ -27,19 +27,6 @@ interface SvgIconMap { [iconName: string]: SVGElement; } -// -// @angular/material's `MdIconRegitry` currently (v2.0.0-beta.8) requires an instance of `Http` -// (from @angular/http). It is only used to [get some text content][1], so we can create a wrapper -// around `HttpClient` and pretend it is `Http`. -// [1]: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/icon/icon-registry.ts#L465-L466 -// -function createFakeHttp(http: HttpClient): any { - return { - get: (url: string) => http.get(url, {responseType: 'text'}) - .map(data => ({text: () => data})) - }; -} - /** * A custom replacement for Angular Material's `MdIconRegistry`, which allows * us to provide preloaded icon SVG sources. @@ -49,7 +36,7 @@ export class CustomIconRegistry extends MatIconRegistry { private preloadedSvgElements: SvgIconMap = {}; constructor(http: HttpClient, sanitizer: DomSanitizer, @Inject(SVG_ICONS) svgIcons: SvgIconInfo[]) { - super(createFakeHttp(http), sanitizer); + super(http, sanitizer); this.loadSvgElements(svgIcons); } diff --git a/aio/src/app/shared/scroll.service.ts b/aio/src/app/shared/scroll.service.ts index b9343a68a2..ad8726c0ce 100644 --- a/aio/src/app/shared/scroll.service.ts +++ b/aio/src/app/shared/scroll.service.ts @@ -17,7 +17,7 @@ export class ScrollService { // at the top (e.g. toolbar) + some margin get topOffset() { if (!this._topOffset) { - const toolbar = this.document.querySelector('mat-toolbar.app-toolbar'); + const toolbar = this.document.querySelector('.app-toolbar'); this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin; } return this._topOffset; diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index 870af4fc4b..fdc110c0a0 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -100,7 +100,7 @@ a { text-decoration: none; } -.mat-toolbar-row a { +.app-toolbar a { font-size: 16px; font-weight: 400; color: white; diff --git a/aio/yarn.lock b/aio/yarn.lock index 2ae416d9b7..f1c9d5db6c 100644 --- a/aio/yarn.lock +++ b/aio/yarn.lock @@ -32,9 +32,9 @@ dependencies: tslib "^1.7.1" -"@angular/cdk@^2.0.0-beta.12": - version "2.0.0-beta.12" - resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.12.tgz#3a243cb62b93f4e039120ba70f900dc9e235622e" +"@angular/cdk@^5.0.0-rc.1": + version "5.0.0-rc.1" + resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-5.0.0-rc.1.tgz#7d6d937fea50074962db8ce02664b164401d197d" dependencies: tslib "^1.7.1" @@ -140,9 +140,9 @@ dependencies: tslib "^1.7.1" -"@angular/material@^2.0.0-beta.12": - version "2.0.0-beta.12" - resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.12.tgz#71b6d0b7b021891e5d0e3688c1d4bd78c7457f58" +"@angular/material@^5.0.0-rc.1": + version "5.0.0-rc.1" + resolved "https://registry.yarnpkg.com/@angular/material/-/material-5.0.0-rc.1.tgz#63456b7568c102b6bb7983a2837cc317350fe270" dependencies: tslib "^1.7.1"