Sidenav fixes

package.json

@@ -19,27 +19,27 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "6.0.0-beta.6",
-    "@angular/cdk": "6.0.0-beta.4",
-    "@angular/common": "6.0.0-beta.6",
-    "@angular/compiler": "6.0.0-beta.6",
-    "@angular/core": "6.0.0-beta.6",
-    "@angular/forms": "6.0.0-beta.6",
-    "@angular/http": "6.0.0-beta.6",
-    "@angular/material": "6.0.0-beta.4",
-    "@angular/material-moment-adapter": "6.0.0-beta.4",
-    "@angular/platform-browser": "6.0.0-beta.6",
-    "@angular/platform-browser-dynamic": "6.0.0-beta.6",
-    "@angular/router": "6.0.0-beta.6",
-    "@angular/service-worker": "6.0.0-beta.6",
+    "@angular/animations": "6.0.0-rc.1",
+    "@angular/cdk": "6.0.0-rc.0",
+    "@angular/common": "6.0.0-rc.1",
+    "@angular/compiler": "6.0.0-rc.1",
+    "@angular/core": "6.0.0-rc.1",
+    "@angular/forms": "6.0.0-rc.1",
+    "@angular/http": "6.0.0-rc.1",
+    "@angular/material": "6.0.0-rc.0",
+    "@angular/material-moment-adapter": "6.0.0-rc.0",
+    "@angular/platform-browser": "6.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "6.0.0-rc.1",
+    "@angular/router": "6.0.0-rc.1",
+    "@angular/service-worker": "6.0.0-rc.1",
     "core-js": "^2.4.1",
     "moment": "^2.19.1",
-    "rxjs": "^5.5.0",
+    "rxjs": "6.0.0-rc.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "^1.6.0",
-    "@angular/compiler-cli": "6.0.0-beta.6",
+    "@angular/compiler-cli": "6.0.0-rc.1",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
     "firebase-tools": "^3.15.3",
@@ -57,6 +57,6 @@
     "protractor": "^5.1.1",
     "ts-node": "^2.0.0",
     "tslint": "^4.4.2",
-    "typescript": "~2.4.0"
+    "typescript": "~2.7.2"
   }
 }

src/app/material-docs-app.ts

@@ -1,6 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {Router, NavigationEnd} from '@angular/router';
-import {filter} from 'rxjs/operators/filter';
+import {filter} from 'rxjs/operators';
 
 import {GaService} from './shared/ga/ga';
 

src/app/pages/component-category-list/component-category-list.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {of as observableOf} from 'rxjs/observable/of';
+import {of as observableOf} from 'rxjs';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list';
 

src/app/pages/component-category-list/component-category-list.ts

@@ -5,9 +5,7 @@ import {ActivatedRoute, Params, RouterModule} from '@angular/router';
 import {DocumentationItems, SECTIONS} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
-import {Observable} from 'rxjs/Observable';
-import {combineLatest} from 'rxjs/observable/combineLatest';
-import {Subscription} from 'rxjs/Subscription';
+import {Observable, combineLatest, Subscription} from 'rxjs';
 
 
 @Component({

src/app/pages/component-list/component-list.spec.ts

@@ -1,6 +1,6 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {ActivatedRoute} from '@angular/router';
-import {of as observableOf} from 'rxjs/observable/of';
+import {of as observableOf} from 'rxjs';
 import {ComponentList, ComponentListModule} from './component-list';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 

src/app/pages/component-list/component-list.ts

@@ -8,8 +8,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {CommonModule} from '@angular/common';
 import {MatCardModule} from '@angular/material';
-import {Observable} from 'rxjs/Observable';
-import {combineLatest} from 'rxjs/observable/combineLatest';
+import {combineLatest} from 'rxjs';
 
 @Component({
   selector: 'app-components',

src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -7,6 +7,7 @@
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
   $nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
+  $nav-background-focus-opacity: if($is-dark-theme, 0.25, 0.08);
 
   .docs-component-viewer-nav-content {
     background: rgba(0, 0, 0, $nav-background-opacity);
@@ -15,8 +16,13 @@
       background: rgba(0, 0, 0, .26);
     }
 
-    button {
+    .docs-nav-content-btn {
       color: rgba(mat-color($foreground, text), .5);
+
+      &:focus {
+        // override the default background
+        background: rgba(0, 0, 0, $nav-background-focus-opacity);
+      }
     }
 
     hr {

src/app/pages/component-sidenav/component-nav.html

@@ -2,6 +2,7 @@
   <div class="docs-component-viewer-nav-content">
     <nav *ngFor="let category of docItems.getCategories((params | async)?.section); let last = last;">
       <button (click)="toggleExpand(category.id)"
+              class="docs-nav-content-btn"
               [attr.aria-label]="category.name + ', section toggle'"
               [attr.aria-controls]="'panel-' + category.id"
               [attr.aria-expanded]="getExpanded(category.id)">

src/app/pages/component-sidenav/component-sidenav.scss

@@ -80,7 +80,7 @@ app-component-sidenav {
 
     ul {
       list-style-type: none;
-      margin: -5px 0 5px 0;
+      margin: 0 0 5px 0;
       padding: 0;
       overflow: hidden;
     }

src/app/pages/component-sidenav/component-sidenav.ts

@@ -1,6 +1,5 @@
 import {
-  Component, Input, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule, trigger, state,
-  animate, transition, style, OnDestroy
+  Component, Input, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule, OnDestroy
 } from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {MatSidenav, MatSidenavModule, MatIconModule} from '@angular/material';
@@ -9,12 +8,9 @@ import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {ComponentHeaderModule} from '../component-page-header/component-page-header';
 import {FooterModule} from '../../shared/footer/footer';
-import {Observable} from 'rxjs/Observable';
-import {Subject} from 'rxjs/Subject';
-import {switchMap} from 'rxjs/operators/switchMap';
-import {takeUntil} from 'rxjs/operators/takeUntil';
-import {startWith} from 'rxjs/operators/startWith';
-import {combineLatest} from 'rxjs/observable/combineLatest';
+import {Observable, Subject, combineLatest} from 'rxjs';
+import {switchMap, takeUntil, startWith} from 'rxjs/operators';
+import {trigger, animate, state, style, transition} from '@angular/animations';
 
 const SMALL_WIDTH_BREAKPOINT = 720;
 
@@ -62,8 +58,8 @@ export class ComponentSidenav implements OnInit {
   templateUrl: './component-nav.html',
   animations: [
     trigger('bodyExpansion', [
-      state('collapsed', style({height: '0px', visibility: 'hidden'})),
-      state('expanded', style({height: '*', visibility: 'visible'})),
+      state('collapsed', style({height: '0px', display: 'none'})),
+      state('expanded', style({height: '*', display: 'block'})),
       transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
     ]),
   ],
@@ -105,7 +101,10 @@ export class ComponentNav implements OnInit, OnDestroy {
           break;
         }
       }
-      this.expansions[category.id] = match;
+
+      if (this.expansions[category.id] === false) {
+        this.expansions[category.id] = match;
+      }
     }
   }
 
@@ -121,7 +120,7 @@ export class ComponentNav implements OnInit, OnDestroy {
 
   /** Gets whether expanded or not */
   getExpanded(category: string): boolean {
-    return this.expansions[category];
+    return this.expansions[category] === undefined ? true : this.expansions[category];
   }
 
 }

src/app/pages/component-viewer/component-api.html

@@ -4,7 +4,8 @@
 <doc-viewer
   documentUrl="/assets/documents/api/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
   class="docs-component-view-text-content docs-component-api"
-  (contentLoaded)="toc.updateScrollPosition()"></doc-viewer>
+  (contentLoaded)="onContentLoaded()"></doc-viewer>
 <table-of-contents #toc
+    *ngIf="showToc | async"
     headerSelectors=".docs-api-h3,.docs-api-h4"
     container=".mat-drawer-content"></table-of-contents>

src/app/pages/component-viewer/component-overview.html

@@ -4,6 +4,6 @@
 <doc-viewer
     documentUrl="/assets/documents/overview/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
     class="docs-component-view-text-content docs-component-overview"
-    (contentLoaded)="toc.updateScrollPosition()">
+    (contentLoaded)="onContentLoaded()">
 </doc-viewer>
-<table-of-contents #toc container=".mat-drawer-content"></table-of-contents>
+<table-of-contents #toc container=".mat-drawer-content" *ngIf="showToc | async"></table-of-contents>

src/app/pages/component-viewer/component-viewer.spec.ts

@@ -1,6 +1,6 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {ActivatedRoute} from '@angular/router';
-import {of as observableOf} from 'rxjs/observable/of';
+import {of as observableOf} from 'rxjs';
 import {ComponentViewer, ComponentViewerModule} from './component-viewer';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 

src/app/pages/component-viewer/component-viewer.ts

@@ -1,34 +1,47 @@
 import {CommonModule} from '@angular/common';
-import {Component, ElementRef, NgModule, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  NgModule,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+  OnDestroy
+} from '@angular/core';
 import {MatTabsModule} from '@angular/material';
 import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {DocItem, DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {TableOfContentsModule} from '../../shared/table-of-contents/table-of-contents.module';
 import {ComponentPageTitle} from '../page-title/page-title';
-import {combineLatest} from 'rxjs/observable/combineLatest';
-import {map} from 'rxjs/operators/map';
+import {BreakpointObserver} from '@angular/cdk/layout';
+import {Subject, Subscription, Observable, combineLatest} from 'rxjs';
+import {map, takeUntil} from 'rxjs/operators';
+import {TableOfContents} from '../../shared/table-of-contents/table-of-contents';
 
 @Component({
   selector: 'app-component-viewer',
   templateUrl: './component-viewer.html',
   styleUrls: ['./component-viewer.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class ComponentViewer {
+export class ComponentViewer implements OnDestroy {
   componentDocItem: DocItem;
-
   sections: Set<string> = new Set(['overview', 'api']);
+  private _subscription: Subscription;
+  private _destroyed = new Subject();
 
   constructor(private _route: ActivatedRoute,
               private router: Router,
               public _componentPageTitle: ComponentPageTitle,
-              public docItems: DocumentationItems) {
+              public docItems: DocumentationItems,
+              ) {
     // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
     // parent route for the section (material/cdk).
     combineLatest(_route.params, _route.parent.params).pipe(
         map((p: [Params, Params]) => ({id: p[0]['id'], section: p[1]['section']})),
-        map(p => ({doc: docItems.getItemById(p.id, p.section), section: p.section}))
+        map(p => ({doc: docItems.getItemById(p.id, p.section), section: p.section}),
+        takeUntil(this._destroyed))
         ).subscribe(d => {
           this.componentDocItem = d.doc;
           if (this.componentDocItem) {
@@ -41,6 +54,10 @@ export class ComponentViewer {
           }
         });
   }
+
+  ngOnDestroy(): void {
+    this._destroyed.next();
+  }
 }
 
 @Component({
@@ -50,13 +67,24 @@ export class ComponentViewer {
 })
 export class ComponentOverview implements OnInit {
   @ViewChild('intialFocusTarget') focusTarget: ElementRef;
+  @ViewChild('toc') tableOfContents: TableOfContents;
+  showToc: Observable<boolean>;
 
-  constructor(public componentViewer: ComponentViewer) {}
+  constructor(public componentViewer: ComponentViewer, breakpointObserver: BreakpointObserver) {
+    this.showToc = breakpointObserver.observe('(max-width: 1200px)')
+      .pipe(map(result => !result.matches));
+  }
 
   ngOnInit() {
     // 100ms timeout is used to allow the page to settle before moving focus for screen readers.
     setTimeout(() => this.focusTarget.nativeElement.focus(), 100);
   }
+
+  onContentLoaded() {
+    if (this.tableOfContents) {
+      this.tableOfContents.updateScrollPosition();
+    }
+  }
 }
 
 @Component({

src/app/pages/guide-viewer/guide-viewer.html

@@ -5,9 +5,9 @@ <h1>{{guide.name}}</h1>
 <div class="docs-guide-wrapper">
   <div class="docs-guide-toc-and-content">
     <doc-viewer class="docs-guide-content" 
-    (contentLoaded)="toc.updateScrollPosition()"
+      (contentLoaded)="toc.updateScrollPosition()"
       [documentUrl]="guide.document"></doc-viewer>
-    <table-of-contents #toc></table-of-contents>
+    <table-of-contents #toc container="guide-viewer"></table-of-contents>
   </div>
 </div>
 

src/app/pages/guide-viewer/guide-viewer.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 import {GuideViewer, GuideViewerModule} from './guide-viewer';
 import {DocsAppTestingModule} from '../../testing/testing-module';

src/app/shared/doc-viewer/doc-viewer.ts

@@ -11,7 +11,7 @@ import {
   Output,
 } from '@angular/core';
 import {Http} from '@angular/http';
-import {Subscription} from 'rxjs/Subscription';
+import {Subscription} from 'rxjs';
 import {ExampleViewer} from '../example-viewer/example-viewer';
 import {HeaderLink} from './header-link';
 import {ComponentPortal, DomPortalHost} from '@angular/cdk/portal';

src/app/shared/example-viewer/example-viewer.html

@@ -33,6 +33,6 @@
   </div>
 
   <div class="docs-example-viewer-body">
-    <ng-template [portalHost]="selectedPortal"></ng-template>
+    <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
   </div>
 </div>

src/app/shared/footer/footer.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {materialVersion} from '../version/version'
+import {materialVersion} from '../version/version';
 
 @Component({
   selector: 'app-footer',

src/app/shared/navbar/navbar.ts

@@ -24,7 +24,14 @@ export class NavBar {
 }
 
 @NgModule({
-  imports: [MatButtonModule, MatMenuModule, RouterModule, ThemePickerModule, VersionPickerModule, CommonModule],
+  imports: [
+    MatButtonModule,
+    MatMenuModule,
+    RouterModule,
+    ThemePickerModule,
+    VersionPickerModule,
+    CommonModule
+  ],
   exports: [NavBar],
   declarations: [NavBar],
 })

src/app/shared/table-of-contents/table-of-contents.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 import {TableOfContents} from './table-of-contents';
 import {TableOfContentsModule} from './table-of-contents.module';

src/app/shared/table-of-contents/table-of-contents.ts

@@ -1,10 +1,8 @@
 import {Component, ElementRef, Inject, Input, OnInit} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
-import {Subject} from 'rxjs/Subject';
-import {debounceTime} from 'rxjs/operators/debounceTime';
-import {takeUntil} from 'rxjs/operators/takeUntil';
-import {fromEvent} from 'rxjs/observable/fromEvent';
+import {Subject, fromEvent} from 'rxjs';
+import {debounceTime, takeUntil} from 'rxjs/operators';
 
 
 interface Link {
@@ -79,6 +77,10 @@ export class TableOfContents implements OnInit {
     });
   }
 
+  ngAfterViewInit() {
+    this.updateScrollPosition();
+  }
+
   ngOnDestroy(): void {
     this._destroyed.next();
   }