feat(upgrade-deps): material.11-2 and [email protected] (#184)

feat(upgrade-deps): material.11-3 and [email protected]

karma.conf.js

@@ -8,6 +8,7 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
       require('karma-remap-istanbul'),
       require('angular-cli/plugins/karma')
     ],
@@ -39,11 +40,11 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['Firefox'],
     singleRun: false
   };
   if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
+    //configuration.browsers = ['Chrome_travis_ci'];
   }
   config.set(configuration);
 };

package.json

@@ -49,26 +49,26 @@
     "Jeremy Smartt <[email protected]>"
   ],
   "dependencies": {
-    "@angular/common": "^2.2.1",
-    "@angular/compiler": "^2.2.1",
-    "@angular/core": "^2.2.1",
-    "@angular/forms": "^2.2.1",
-    "@angular/http": "^2.2.1",
-    "@angular/material": "2.0.0-alpha.10",
-    "@angular/platform-browser": "^2.2.1",
-    "@angular/platform-browser-dynamic": "^2.2.1",
-    "@angular/platform-server": "^2.2.1",
-    "@angular/router": "^3.2.1",
+    "@angular/common": "^2.3.0",
+    "@angular/compiler": "^2.3.0",
+    "@angular/core": "^2.3.0",
+    "@angular/forms": "^2.3.0",
+    "@angular/http": "^2.3.0",
+    "@angular/material": "2.0.0-alpha.11-3",
+    "@angular/platform-browser": "^2.3.0",
+    "@angular/platform-browser-dynamic": "^2.3.0",
+    "@angular/platform-server": "^2.3.0",
+    "@angular/router": "^3.3.0",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.6.0",
-    "rxjs": "5.0.0-beta.12",
+    "rxjs": "5.0.0-rc.4",
     "showdown": "1.4.2",
-    "zone.js": "^0.6.25",
+    "zone.js": "^0.7.2",
     "d3": "^4.2.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.2.1",
+    "@angular/compiler-cli": "^2.3.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "^2.2.31",
     "@types/node": "^6.0.34",
@@ -107,6 +107,6 @@
     "semver": "5.2.0",
     "ts-node": "1.2.1",
     "tslint": "^3.15.1",
-    "typescript": "2.0.2"
+    "typescript": "2.0.10"
   }
 }

src/app/app.component.scss

@@ -3,8 +3,4 @@
 // :host /deep/ lets you travel down the Shadow DOM tree to change web component styles
 :host /deep/ {
 
-    // md-divider has a bug in angular-material that doesn't apply color
-    md-divider {
-        border-top-color: rgba(black, 0.12);
-    }
 }

src/app/components/components/data-table/data-table.component.html

@@ -6,7 +6,7 @@
     <h3 class="md-title">Custom Data Table</h3>
     <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
     <md-divider></md-divider>
-    <md-tab-group>
+    <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>Demo</template>
           <div class="md-table-container">
@@ -61,7 +61,6 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
         <td-highlight lang="typescript">
           <![CDATA[
             import { ITdDataTableColumn } from '@covalent/data-table';
-            import { ViewContainerRef } from '@angular/core';
             import { TdDialogService } from '@covalent/core';
             ...
             })
@@ -76,14 +75,12 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
                 { name: 'price', label 'Price (US$)', numeric: true, format: v => v.toFixed(2) },
               ];
 
-              constructor(private _dialogService: TdDialogService,
-                          private _viewContainerRef: ViewContainerRef) {}
+              constructor(private _dialogService: TdDialogService) {}
 
               openPrompt(row: any, name: string): void {
                 this._dialogService.openPrompt({
                   message: 'Enter comment?',
                   value: row[name],
-                  viewContainerRef: this._viewContainerRef,
                 }).afterClosed().subscribe((value: any) => {
                   if (value !== undefined) {
                     row[name] = value;
@@ -101,7 +98,7 @@ <h4 class="md-subhead">with custom headings, columns, and inline editing</h4>
   <md-card-content>
     <h3 class="md-title">Basic Data Table</h3>
     <md-divider></md-divider>
-    <md-tab-group>
+    <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>Demo</template>
         <td-data-table
@@ -200,7 +197,7 @@ <h3 class="md-title">Basic Data Table</h3>
     <h3 class="md-title">Data Table with components</h3>
     <h4 class="md-subhead">Paging Bar / Search Box / Sortable components</h4>
     <md-divider></md-divider>
-    <md-tab-group>
+    <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>Demo</template>
         <div layout="row" layout-align="start center" class="pad-left-sm pad-right-sm" [class.md-selected-title]="selectedRows.length && selectable">

src/app/components/components/data-table/data-table.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewContainerRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { TdDataTableSortingOrder, TdDataTableService,
          ITdDataTableSortChangeEvent, ITdDataTableColumn } from '../../../../platform/data-table';
@@ -256,14 +256,12 @@ export class DataTableDemoComponent implements OnInit {
   sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
 
   constructor(private _dataTableService: TdDataTableService,
-              private _dialogService: TdDialogService,
-              private _viewContainerRef: ViewContainerRef) {}
+              private _dialogService: TdDialogService) {}
 
   openPrompt(row: any, name: string): void {
     this._dialogService.openPrompt({
       message: 'Enter comment?',
       value: row[name],
-      viewContainerRef: this._viewContainerRef,
     }).afterClosed().subscribe((value: any) => {
       if (value !== undefined) {
         row[name] = value;

src/app/components/components/material-components/material-components.component.html

@@ -852,7 +852,7 @@ <h3>Dynamic Radios</h3>
   <md-card-title>Tabs</md-card-title>
   <md-divider></md-divider>
   <md-card-content>
-    <md-tab-group>
+    <md-tab-group md-stretch-tabs>
       <md-tab>
         <template md-tab-label>One</template>
         <h3 class="md-title">First tab content</h3>
@@ -867,7 +867,7 @@ <h3 class="md-title">Second tab content</h3>
     <md-divider></md-divider>
     <td-highlight lang="html">
       <![CDATA[
-        <md-tab-group>
+        <md-tab-group md-stretch-tabs>
           <md-tab>
             <template md-tab-label>First tab content</template>
             <h1>First content</h1>
@@ -982,7 +982,7 @@ <h3>Usage within Forms</h3>
 </md-card>
 <md-card>
   <md-card-title>Grid list with images and headers or footers</md-card-title>
-  <md-tab-group>
+  <md-tab-group md-stretch-tabs>
     <md-tab>
       <template md-tab-label>Headers</template>
       <md-grid-list cols="3" rowHeight="200px">
@@ -1213,21 +1213,15 @@ <h3 md-line>{ { dog.name } }</h3>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="typescript">
       <![CDATA[
-        import { Component, ViewContainerRef } from '@angular/core';
-        import { MdSnackBar, MdSnackBarConfig, MdSnackBarRef } from '@angular/material';
+        import { Component } from '@angular/core';
+        import { MdSnackBar } from '@angular/material';
         ...
-        ...
-        private _snackBarConfig: MdSnackBarConfig;
-
-        constructor(private _snackBarService: MdSnackBar, viewContainerRef: ViewContainerRef) {
-          this._snackBarConfig = new MdSnackBarConfig(viewContainerRef);
+        ...        
+        constructor(private _snackBarService: MdSnackBar) {
         }
 
         showSnackBar(): void {
-          let snackBarRef: MdSnackBarRef<any> = this._snackBarService.open('Message', 'Action', this._snackBarConfig);
-          setTimeout(() => {
-            snackBarRef.dismiss();
-          }, 3000);
+          let snackBarRef: MdSnackBarRef<any> = this._snackBarService.open('Message', 'Action', { duration: 3000 });
         }
         ]]>
       </td-highlight>
@@ -1242,27 +1236,21 @@ <h3 md-line>{ { dog.name } }</h3>
     <md-divider class="push-top push-bottom"></md-divider>
     <td-highlight lang="typescript">
       <![CDATA[
-          import { Component, ViewContainerRef } from '@angular/core';
-          import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';
+          import { Component } from '@angular/core';
+          import { MdDialog, MdDialogRef } from '@angular/material';
           import { CustomAlertDialogComponent, CustomConfirmDialogComponent } from 'path/to/customdialogs'
           ...
-          ...
-          private _dialogConfig: MdDialogConfig;
-
-          constructor(private _dialogService: MdDialog,
-                      viewContainerRef: ViewContainerRef) {
-            this._dialogConfig = new MdDialogConfig();
-            this._dialogConfig.viewContainerRef = viewContainerRef;
+          constructor(private _dialogService: MdDialog) {
           }
 
           showAlertDialog(): void {
             let dialogRef: MdDialogRef<CustomAlertDialogComponent> =
-            this._dialogService.open(CustomAlertDialogComponent, this._dialogConfig);
+            this._dialogService.open(CustomAlertDialogComponent);
           }
 
           showConfirmDialog(): void {
             let dialogRef: MdDialogRef<CustomConfirmDialogComponent> =
-            this._dialogService.open(CustomConfirmDialogComponent, this._dialogConfig);
+            this._dialogService.open(CustomConfirmDialogComponent);
             dialogRef.afterClosed().subscribe((data: boolean) => {
               if (data) {
                 // clicked yes

src/app/components/components/material-components/material-components.component.ts

@@ -1,6 +1,5 @@
-import { Component, ViewContainerRef } from '@angular/core';
-import { MdSnackBar, MdSnackBarConfig, MdDialog, MdSnackBarRef,
-        MdDialogConfig, MdDialogRef } from '@angular/material';
+import { Component } from '@angular/core';
+import { MdSnackBar, MdDialog, MdDialogRef } from '@angular/material';
 
 import { TdAlertDialogComponent } from '../../../../platform/core';
 import { TdConfirmDialogComponent } from '../../../../platform/core';
@@ -106,47 +105,32 @@ export class MaterialComponentsComponent {
     lockHouse: false,
   };
 
-  _snackBarConfig: MdSnackBarConfig;
-  _dialogConfig: MdDialogConfig;
-
   constructor(private _snackBarService: MdSnackBar,
-              private _dialogService: MdDialog,
-              viewContainerRef: ViewContainerRef) {
-    this._snackBarConfig = new MdSnackBarConfig();
-    this._snackBarConfig.viewContainerRef = viewContainerRef;
-    this._dialogConfig = new MdDialogConfig();
-    this._dialogConfig.viewContainerRef = viewContainerRef;
+              private _dialogService: MdDialog) {
   }
 
   showSnackBar(): void {
-    let snackBarRef: MdSnackBarRef<any> = this._snackBarService.open('Message', 'Action', this._snackBarConfig);
-    setTimeout(() => {
-      snackBarRef.dismiss();
-    }, 3000);
+    this._snackBarService.open('Message', 'Action', { duration: 3000 });
   }
 
   showAlertDialog(): void {
     let dialogRef: MdDialogRef<TdAlertDialogComponent> =
-    this._dialogService.open(TdAlertDialogComponent, this._dialogConfig);
+    this._dialogService.open(TdAlertDialogComponent);
     dialogRef.componentInstance.title = 'Alert Title';
     dialogRef.componentInstance.message = 'This is an alert dialog with a custom message.';
   }
 
   showConfirmDialog(): void {
     let dialogRef: MdDialogRef<TdConfirmDialogComponent> =
-    this._dialogService.open(TdConfirmDialogComponent, this._dialogConfig);
+    this._dialogService.open(TdConfirmDialogComponent);
     dialogRef.componentInstance.title = 'Confirmation Title';
     dialogRef.componentInstance.message = 'This is a confirmation dialog. Like what you see in covalent?';
     dialogRef.afterClosed().subscribe((data: any) => {
-      let snackBarRef: MdSnackBarRef<any>;
       if (data) {
-        snackBarRef = this._snackBarService.open('You clicked Yes :D', 'Ok', this._snackBarConfig);
+        this._snackBarService.open('You clicked Yes :D', 'Ok', { duration: 3000 });
       } else {
-        snackBarRef = this._snackBarService.open('You clicked No :(', 'Ok', this._snackBarConfig);
+        this._snackBarService.open('You clicked No :(', 'Ok', { duration: 3000 });
       }
-      setTimeout(() => {
-        snackBarRef.dismiss();
-      }, 3000);
     });
   }
 }

src/app/components/style-guide/colors/colors.component.html

@@ -209,7 +209,7 @@ <h3 class="md-title tc-blue-grey-700">View title</h3>
 <md-card>
   <md-card-title>CSS Background Colors</md-card-title>
   <md-divider></md-divider>
-  <md-tab-group>
+  <md-tab-group md-stretch-tabs>
     <md-tab label="Default Colors">
       <md-card-content>
         <p>To manually color a background, use our simple bgc utility class:</p>

src/app/components/style-guide/dialogs/dialogs.component.html

@@ -44,21 +44,18 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
       <![CDATA[
       import { TdDialogService } from '@covalent/core';
       ...
-      constructor(private _dialogService: TdDialogService,
-                  private _viewContainerRef: ViewContainerRef) {
+      constructor(private _dialogService: TdDialogService) {
       }
       openAlert(): void {
         this._dialogService.openAlert({
           message: 'You don\'t have the required permissions to view this item! Contact an administrator!',
-          viewContainerRef: this._viewContainerRef,
           title: '401 Permissions Error!',
           closeButton: 'Dismiss',
         });
       }
       openConfirm(): void {
         this._dialogService.openConfirm({
           message: 'Are you sure you want to delete this item? It\'s used on other items.',
-          viewContainerRef: this._viewContainerRef,
           title: 'Confirm',
           cancelButton: 'No, Cancel',
           acceptButton: 'Yes, Delete',
@@ -93,20 +90,13 @@ <h4><span class="tc-orange-800 md-title">Important:</span> we recommend using fu
     <p>Typescript:</p>
     <td-highlight lang="typescript">
       <![CDATA[
-      import { MdSnackBar, MdSnackBarConfig, MdSnackBarRef } from '@angular/material';
+      import { MdSnackBar } from '@angular/material';
       ...
       export class ToastsComponent {
-        _snackBarConfig: MdSnackBarConfig;
-        constructor(private _viewContainerRef: ViewContainerRef,
-                    private _snackBarService: MdSnackBar) {
-          this._snackBarConfig = new MdSnackBarConfig(_viewContainerRef);
+        constructor(private _snackBarService: MdSnackBar) {
         }
         showSnackBar(): void {
-          let snackBarRef: MdSnackBarRef<any> = this._snackBarService
-            .open('Direct message sent!', 'Dismiss', this._snackBarConfig);
-          setTimeout(() => {
-            snackBarRef.dismiss();
-          }, 3000);
+          this._snackBarService.open('Direct message sent!', 'Dismiss', { duration: 3000 });
         }
       }
       ]]>

src/app/components/style-guide/dialogs/dialogs.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 import { TdDialogService } from '../../../../platform/core';
 
-import { MdSnackBar, MdSnackBarRef } from '@angular/material';
+import { MdSnackBar } from '@angular/material';
 
 @Component({
   selector: 'design-patterns-dialogs',
@@ -15,11 +15,8 @@ export class DialogsToastsComponent {
               private _snackBarService: MdSnackBar) {}
 
   showSnackBar(): void {
-    let snackBarRef: MdSnackBarRef<any> = this._snackBarService
-      .open('Direct message sent!', 'Dismiss');
-    setTimeout(() => {
-      snackBarRef.dismiss();
-    }, 3000);
+    this._snackBarService
+      .open('Direct message sent!', 'Dismiss', { duration: 3000 });
   }
   openAlert(): void {
     this._dialogService.openAlert({
@@ -44,10 +41,7 @@ export class DialogsToastsComponent {
     });
   }
   confirmDelete(): void {
-    let snackBarRef: MdSnackBarRef<any> = this._snackBarService.open('Item deleted!', 'Ok');
-    setTimeout(() => {
-      snackBarRef.dismiss();
-    }, 3000);
+    this._snackBarService.open('Item deleted!', 'Ok', { duration: 3000 });
   }
   openPrompt(): void {
     this._dialogService.openPrompt({