Material is in, and working- but the rest of everything has now broken. FML

client/dev/app.module.ts

@@ -14,7 +14,9 @@ import { NavbarComponent } from './components/navbar/navbar.component';
 import { TimeChartComponent } from './components/time-chart/time-chart.component';
 import { CalendarChartComponent } from './components/calendar-chart/calendar-chart.component';
 import {OverviewChartComponent } from './components/overview-chart/overview-chart.component';
-import {MaterialModule} from "@angular/material";
+import { MaterialModule } from './material.module';
+// import {MatNativeDateModule, MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
+// import {MatNativeDateModule, MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
 import {SharedModule} from "./shared-helpers.module";
 import {LoaderComponent} from "./components/loader/loader.component";
 import {TeamComponent} from "./pages/team/team.component";
@@ -40,9 +42,9 @@ const rollbarConfig = {
 export class RollbarErrorHandler implements ErrorHandler {
   constructor(private injector: Injector) { }
   handleError(err:any) : void {
-    this.injector.get(Rollbar);
+    // this.injector.get(Rollbar);
-    let rollbar = this.injector.get(Rollbar);
+    // let rollbar = this.injector.get(Rollbar);
-    rollbar.error(err.originalError || err);
+    // rollbar.error(err.originalError || err);
   }
 }
 
@@ -54,6 +56,7 @@ export class RollbarErrorHandler implements ErrorHandler {
     homeRouting,
     BrowserAnimationsModule,
     MaterialModule,
+    // MatNativeDateModule,
     SharedModule,
     Angulartics2Module.forRoot([ Angulartics2GoogleTagManager ])
   ],
@@ -83,7 +86,8 @@ export class RollbarErrorHandler implements ErrorHandler {
       useFactory: () => {
         return new Rollbar(rollbarConfig)
       }
-    }
+    },
+    // {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
   ],
   bootstrap: [
     App

client/dev/components/app-feedback/app-feedback.ts

@@ -3,8 +3,8 @@ import {Component} from "@angular/core";
 
 @Component({
   selector: 'app-feedback',
-  templateUrl: 'components/app-feedback/app-feedback.html',
+  templateUrl: 'app-feedback.html',
-  styleUrls: ['components/app-feedback/app-feedback.css']
+  styleUrls: ['app-feedback.css']
 })
 export class AppFeedbackComponent {
   constructor() {

client/dev/components/app-help/app-help.ts

@@ -3,7 +3,7 @@ import {Component} from "@angular/core";
 
 @Component({
   selector: 'app-help',
-  templateUrl: 'components/app-help/app-help.html',
+  templateUrl: 'app-help.html',
-  styleUrls: ['components/app-help/app-help.css']
+  styleUrls: ['app-help.css']
 })
 export class AppHelpComponent {}

client/dev/components/calendar-chart/calendar-chart.component.ts

@@ -2,8 +2,8 @@ import { Component } from "@angular/core";
 
 @Component({
   selector: "calendar-chart",
-  templateUrl: "components/calendar-chart/calendar-chart.html",
+  templateUrl: "calendar-chart.html",
-  styleUrls: ["components/calendar-chart/calendar-chart.css"]
+  styleUrls: ["calendar-chart.css"]
 })
 
 export class CalendarChartComponent { }

client/dev/components/calendar-chart/calendar-chart.html

@@ -1,18 +1,18 @@
-<md-card class="chart-card">
+<mat-card class="chart-card">
   <div class="pull-right">
-    <button md-button class="mat-icon-button"><md-icon>autorenew</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>autorenew</mat-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>open_in_new</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>open_in_new</mat-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>code</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>code</mat-icon></button>
   </div>
-  <md-card-header>
+  <mat-card-header>
-    <md-card-title><h3>Calendar View</h3></md-card-title>
+    <mat-card-title><h3>Calendar View</h3></mat-card-title>
-    <md-card-subtitle>Team Happiness by Date</md-card-subtitle>
+    <mat-card-subtitle>Team Happiness by Date</mat-card-subtitle>
-  </md-card-header>
+  </mat-card-header>
-  <md-card-content>
+  <mat-card-content>
 
 
 
 
-  </md-card-content>
+  </mat-card-content>
 
-</md-card>
+</mat-card>

client/dev/components/day-breakdown-chart/day-breakdown-chart.html

@@ -1,12 +1,12 @@
-<md-card class="day-breakdown-chart chart-card">
+<mat-card class="day-breakdown-chart chart-card">
-  <md-card-header>
+  <mat-card-header>
-    <md-card-title><h3>Day Details</h3></md-card-title>
+    <mat-card-title><h3>Day Details</h3></mat-card-title>
-    <md-card-subtitle>Breakdown of team results for {{formatedDate}}</md-card-subtitle>
+    <mat-card-subtitle>Breakdown of team results for {{formatedDate}}</mat-card-subtitle>
-  </md-card-header>
+  </mat-card-header>
   <div  id="bar-chart" (window:resize)="onWindowResize($event)">
     <div *ngIf="!showChart" class="no-data-message">
       <h3>{{noDataMessage}}</h3>
       <p>Select a different date to view, by clicking a day on the chart to the left</p>
     </div>
   </div>
-</md-card>
+</mat-card>

client/dev/components/day-breakdown-chart/day-breakdown-chart.ts

@@ -8,8 +8,8 @@ declare const d3, tippy, moment;
 
 @Component({
   selector: 'day-breakdown-chart',
-  templateUrl: 'components/day-breakdown-chart/day-breakdown-chart.html',
+  templateUrl: 'day-breakdown-chart.html',
-  styleUrls: ['components/day-breakdown-chart/day-breakdown-chart.css']
+  styleUrls: ['day-breakdown-chart.css']
 })
 
 export class DayBreakdownChartComponent implements OnInit, OnDestroy {

client/dev/components/grid-chart/grid-chart.component.ts

@@ -7,8 +7,8 @@ declare const d3, tippy;
 
 @Component({
   selector: 'grid-chart',
-  templateUrl: 'components/grid-chart/grid-chart.html',
+  templateUrl: 'grid-chart.html',
-  styleUrls: ['components/grid-chart/grid-chart.css']
+  styleUrls: ['grid-chart.css']
 })
 
 export class GridChartComponent {

client/dev/components/grid-chart/grid-chart.html

@@ -1,12 +1,12 @@
-<md-card class="grid-chart chart-card">
+<mat-card class="grid-chart chart-card">
-  <md-card-header>
+  <mat-card-header>
-    <md-card-title><h3>Average Sentiment Calendar</h3></md-card-title>
+    <mat-card-title><h3>Average Sentiment Calendar</h3></mat-card-title>
-    <md-card-subtitle>Click a day for more stats</md-card-subtitle>
+    <mat-card-subtitle>Click a day for more stats</mat-card-subtitle>
-  </md-card-header>
+  </mat-card-header>
   <div id="grid-chart">
     <div *ngIf="!showChart" class="no-data-message">
       <h3>Not enough data to display results</h3>
       <p>The calendar grid chart will appear here when there is more data in the system</p>
     </div>
   </div>
-</md-card>
+</mat-card>

client/dev/components/loader/loader.component.ts

@@ -1,10 +1,10 @@
 import {Component, Input} from "@angular/core";
-import {MdProgressSpinnerModule} from '@angular/material';
+import {MatProgressSpinnerModule} from '@angular/material';
 
 
 @Component({
   selector: "loader",
-  templateUrl: "components/loader/loader.html"
+  templateUrl: "loader.html"
 })
 
 export class LoaderComponent {

client/dev/components/loader/loader.html

@@ -1,5 +1,5 @@
-<md-progress-spinner
+<mat-progress-spinner
   [color]="color"
   [mode]="mode"
   [value]="value">
-</md-progress-spinner>
+</mat-progress-spinner>

client/dev/components/message-chart/message-chart.html

@@ -1,9 +1,9 @@
-<md-card class="chart-card team-chart message-chart">
+<mat-card class="chart-card team-chart message-chart">
-  <md-card-header>
+  <mat-card-header>
-    <md-card-title><h3>Comments</h3></md-card-title>
+    <mat-card-title><h3>Comments</h3></mat-card-title>
-    <md-card-subtitle>Recent anatomised team cements</md-card-subtitle>
+    <mat-card-subtitle>Recent anatomised team cements</mat-card-subtitle>
-  </md-card-header>
+  </mat-card-header>
-  <md-card-content>
+  <mat-card-content>
     <loader class="loading-spinner" *ngIf="loading"></loader>
 
       <div class="no-data-message" *ngIf="!chartVisible">
@@ -17,9 +17,9 @@
         <span class="small-grey-text">{{comment.date}}</span>
       </div>
 
-  </md-card-content>
+  </mat-card-content>
-  <md-card-actions>
+  <mat-card-actions>
-    <button md-button *ngIf="show < comments.length" (click)="show = show + 5">Show More...</button>
+    <button mat-button *ngIf="show < comments.length" (click)="show = show + 5">Show More...</button>
-  </md-card-actions>
+  </mat-card-actions>
 
-</md-card>
+</mat-card>

client/dev/components/message-chart/message-chart.ts

@@ -7,8 +7,8 @@ declare const  moment, tippy;
 
 @Component({
   selector: "message-chart",
-  templateUrl: "components/message-chart/message-chart.html",
+  templateUrl: "message-chart.html",
-  styleUrls: ["components/message-chart/message-chart.css"]
+  styleUrls: ["message-chart.css"]
 })
 
 export class MessageChartComponent implements OnInit, OnDestroy {

client/dev/components/navbar/navbar.component.ts

@@ -3,15 +3,15 @@ import {Http} from "@angular/http";
 import {Router, ActivatedRoute} from "@angular/router";
 import {TeamService} from "../../services/team.service";
 import {AllTeamsService} from "../../services/all-teams.service";
-import {MdDialog, MdSnackBar} from "@angular/material";
+import {MatDialog, MatSnackBar} from "@angular/material";
 import {AppFeedbackComponent} from "../app-feedback/app-feedback";
 import {AppHelpComponent} from "../app-help/app-help";
 import { Angulartics2 } from 'angulartics2';
 
 @Component({
   selector: "navbar",
-  templateUrl: "components/navbar/navbar.html",
+  templateUrl: "navbar.html",
-  styleUrls: ["components/navbar/navbar.css"],
+  styleUrls: ["navbar.css"],
   providers: [AppFeedbackComponent]
 })
 
@@ -25,11 +25,11 @@ export class NavbarComponent {
   constructor(
     private http: Http,
     private route: ActivatedRoute,
-    private dialog: MdDialog,
+    // private dialog: MatDialog,
     router: Router,
     private teamService: TeamService,
     private allTeamsService: AllTeamsService,
-    public snackBar: MdSnackBar,
+    // public snackBar: MatSnackBar,
     private angulartics2: Angulartics2
   ) {
     this.router = router;
@@ -54,15 +54,15 @@ export class NavbarComponent {
     this.angulartics2.eventTrack.next({ action: action, properties: properties});
   }
 
-  openFeedbackDialog(){
+  // openFeedbackDialog(){
-    this.dialog.open(AppFeedbackComponent);
+  //   this.dialog.open(AppFeedbackComponent);
-    this.trackNavigationAnalyticEvents('FeedbackDialogOpened');
+  //   this.trackNavigationAnalyticEvents('FeedbackDialogOpened');
-  }
+  // }
 
-  openHelpDialog(){
+  // openHelpDialog(){
-    this.dialog.open(AppHelpComponent);
+  //   this.dialog.open(AppHelpComponent);
-    this.trackNavigationAnalyticEvents('HelpDialogOpened');
+  //   this.trackNavigationAnalyticEvents('HelpDialogOpened');
-  }
+  // }
 
   navigateToTeam(teamName) {
     this.router.navigate([`./${teamName}`]);
@@ -76,10 +76,10 @@ export class NavbarComponent {
     this.trackNavigationAnalyticEvents('NavigatedBackToHome');
   }
 
-  showFeatureUnavailableToast() {
+  // showFeatureUnavailableToast() {
-    this.snackBar.open('Feature still under development, or not available on demo', 'Got it');
+  //   this.snackBar.open('Feature still under development, or not available on demo', 'Got it');
-    this.trackNavigationAnalyticEvents('TriedToAccessAlphaComponent');
+  //   this.trackNavigationAnalyticEvents('TriedToAccessAlphaComponent');
-  }
+  // }
 
 }
 

client/dev/components/navbar/navbar.html

@@ -8,8 +8,8 @@
   </div>
 
   <div class="col-xs-12 col-md-8 team-tabs dont-print">
-    <nav md-tab-nav-bar select="[teamTabs]">
+    <nav mat-tab-nav-bar select="[teamTabs]">
-      <a md-tab-link
+      <a mat-tab-link
          *ngFor="let team of teams"
          routerLinkActive = "routerLinkActive"
          [attr.active]="(teamName == team)? 'true': null"
@@ -23,60 +23,60 @@
   </div>
 
   <div class="col-xs-3 col-sm-6 col-md-1 team-drop-down dont-print">
-    <button md-icon-button [mdMenuTriggerFor]="menu">
+    <button mat-icon-button [matMenuTriggerFor]="menu">
-      <span class="show-only-on-mobile site-navigation-text">Site Navigation</span><md-icon>more_vert</md-icon>
+      <span class="show-only-on-mobile site-navigation-text">Site Navigation</span><mat-icon>more_vert</mat-icon>
     </button>
-    <md-menu #menu="mdMenu">
+    <mat-menu #menu="matMenu">
       <div class="show-only-on-mobile">
-        <button disabled md-menu-item class="highlighted-button">
+        <button disabled mat-menu-item class="highlighted-button">
-          <md-icon>people</md-icon>
+          <mat-icon>people</mat-icon>
           <span>Teams</span>
         </button>
         <button
           class="team-dropdown-button"
-          md-menu-item
+          mat-menu-item
           *ngFor="let team of teams"
           routerLinkActive = "routerLinkActive"
           [class.highlighted-button]="teamName == team"
           (click)="navigateToTeam(team)">
-          <md-icon>label_outline</md-icon>
+          <mat-icon>label_outline</mat-icon>
           <span>{{team}}</span>
         </button>
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
       </div>
-      <button md-menu-item (click)="navigateToHome()">
+      <button mat-menu-item (click)="navigateToHome()">
-        <md-icon>home</md-icon>
+        <mat-icon>home</mat-icon>
         <span>Home</span>
       </button>
-      <button md-menu-item (click)="showFeatureUnavailableToast()">
+      <button mat-menu-item (click)="showFeatureUnavailableToast()">
-        <md-icon>send</md-icon>
+        <mat-icon>send</mat-icon>
         <span>Submit Response</span>
       </button>
-      <a md-menu-item href="/api/team-sentiment/" download= "all-team-sentiment-data.json" class="link-button">
+      <a mat-menu-item href="/api/team-sentiment/" download= "all-team-sentiment-data.json" class="link-button">
-        <md-icon>file_download</md-icon>
+        <mat-icon>file_download</mat-icon>
         <span>Download Data</span>
       </a>
-      <button md-menu-item onClick="window.print()">
+      <button mat-menu-item onClick="window.print()">
-        <md-icon>print</md-icon>
+        <mat-icon>print</mat-icon>
         <span>Print Results</span>
       </button>
-      <button md-menu-item (click)="showFeatureUnavailableToast()">
+      <button mat-menu-item (click)="showFeatureUnavailableToast()">
-        <md-icon>picture_as_pdf</md-icon>
+        <mat-icon>picture_as_pdf</mat-icon>
         <span>PDF Report</span>
       </button>
-      <button md-menu-item (click)="showFeatureUnavailableToast()">
+      <button mat-menu-item (click)="showFeatureUnavailableToast()">
-        <md-icon>security</md-icon>
+        <mat-icon>security</mat-icon>
         <span>Admin Panel</span>
       </button>
-      <button md-menu-item (click)="openFeedbackDialog()">
+      <button mat-menu-item (click)="openFeedbackDialog()">
-        <md-icon>feedback</md-icon>
+        <mat-icon>feedback</mat-icon>
         <span>App Feedback</span>
       </button>
-      <button md-menu-item (click)="openHelpDialog()">
+      <button mat-menu-item (click)="openHelpDialog()">
-        <md-icon>help</md-icon>
+        <mat-icon>help</mat-icon>
         <span>About/ Help</span>
       </button>
-    </md-menu>
+    </mat-menu>
   </div>
 </header>
 

client/dev/components/overview-chart/overview-chart.component.ts

@@ -9,8 +9,8 @@ declare const d3, tippy;
 
 @Component({
   selector: "overview-chart",
-  templateUrl: "components/overview-chart/overview-chart.html",
+  templateUrl: "overview-chart.html",
-  styleUrls: ["components/overview-chart/overview-chart.css"]
+  styleUrls: ["overview-chart.css"]
 })
 export class OverviewChartComponent implements OnInit {
 

client/dev/components/overview-chart/overview-chart.html

@@ -1,16 +1,16 @@
-<md-card class="chart-card team-chart">
+<mat-card class="chart-card team-chart">
   <div class="pull-right">
-    <button md-button class="mat-icon-button" (click)="updateChart()"><md-icon>autorenew</md-icon></button>
+    <button mat-button class="mat-icon-button" (click)="updateChart()"><mat-icon>autorenew</mat-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>open_in_new</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>open_in_new</mat-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>code</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>code</mat-icon></button>
   </div>
 
-  <md-card-header>
+  <mat-card-header>
-    <md-card-title><h3>Overview Amounts</h3></md-card-title>
+    <mat-card-title><h3>Overview Amounts</h3></mat-card-title>
-    <md-card-subtitle>Team Happiness Ratio</md-card-subtitle>
+    <mat-card-subtitle>Team Happiness Ratio</mat-card-subtitle>
-  </md-card-header>
+  </mat-card-header>
 
-  <md-card-content>
+  <mat-card-content>
     <loader *ngIf="loading" class="loading-spinner"></loader>
 
     <div  id="overview-chart" (window:resize)="onWindowResize($event)">
@@ -19,14 +19,14 @@
         <p>The pie chart will appear here when there is more data in the system</p>
       </div>
     </div>
-  </md-card-content>
+  </mat-card-content>
 
-  <md-card-actions>
+  <mat-card-actions>
-    <md-select placeholder="Change Date Range" class="pull-right">
+    <mat-select placeholder="Change Date Range" class="pull-right">
-      <md-option (click)="showByToday()">Today</md-option>
+      <mat-option (click)="showByToday()">Today</mat-option>
-      <md-option (click)="showByWeek()">Last week</md-option>
+      <mat-option (click)="showByWeek()">Last week</mat-option>
-      <md-option (click)="showByMonth()">Last month</md-option>
+      <mat-option (click)="showByMonth()">Last month</mat-option>
-    </md-select>
+    </mat-select>
-  </md-card-actions>
+  </mat-card-actions>
 
-</md-card>
+</mat-card>

client/dev/components/splash-screen/splash-screen.html

@@ -11,7 +11,7 @@
   <div *ngIf="showErrorMessage" class="no-data-message error-occurred">
     <h3 class="error-title">An Error may have Occurred Rendering the App</h3>
     <p class="error-subtext">This has been logged, and will be looked into</p>
-    <button md-raised-button color="accent" (click)="hideSplash()">Proceed Anyway</button>
+    <button mat-raised-button color="accent" (click)="hideSplash()">Proceed Anyway</button>
   </div>
 
 </div>

client/dev/components/splash-screen/splash-screen.ts

@@ -3,8 +3,8 @@ import { trigger, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: "splash-screen",
-  templateUrl: "components/splash-screen/splash-screen.html",
+  templateUrl: "splash-screen.html",
-  styleUrls: ["components/splash-screen/splash-screen.css"],
+  styleUrls: ["splash-screen.css"],
   animations: [
     trigger('fadeInOut', [
       transition(':enter', [   // :enter is alias to 'void => *'

client/dev/components/time-chart/time-chart.component.ts

@@ -7,8 +7,8 @@ declare const d3, moment, tippy;
 
 @Component({
   selector: "time-chart",
-  templateUrl: "components/time-chart/time-chart.html",
+  templateUrl: "time-chart.html",
-  styleUrls: ["components/time-chart/time-chart.css"]
+  styleUrls: ["time-chart.css"]
 })
 
 export class TimeChartComponent implements OnInit, OnDestroy {

client/dev/components/time-chart/time-chart.html

@@ -1,14 +1,14 @@
-<md-card class="chart-card team-chart">
+<mat-card class="chart-card team-chart">
   <div class="pull-right">
-    <button md-button class="mat-icon-button" (click)="updateChart()"><md-icon>autorenew</md-icon></button>
+    <button mat-button class="mat-icon-button" (click)="updateChart()"><mat-icon>autorenew</mat-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>open_in_new</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>open_in_new</mat-icon></button>
-    <button md-button class="mat-icon-button"><md-icon>code</md-icon></button>
+    <button mat-button class="mat-icon-button"><mat-icon>code</mat-icon></button>
   </div>
-  <md-card-header>
+  <mat-card-header>
-    <md-card-title><h3>Time Chart</h3></md-card-title>
+    <mat-card-title><h3>Time Chart</h3></mat-card-title>
-    <md-card-subtitle>Team Happiness over Time</md-card-subtitle>
+    <mat-card-subtitle>Team Happiness over Time</mat-card-subtitle>
-  </md-card-header>
+  </mat-card-header>
-  <md-card-content>
+  <mat-card-content>
     <loader *ngIf="loading" class="loading-spinner"></loader>
     <div id="time-chart" (window:resize)="onWindowResize($event)">
       <div *ngIf="!chartVisible && !loading" class="no-data-message">
@@ -16,12 +16,12 @@
         <p>The line chart will appear here when there is more data in the system</p>
       </div>
     </div>
-  </md-card-content>
+  </mat-card-content>
-  <md-card-actions>
+  <mat-card-actions>
-    <md-radio-group class="pull-right" [(ngModel)]="typeOfChart">
+    <mat-radio-group class="pull-right" [(ngModel)]="typeOfChart">
-      <md-radio-button value="breakdown" (click)="changeChartType('breakdown')">Breakdown</md-radio-button>
+      <mat-radio-button value="breakdown" (click)="changeChartType('breakdown')">Breakdown</mat-radio-button>
-      <md-radio-button value="aggregate" (click)="changeChartType('aggregate')">Aggregate</md-radio-button>
+      <mat-radio-button value="aggregate" (click)="changeChartType('aggregate')">Aggregate</mat-radio-button>
-    </md-radio-group>
+    </mat-radio-group>
-  </md-card-actions>
+  </mat-card-actions>
 
-</md-card>
+</mat-card>

client/dev/config.js

@@ -10,6 +10,7 @@ System.config({
     app: 'app',
 
     // angular bundles
+
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
@@ -18,11 +19,25 @@ System.config({
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
     '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
     '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
     '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
 
+    '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
+    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
+    '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
+    '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
+    '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
+    '@angular/cdk/observe-content': 'npm:@angular/cdk/bundles/cdk-observe-content.umd.js',
+    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
+    '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
+    '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
+    '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
+    '@angular/cdk/testing': 'npm:@angular/cdk/bundles/cdk-testing.umd.js',
+
+    '@angular/material': 'npm:@angular/material',
+    '@angular/material/button': 'npm:@angular/material/bundles/material-button.umd.js',
+
     // Client side analytics and error tracking
     'angulartics2': 'npm:angulartics2/dist/core.umd.js',
     'rollbar': 'npm:rollbar/dist/rollbar.noconflict.umd.js',

client/dev/material.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import {
+  MatButtonModule,
+} from '@angular/material/button';
+
+@NgModule({
+  imports: [
+    // MatButton,
+    // MatMenuModule,
+    // MatToolbarModule,
+    // MatIconModule,
+    // MatCardModule
+  ],
+  exports: [
+    MatButtonModule
+    // MatButton,
+    // MatMenuModule,
+    // MatToolbarModule,
+    // MatIconModule,
+    // MatCardModule
+  ]
+})
+export class MaterialModule {}

client/dev/pages/home/home.html

@@ -10,29 +10,29 @@
 
       <div class="col col-xs-12 col-sm-4 col-md-3">
 
-        <md-card class="home-page-team-list chart-card">
+        <mat-card class="home-page-team-list chart-card">
-          <md-card-header>
+          <mat-card-header>
-            <md-card-title><h3>Teams</h3></md-card-title>
+            <mat-card-title><h3>Teams</h3></mat-card-title>
-            <md-card-subtitle>Average mood of each team</md-card-subtitle>
+            <mat-card-subtitle>Average mood of each team</mat-card-subtitle>
-          </md-card-header>
+          </mat-card-header>
 
-          <md-list>
+          <mat-list>
             <div class="team-home-link" *ngFor="let team of homepageChartData" >
-              <md-list-item [title]="team.breakdown" class="has-tooltip" (mouseenter)="applyTooltip()">
+              <mat-list-item [title]="team.breakdown" class="has-tooltip" (mouseenter)="applyTooltip()">
                 <span class="average-sentiment" [style.color]="team.color">{{team.average}}%</span>
-                <h4 md-line class="team-name">{{team.teamName}}</h4>
+                <h4 matLine class="team-name">{{team.teamName}}</h4>
-                <span md-line class="response-rate">80% Response Rate</span>
+                <span matLine class="response-rate">80% Response Rate</span>
-              </md-list-item>
+              </mat-list-item>
-              <md-divider></md-divider>
+              <mat-divider></mat-divider>
             </div>
-          </md-list>
+          </mat-list>
 
           <div class="no-data-message" *ngIf="homepageChartData.length < 1">
             <h3>No Teams Found</h3>
             <p>No teams have been configured yet, or there was an error fetching them</p>
           </div>
 
-        </md-card>
+        </mat-card>
 
       </div>
 

client/dev/pages/team/team.component.ts

@@ -2,8 +2,8 @@ import {Component } from "@angular/core";
 
 @Component({
   selector: "team-page",
-  templateUrl: "pages/team/team.html",
+  templateUrl: "team.html",
-  styleUrls: ["pages/team/team.css"]
+  styleUrls: ["team.css"]
 })
 export class TeamComponent {
 

client/dev/styles/shared-styles.scss

@@ -3,6 +3,8 @@ This file contains reusable styles for common elements
 that are performed throughout the application.
  */
 
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
 @import "constants.scss"; // All hardcoded reused values, must be defined as a constant
 
 /* Common properties */

client/dev/todo/todo-cmp.ts

@@ -20,8 +20,8 @@ type Todo = {
 
 @Component({
   selector: "todo-cmp",
-  templateUrl: "todo/todo.html",
+  templateUrl: "todo.html",
-  styleUrls: ["todo/todo.css"]
+  styleUrls: ["todo.css"]
 })
 export class TodoCmp implements OnInit {
   title: string = "ng2do";

package-lock.json

@@ -0,0 +1,29 @@
+{
+  "name": "happy-team",
+  "version": "0.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@angular/cdk": {
+      "version": "2.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz",
+      "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
+    "@angular/material": {
+      "version": "2.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz",
+      "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
+    "tslib": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.0.tgz",
+      "integrity": "sha512-ymKWWZJST0/CkgduC2qkzjMOWr4bouhuURNXCn/inEX0L57BnRG6FhX76o7FOnsjHazCjfU2LKeSrlS2sIKQJg=="
+    }
+  }
+}

package.json

@@ -16,50 +16,52 @@
     "ngc": "node_modules/.bin/ngc -p tsconfig-aot.json"
   },
   "dependencies": {
-    "@angular/animations": "^4.1.1",
+    "@angular/animations": "^4.4.3",
-    "@angular/common": "^4.1.1",
+    "@angular/cdk": "^2.0.0-beta.12",
-    "@angular/compiler": "^4.1.1",
+    "@angular/common": "^4.4.3",
-    "@angular/compiler-cli": "^4.4.5",
+    "@angular/compiler": "^4.4.3",
-    "@angular/core": "^4.1.1",
+    "@angular/core": "^4.4.3",
-    "@angular/forms": "^4.1.1",
+    "@angular/forms": "^4.4.3",
-    "@angular/http": "^4.1.1",
+    "@angular/http": "^4.4.3",
-    "@angular/material": "^2.0.0-beta.3",
+    "@angular/material": "^2.0.0-beta.12",
-    "@angular/platform-browser": "^4.1.1",
+    "@angular/platform-browser": "^4.4.3",
-    "@angular/platform-browser-dynamic": "^4.1.1",
+    "@angular/platform-browser-dynamic": "^4.4.3",
-    "@angular/platform-server": "^4.4.5",
+    "@angular/platform-server": "^4.4.6",
-    "@angular/router": "^4.0.0",
+    "@angular/router": "^4.4.3",
-    "angulartics2": "^2.4.0",
+    "@angular/service-worker": "^1.0.0-beta.16",
-    "babel-preset-es2015": "^6.1.18",
+    "angulartics2": "^2.5.0",
-    "babel-preset-es2016": "^6.0.11",
+    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-0": "^6.1.18",
+    "babel-preset-es2016": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "babel-regenerator-runtime": "^6.5.0",
-    "babel-register": "^6.7.2",
+    "babel-register": "^6.26.0",
-    "bluebird": "^3.3.4",
+    "bluebird": "^3.5.1",
-    "body-parser": "^1.5.0",
+    "body-parser": "^1.18.2",
-    "compression": "^1.6.2",
+    "compression": "^1.7.1",
     "dotenv": "^4.0.0",
-    "express": "~4.14.0",
+    "express": "^4.14.1",
-    "express-content-length-validator": "1.0.0",
+    "express-content-length-validator": "^1.0.0",
     "hammerjs": "^2.0.8",
-    "helmet": "^2.1.1",
+    "helmet": "^2.3.0",
-    "lodash": "^4.6.1",
+    "lodash": "^4.17.4",
-    "mongoose": "^4.4.7",
+    "mongoose": "^4.12.4",
-    "morgan": "^1.5.2",
+    "morgan": "^1.9.0",
-    "newrelic": "^1.18.2",
+    "newrelic": "^1.40.0",
-    "nodemon": "^1.9.2",
+    "nodemon": "^1.12.1",
-    "reflect-metadata": "^0.1.3",
+    "reflect-metadata": "^0.1.10",
-    "rollbar": "^2.2.9",
+    "rollbar": "^2.2.10",
-    "rxjs": "^5.0.0-beta.12",
+    "rxjs": "^5.5.0",
-    "systemjs": "^0.19.24",
+    "systemjs": "^0.19.47",
-    "typescript": "2.3",
+    "typescript": "^2.3.4",
     "zone.js": "^0.7.8"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "^4.4.3",
     "aliv": "^1.6.0",
     "babili": "0.0.6",
     "browser-sync": "^2.5.2",
     "chai": "^3.5.0",
-    "concurrently": "^2.0.0",
+    "concurrently": "^2.2.0",
     "coveralls": "^2.11.2",
     "del": "^2.2.1",
     "gulp": "^3.9.0",
@@ -76,7 +78,7 @@
     "gulp-uglify": "^1.1.0",
     "gulp-util": "^3.0.3",
     "istanbul": "^0.4.4",
-    "jasmine-core": "^2.2.0",
+    "jasmine-core": "^2.8.0",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.1.1",

tests/client/todo/components/todo-cmp_test.js

@@ -15,7 +15,7 @@ var testing_1 = require("@angular/core/testing");
 var Observable_1 = require("rxjs/Observable");
 var todo_cmp_1 = require("../../../../client/dev/todo/todo-cmp");
 var todo_service_1 = require("../../../../client/dev/todo/todo-service");
-var MockTodoService = (function (_super) {
+var MockTodoService = /** @class */ (function (_super) {
     __extends(MockTodoService, _super);
     function MockTodoService() {
         return _super !== null && _super.apply(this, arguments) || this;