build(aio): upgrade to latest `@angular/material` and `@angular/cdk` (#18428)

PR Close #18428
This commit is contained in:
George Kalpakas 2017-11-24 15:18:09 +02:00 committed by Jason Aden
parent d546be48e1
commit 22ae17bb0b
8 changed files with 23 additions and 32 deletions

View File

@ -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",

View File

@ -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<void>): Promise<void> {
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', () => {

View File

@ -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
}

View File

@ -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';

View File

@ -27,19 +27,6 @@ interface SvgIconMap {
[iconName: string]: SVGElement;
}
// <hack-alert>
// @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
// </hack-alert>
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);
}

View File

@ -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;

View File

@ -100,7 +100,7 @@ a {
text-decoration: none;
}
.mat-toolbar-row a {
.app-toolbar a {
font-size: 16px;
font-weight: 400;
color: white;

View File

@ -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"