feat(): add support for angular@6 (#1136)

* chore(): apply breaking changes from [email protected]

* feat(): apply breaking changes from angular material

* fix(chips): underline base color and ripple disable

* fix(): override caret color

* fix(): add preserveWhitespaces so code snippets dont lose format

* fix(): properly import code and text editor modules

* fix(): unit tests

* chore(): update package.json and yarn.lock

* chore(): update README with badges for next version and license

* fix(): scss lint errors

* chore(): update to rc.5

* Capitalizing proper nouns in docs

* missing preserveWhitespaces: true on datatable demos

* chore(whitespace): preserve whitespace in example code

* chore(): remove tslib dependency since material already has it

* feat(theme): update dark theme & only style home expasions

README.md

@@ -1,9 +1,12 @@
 ## Covalent: UI Platform based on Angular-Material
 
 [![Build Status](https://travis-ci.org/Teradata/covalent.svg?branch=develop)](https://travis-ci.org/Teradata/covalent)
-[![npm version](https://badge.fury.io/js/%40covalent%2Fcore.svg)](https://badge.fury.io/js/%40covalent%2Fcore)
+[![npm](https://img.shields.io/npm/v/%40covalent/core.svg)](badge-url)
+[![npm](https://img.shields.io/npm/v/%40covalent/core/next.svg)](badge-url)
 [![Join the chat at https://gitter.im/Teradata/covalent](https://badges.gitter.im/Teradata/covalent.svg)](https://gitter.im/Teradata/covalent?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
 [![Coverage Status](https://coveralls.io/repos/github/Teradata/covalent/badge.svg)](https://coveralls.io/github/Teradata/covalent)
+[![npm](https://img.shields.io/npm/l/@covalent/core.svg)](badge-url)
 
 <img alt="Covalent" src="https://cdn.rawgit.com/Teradata/covalent/develop/src/app/assets/icons/covalent.svg" width="150">
 

build.conf.js

@@ -2,8 +2,8 @@
 
 module.exports = {
   deployed: 'deploy/platform/',
-  angularVersion: '5.1.0',
-  materialVersion: '5.1.0',
+  angularVersion: '6.0.0-rc.5',
+  materialVersion: '6.0.0-rc.5',
   paths: {
     PostNgPackngrBuildRequiredFiles: [
       '!src/platform/core/**/*.component.scss',

package.json

@@ -62,37 +62,38 @@
     "ie 11"
   ],
   "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/cdk": "^5.2.0",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/material": "^5.2.0",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/platform-server": "^5.2.0",
-    "@angular/router": "^5.2.0",
-    "@covalent/code-editor": "^1.0.0",
+    "@angular/animations": "6.0.0-rc.5",
+    "@angular/cdk": "6.0.0-rc.5",
+    "@angular/common": "6.0.0-rc.5",
+    "@angular/compiler": "6.0.0-rc.5",
+    "@angular/core": "6.0.0-rc.5",
+    "@angular/forms": "6.0.0-rc.5",
+    "@angular/http": "6.0.0-rc.5",
+    "@angular/material": "6.0.0-rc.5",
+    "@angular/platform-browser": "6.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "6.0.0-rc.5",
+    "@angular/platform-server": "6.0.0-rc.5",
+    "@angular/router": "6.0.0-rc.5",
+    "@covalent/code-editor": "^2.0.0-beta.1",
     "@covalent/text-editor": "^1.0.0",
-    "@ngx-translate/core": "9.0.1",
-    "@ngx-translate/http-loader": "2.0.1",
+    "@ngx-translate/core": "10.0.1",
+    "@ngx-translate/http-loader": "3.0.1",
     "@swimlane/ngx-charts": "7.0.1",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "d3": "^4.4.0",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.11.0",
-    "rxjs": "5.5.6",
+    "rxjs": "6.0.0-rc.0",
+    "rxjs-compat": "6.0.0-rc.0",
     "showdown": "1.6.4",
-    "tslib": "^1.7.1",
+    "tslib": "^1.9.0",
     "web-animations-js": "2.3.1",
     "zone.js": "^0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.7",
-    "@angular/compiler-cli": "^5.2.0",
+    "@angular/cli": "1.7.3",
+    "@angular/compiler-cli": "6.0.0-rc.5",
     "@types/fs-extra": "^4.0.0",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "2.5.38",
@@ -129,7 +130,7 @@
     "ts-node": "^3.0.4",
     "tsickle": "^0.26.0",
     "tslint": "5.9.1",
-    "typescript": "~2.6.2",
+    "typescript": "~2.7.2",
     "webpack-bundle-analyzer": "^2.9.1",
     "webpack-stats-plugin": "^0.1.5"
   }

src/app/components/components/animations/animations.component.ts

@@ -27,6 +27,7 @@ import { TdPulseAnimation } from '../../../../platform/core/common/animations/pu
     TdJelloAnimation(),
     TdPulseAnimation(),
   ],
+  preserveWhitespaces: true,
 })
 export class AnimationsComponent {
 

src/app/components/components/chips/chips.component.ts

@@ -8,6 +8,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   templateUrl: './chips.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class ChipsDemoComponent implements OnInit {
 

src/app/components/components/code-editor/code-editor.component.html

@@ -28,7 +28,7 @@
   <mat-card-actions>
     <div layout="row" layout-align="start center" class="pad-sm">
       <span flex="none" hide-xs class="push-right mat-body-1">Editor Language</span>
-      <mat-form-field floatPlaceholder="never">
+      <mat-form-field floatLabel="never">
         <mat-select [(ngModel)]="editorLanguage" (change)="changeLanguage()" placeholder="Editor Language">
           <mat-option value="sql">SQL</mat-option>
           <mat-option value="javascript">JavaScript</mat-option>
@@ -39,7 +39,7 @@
     <mat-divider></mat-divider>
     <div layout="row" layout-align="start center" class="pad-sm">
       <span flex="none" hide-xs class="push-right mat-body-1">Editor Theme</span>
-      <mat-form-field floatPlaceholder="never">
+      <mat-form-field floatLabel="never">
         <mat-select [(ngModel)]="editorTheme" (change)="changeTheme()" placeholder="Editor Theme">
           <mat-option value="vs">Light</mat-option>
           <mat-option value="vs-dark">Dark</mat-option>

src/app/components/components/components.module.ts

@@ -63,8 +63,8 @@ import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, Covale
 import { CovalentHighlightModule } from '../../../platform/highlight';
 import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
-import { CovalentCodeEditorModule } from '../../../../node_modules/@covalent/code-editor';
-import { CovalentTextEditorModule } from '../../../../node_modules/@covalent/text-editor';
+import { CovalentCodeEditorModule } from '@covalent/code-editor';
+import { CovalentTextEditorModule } from '@covalent/text-editor';
 
 import { DocumentationToolsModule } from '../../documentation-tools';
 

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

@@ -9,8 +9,6 @@ import { TdDialogService } from '../../../../platform/core';
 
 import { InternalDocsService } from '../../../services';
 
-import { toPromise } from 'rxjs/operator/toPromise';
-
 const NUMBER_FORMAT: (v: any) => any = (v: number) => v;
 const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
 
@@ -19,6 +17,7 @@ const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
   styleUrls: ['./data-table.component.scss'],
   templateUrl: './data-table.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class DataTableDemoComponent implements OnInit {
 
@@ -131,7 +130,7 @@ export class DataTableDemoComponent implements OnInit {
   }
 
   async ngOnInit(): Promise<void> {
-    this.data = await toPromise.call(this._internalDocsService.queryData());
+    this.data = await this._internalDocsService.queryData().toPromise();
     this.basicData = this.data.slice(0, 10);
     this.filter();
   }

src/app/components/components/dialogs/dialogs.component.ts

@@ -9,6 +9,7 @@ import { TdDialogService } from '../../../../platform/core';
   styleUrls: ['./dialogs.component.scss'],
   templateUrl: './dialogs.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class DialogsDemoComponent {
 

src/app/components/components/directives/directives.component.ts

@@ -7,6 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./directives.component.scss' ],
   templateUrl: './directives.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class DirectivesComponent {
 

src/app/components/components/dynamic-forms/dynamic-forms.component.html

@@ -56,7 +56,7 @@
       <mat-card-content>
         <form #addForm="ngForm">
           <div layout="row" layout-align="start center" class="pad-sm">
-            <mat-form-field class="pad-right" floatPlaceholder="never">
+            <mat-form-field class="pad-right" floatLabel="never">
               <mat-select placeholder="Select element type" [(ngModel)]="type" name="type" required>
                 <mat-option *ngFor="let option of elementOptions" [value]="option">
                   {{ option }}

src/app/components/components/dynamic-forms/dynamic-forms.component.scss

@@ -1,3 +1,3 @@
-::ng-deep .mat-input-infix.mat-form-field-infix {
+::ng-deep .mat-form-field-infix {
   width: 100%;
 }

src/app/components/components/dynamic-forms/dynamic-forms.component.ts

@@ -19,6 +19,7 @@ import {
     slideInDownAnimation,
     TdCollapseAnimation(),
   ],
+  preserveWhitespaces: true,
 })
 export class DynamicFormsDemoComponent {
 

src/app/components/components/expansion-panel/expansion-panel.component.ts

@@ -7,6 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./expansion-panel.component.scss'],
   templateUrl: './expansion-panel.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class ExpansionPanelDemoComponent {
 

src/app/components/components/file-input/file-input.component.ts

@@ -8,6 +8,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./file-input.component.scss'],
   templateUrl: './file-input.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class FileInputDemoComponent {
 

src/app/components/components/file-upload/file-upload.component.ts

@@ -8,6 +8,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./file-upload.component.scss'],
   templateUrl: './file-upload.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class FileUploadDemoComponent {
 

src/app/components/components/highlight/highlight.component.html

@@ -37,8 +37,7 @@ <h1>hello world!</h1>
     <td-highlight lang="typescript">
       <![CDATA[
         import { Injectable } from '@angular/core';
-        import { Subject } from 'rxjs/Subject';
-        import { Observable } from 'rxjs/Observable';
+        import { Observable, Subject } from 'rxjs';
 
         @Injectable()
         export class Service {

src/app/components/components/highlight/highlight.component.ts

@@ -7,6 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./highlight.component.scss'],
   templateUrl: './highlight.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class HighlightDemoComponent {
 

src/app/components/components/http/http.component.ts

@@ -7,6 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./http.component.scss' ],
   templateUrl: './http.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class HttpDemoComponent {
 

src/app/components/components/loading/loading.component.html

@@ -269,8 +269,7 @@ <h4 class="mat-subheading-2">with accent [tdLoadingColor]</h4>
         <p>Typescript:</p>
         <td-highlight lang="typescript">
           <![CDATA[
-            import { Observable } from 'rxjs/Observable';
-            import { Subscriber } from 'rxjs/Subscriber';
+            import { Observable, Subscriber } from 'rxjs';
             ...
             export class Demo {
               listObservable: Observable<any[]>;

src/app/components/components/loading/loading.component.ts

@@ -1,7 +1,6 @@
 import { Component, ViewContainerRef, OnInit, HostBinding, ChangeDetectionStrategy } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
-import { Subscriber } from 'rxjs/Subscriber';
+import { Observable, Subscriber } from 'rxjs';
 
 import { slideInDownAnimation } from '../../../app.animations';
 
@@ -13,6 +12,7 @@ import { TdLoadingService, ITdLoadingConfig, LoadingType, LoadingMode } from '..
   styleUrls: ['./loading.component.scss' ],
   templateUrl: './loading.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class LoadingDemoComponent implements OnInit {
 

src/app/components/components/markdown/markdown.component.ts

@@ -7,6 +7,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./markdown.component.scss'],
   templateUrl: './markdown.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class MarkdownDemoComponent {
 

src/app/components/components/media/media.component.html

@@ -57,7 +57,7 @@ <h3>Example:</h3>
       <![CDATA[
         import { Component, NgZone, OnInit, OnDestroy } from '@angular/core';
         import { TdMediaService } from '@covalent/core/media';
-        import { Subscription } from 'rxjs/Subscription';
+        import { Subscription } from 'rxjs';
         ...
         })
         export class Demo implements OnInit, OnDestroy {

src/app/components/components/media/media.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, NgZone, OnDestroy, HostBinding } from '@angular/core';
 import { slideInDownAnimation } from '../../../app.animations';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { TdMediaService, TdJelloAnimation } from '../../../../platform/core';
 
@@ -12,6 +12,7 @@ import { TdMediaService, TdJelloAnimation } from '../../../../platform/core';
     TdJelloAnimation(),
     slideInDownAnimation,
   ],
+  preserveWhitespaces: true,
 })
 export class MediaDemoComponent implements OnInit, OnDestroy {
 

src/app/components/components/message/message.component.ts

@@ -6,6 +6,7 @@ import { slideInDownAnimation } from '../../../app.animations';
   styleUrls: ['./message.component.scss' ],
   templateUrl: './message.component.html',
   animations: [slideInDownAnimation],
+  preserveWhitespaces: true,
 })
 export class MessageDemoComponent {
 

src/app/components/components/ngx-charts/ngx-charts.component.ts

@@ -7,6 +7,7 @@ import { TdDigitsPipe } from '@covalent/core/common';
   selector: 'ngx-charts-demo',
   styleUrls: ['./ngx-charts.component.scss'],
   templateUrl: './ngx-charts.component.html',
+  preserveWhitespaces: true,
 })
 export class NgxChartsDemoComponent {
 

src/app/components/components/ngx-translate/ngx-translate.component.html

@@ -3,12 +3,12 @@
   <mat-card-subtitle>i18n library for Angular</mat-card-subtitle>
   <mat-divider></mat-divider>
   <mat-card-content>
-    An implementation of angular translate for Angular.
+    An implementation of Angular Translate for Angular.
   </mat-card-content>
   <mat-divider></mat-divider>
   <mat-card-actions>
-    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in spanish</button>
-    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in english</button>
+    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in Spanish</button>
+    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in English</button>
   </mat-card-actions>
 </mat-card>
 <mat-card>
@@ -95,8 +95,8 @@ <h3 translate>DEMO_BASIC.DIRECTIVE_MESSAGE</h3>
   </mat-card-content>
   <mat-divider></mat-divider>
   <mat-card-actions>
-    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in spanish</button>
-    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in english</button>
+    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in Spanish</button>
+    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in English</button>
   </mat-card-actions>
 </mat-card>
 <mat-card>
@@ -210,8 +210,8 @@ <h3 translate>DEMO_BASIC.DIRECTIVE_MESSAGE</h3>
   </mat-card-content>
   <mat-divider></mat-divider>
   <mat-card-actions>
-    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in spanish</button>
-    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in english</button>
+    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in Spanish</button>
+    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in English</button>
   </mat-card-actions>
 </mat-card>
 <mat-card>
@@ -297,8 +297,8 @@ <h4 matLine>Another person</h4>
   </mat-card-content>
   <mat-divider></mat-divider>
   <mat-card-actions>
-    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in spanish</button>
-    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in english</button>
+    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in Spanish</button>
+    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in English</button>
   </mat-card-actions>
 </mat-card>
 <mat-card>
@@ -382,7 +382,7 @@ <h4 matLine>Another person</h4>
   </mat-card-content>
   <mat-divider></mat-divider>
   <mat-card-actions>
-    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in spanish</button>
-    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in english</button>
+    <button mat-button color="accent" *ngIf="selectedLanguage === 'en'" (click)="languageChange('es')">See demos in Spanish</button>
+    <button mat-button color="primary" *ngIf="selectedLanguage === 'es'" (click)="languageChange('en')">See demos in English</button>
   </mat-card-actions>
 </mat-card>

src/app/components/components/ngx-translate/ngx-translate.component.ts

@@ -11,6 +11,7 @@ import { TRANSLATE_STORAGE_KEY } from '../../../utilities/translate';
   selector: 'ngx-translate-demo',
   styleUrls: ['./ngx-translate.component.scss'],
   templateUrl: './ngx-translate.component.html',
+  preserveWhitespaces: true,
 })
 export class NgxTranslateDemoComponent {