feature(deps): upgrade to @angular@2.4.1 and @Material@beta.1 + initi…

…al AoT support. closes(#149) (#209)

* upgrade to angular 2.4.1 and rxjs 5.0.1

* upgrade material@beta.1

* replaced svgSrc with svgIcon in layouts

* register icons from assets into the MdIconRegistry

* updated certain layouts and layout docs

* fixed svg usage in home, layouts overview and styleguide

* updated icon documentation

* updated docs with "assets:iconname"

* update unit tests with hammerjs

* remove usage of depricated md-input infavor of md-input-container (expect in autocomplete)

* remove deprecated kabab md directives

* replaced portalHost with cdkPortalHost

* replaced md-progress-circle with md-progress-spinner

* replaced md-sidenav-layout with md-sidenav-container

* replaced align with labelPosition in md-checkbox

* used labelPosition="before" explicitly now since default is "after"

* renamed focus-trap into cdk-focus-trap

* make `npm run test` do an ng test with generated code coverage , check linting and run once

* clean scss files and themes for future AoT support

* updated build.conf.js to move ts files excluding spec and app/ ts files

* fixed chart ParseContent enum so its AoT compatible

* missed highlight theme file

* upgrade to angular-cli@beta.24

* fixed teradata-ux svg

* fixed `npm run test` command

* update .npmignore with aot files that dont need to be published

* changed TS module compilation to es2015 since its needed for tree shaking

* initial AoT tsconfig

* add `npm run aot` for AoT compilation on platform

* script to remove unwanted AoT files from platform publish

* updated `npm run buiild` to include AoT process

* removed relative path imports from charts and data-table themes

* updated published package.json's from core and http modules

* fixed stepper unit tests

* feature(nav-list): better responsive widths

* fix(manage-list): ensure box shadows are correct on desktop

* fix(layout-theme): needed class for bg color

* fixed bug in layouts where it didnt close the sidenav in some cases

* update(material-components): add md-select & updates

* removing obsolete validation

* use any[] instead of object in select docs

* fixed tslint errors

* update copy in FAQ

* removed the deprecated md-tooltip

* spelling/language check

* update(material-components): add chips example

* update(platform.css): add sidenav

* update(material-components): dialogs from material2

.travis.yml

@@ -12,10 +12,9 @@ before_script:
 install:
 - npm i process-nextick-args util-deprecate buffer-shims
 - npm install
-- "./node_modules/.bin/ng build"
 script:
 - npm run tslint
-- "./node_modules/.bin/ng test --watch=false"
+- npm run test
 notifications:
   slack:
     secure: pkXQL5AZiSBh1yWjilrcA7KbcJjC4xxjhd0SAwogJCQgyEf/i8/CfR1ZXiZYsIBJT6HTI7UMdJzwP6TiY/zih6Mq8PqUg38NUsvGyznILkbksMQJieWrg1r+1ideplPJFX7qdXwrOcxvSVoEFIGha26X0Fglq3kXSBHpPR9U0lDCoUxLUO35txQ/iji85Na4hjQnmtBEQkqaJogA0hRdcSLIKxwScgSrb4UU2PXEaIS9Zpr2SOG/RTOMkrrSMOD7bgocZbhAbk3c5shPZNj51gpEN+692Qxp4kQ/nfT10Hu5ATLaFCM5v04+w0D3ZJLA46LpU47qP0ALy6O9d16pGUcxJGbWaMZpV53vV9jIl9y2ahaqN1h1J9BcLIOzJvaQy92km8F7a3l7cN8gWSUZjs5Hd+gPFQH9Flcydmq26e8Maa1tQDF5R3GIdaCw4qkuJYbl4ToE59wtiPQ6M7xVKqNK4Qypu1YNsKOoLG/tZRFvp4771vgWcR5Lu/DqJJ9SAB0jsdrOXpe+0DmdrLBwhoZv2D9FTce+clDHIJ7ObPEc/UKw8rtWAA5iCPCEJ0sPl+WZwOS3ZFp4QmMC+5mzffMUiX6HBnzxiyOZvYGJD/jTy1yA1Cmt4RJYrOPM73csI1ELs5tj4tvqBNJQ8daIenfkg7u42IJfByDGIsJz8to=

build.conf.js

@@ -38,9 +38,17 @@ module.exports = {
       'src/**/**.html',
       'src/**/**.md',
       'src/**/**.js',
+      'src/**/**.ts',
+      '!src/**/**.spec.ts',
       'src/**/**/package.json',
       '!src/app/**/**.html',
       '!src/app/**/**.js',
+      '!src/app/**/**.ts',
+      '!src/environments/**/**.ts',
+      '!src/polyfills.ts',
+      '!src/main.ts',
+      '!src/test.ts',
+      '!src/typings.d.ts',
       '!src/index.html'
     ]
   }

package.json

@@ -14,13 +14,13 @@
     "tslint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
     "postinstall": "webdriver-manager update",
     "webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
-    "pretest": "rm -rf ./dist && ng build",
-    "test": "npm run karma",
-    "karma": "karma start ./karma.conf.js --single-run",
+    "test": "ng test --code-coverage --single-run",
+    "show-coverage-win" : "start chrome ./coverage/index.html",
     "bump-dev": "gulp bump-version",
     "bump-patch": "gulp bump-version --ver patch",
     "bump-minor": "gulp bump-version --ver minor",
     "bump-major": "gulp bump-version --ver major",
+    "aot": "./node_modules/.bin/ngc -p src/platform/tsconfig-aot.json",
     "build": "bash scripts/build-release",
     "publish": "bash scripts/publish-release",
     "ghpages-deploy": "bash scripts/ghpages-deploy",
@@ -46,34 +46,35 @@
     "Ed Morales <eduardo.morales@teradata.com>",
     "Jason Weaver <jason.weaver@teradata.com>",
     "Jeremy Wilken <jeremy.wilken@teradata.com>",
-    "Jeremy Smartt <jeremy.smartt@teradata.com>"
+    "Jeremy Smartt <jeremy.smartt@teradata.com>",
+    "Ilsun Park <ilsun.park@teradata.com>"
   ],
   "dependencies": {
-    "@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",
+    "@angular/common": "^2.4.1",
+    "@angular/compiler": "^2.4.1",
+    "@angular/core": "^2.4.1",
+    "@angular/forms": "^2.4.1",
+    "@angular/http": "^2.4.1",
+    "@angular/material": "2.0.0-beta.1",
+    "@angular/platform-browser": "^2.4.1",
+    "@angular/platform-browser-dynamic": "^2.4.1",
+    "@angular/platform-server": "^2.4.1",
+    "@angular/router": "^3.4.1",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "highlight.js": "9.6.0",
-    "rxjs": "5.0.0-rc.4",
+    "rxjs": "^5.0.1",
     "showdown": "1.4.2",
     "zone.js": "^0.7.2",
     "d3": "^4.2.1"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.3.0",
+    "@angular/compiler-cli": "^2.4.1",
     "@types/hammerjs": "^2.0.30",
     "@types/jasmine": "^2.2.31",
     "@types/node": "^6.0.34",
     "@types/selenium-webdriver": "^2.52.0",
-    "angular-cli": "1.0.0-beta.19-3",
+    "angular-cli": "1.0.0-beta.24",
     "codelyzer": "~0.0.26",
     "awesome-typescript-loader": "^2.2.4",
     "ember-cli-inject-live-reload": "1.4.0",

public/.npmignore

@@ -0,0 +1,4 @@
+# compiled aot output
+*.ngsummary.json
+*.ngfactory.ts
+*.shim.ngstyle.ts

scripts/build-release

@@ -6,6 +6,11 @@ rm -rf ./deploy
 # Perform a build.
 gulp build
 echo "Platform compiled..."
+# AoT compilation
+npm run aot
+echo "Generated *.metadata.json files..."
+gulp clean-aot
+echo "Cleaned AoT excess"
 # Inline the css and html into the component files.
 gulp inline-resource-files
 echo "Files inlined..."

scripts/clean-aot.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var gulp = require('gulp-help')(require('gulp'));
+var del = require('del');
+
+gulp.task('clean-aot', "Clean unwanted AoT files from /deploy folder", function() {
+  return del([
+    'deploy/**/*.ngsummary.json',
+    'deploy/**/*.ngfactory.ts',
+    'deploy/**/*.shim.ngstyle.ts',
+    'deploy/**/node_modules/'
+  ]);
+});

scripts/compile-ts.js

@@ -11,18 +11,20 @@ var tsProject = ts.createProject({
       emitDecoratorMetadata: true,
       experimentalDecorators: true,
       mapRoot: "./",
-      lib: ["es6", "dom"],
-      module: "es6",
+      lib: ["es6", "es2015", "dom"],
+      module: "es2015",
       moduleResolution: "node",
       noEmitOnError: true,
-      noImplicitAny: false,
+      noImplicitAny: true,
       target: "ES5",
+      inlineSources: true,
+      stripInternal: false,
       typescript: require('typescript'),
       typeRoots: [
         "../node_modules/@types"
       ],
       types: [
-        "hammerjs"
+        "jasmine", "hammerjs", "rxjs"
       ]
     });
 

src/app/app.component.html

@@ -1,4 +1,4 @@
-<td-layout #layout sidenavTitle="Covalent" logo="app/assets/icons/teradata.svg" displayName="">
+<td-layout #layout sidenavTitle="Covalent" logo="assets:teradata" displayName="">
   <md-nav-list menu-items>
     <a *ngFor="let item of routes" md-list-item [routerLink]="[item.route]" (click)="layout.close()"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
   </md-nav-list>

src/app/app.component.spec.ts

@@ -13,7 +13,7 @@ import { DocsAppComponent } from './app.component';
 describe('Component: App', () => {
 
   let generalResponses: Map<string, Response> = new Map<string, Response>();
-  generalResponses.set('app/assets/icons/teradata.svg', new Response(new ResponseOptions({
+  generalResponses.set('/app/assets/icons/teradata.svg', new Response(new ResponseOptions({
     status: 200, body: '<svg></svg>',
   })));
 

src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MdIconRegistry } from '@angular/material';
 
 @Component({
   selector: 'docs-covalent',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss'],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
 })
 export class DocsAppComponent {
 
@@ -29,4 +31,22 @@ export class DocsAppComponent {
       title: 'Components & Addons',
     },
   ];
+
+  constructor(private _iconRegistry: MdIconRegistry,
+              private _domSanitizer: DomSanitizer) {
+    this._iconRegistry.addSvgIconInNamespace('assets', 'teradata',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/teradata.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'github',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/github.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/covalent.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'teradata-ux',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/teradata-ux.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'appcenter',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/appcenter.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'listener',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/listener.svg'));
+    this._iconRegistry.addSvgIconInNamespace('assets', 'querygrid',
+      this._domSanitizer.bypassSecurityTrustResourceUrl('/app/assets/icons/querygrid.svg'));
+  }
 }

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

@@ -2,8 +2,8 @@ import { Component} from '@angular/core';
 
 @Component({
   selector: 'charts-demo',
-  styleUrls: ['charts.component.scss'],
-  templateUrl: 'charts.component.html',
+  styleUrls: ['./charts.component.scss'],
+  templateUrl: './charts.component.html',
 })
 export class ChartsDemoComponent {
 

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'chips-demo',
-  styleUrls: ['chips.component.scss'],
-  templateUrl: 'chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+  templateUrl: './chips.component.html',
 })
 export class ChipsDemoComponent {
 

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

@@ -1,4 +1,4 @@
-<td-layout-nav-list #list logo="app/assets/icons/teradata.svg" toolbarTitle="Covalent">
+<td-layout-nav-list #list logo="assets:teradata" toolbarTitle="Covalent">
   <md-nav-list list-items>
     <template let-item let-last="last" ngFor [ngForOf]="items">
         <a md-list-item 

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-components',
-  styleUrls: ['components.component.scss'],
-  templateUrl: 'components.component.html',
+  styleUrls: ['./components.component.scss'],
+  templateUrl: './components.component.html',
 })
 export class ComponentsComponent {
 

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

@@ -21,7 +21,7 @@ import { ChartsDemoComponent } from './charts/charts.component';
 import { DataTableDemoComponent } from './data-table/data-table.component';
 import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
-import { MaterialComponentsComponent } from './material-components/material-components.component';
+import { MaterialComponentsComponent, DialogComponent } from './material-components/material-components.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
@@ -50,6 +50,7 @@ import { CovalentChartsModule } from '../../../platform/charts';
     PagingDemoComponent,
     SearchDemoComponent,
     MaterialComponentsComponent,
+    DialogComponent,
   ],
   imports: [
     CovalentCoreModule.forRoot(),
@@ -58,5 +59,6 @@ import { CovalentChartsModule } from '../../../platform/charts';
     CovalentChartsModule.forRoot(),
     componentsRoutes,
   ],
+  entryComponents: [ DialogComponent ],
 })
 export class ComponentsModule {}

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

@@ -10,8 +10,8 @@ const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2);
 
 @Component({
   selector: 'data-table-demo',
-  styleUrls: ['data-table.component.scss'],
-  templateUrl: 'data-table.component.html',
+  styleUrls: ['./data-table.component.scss'],
+  templateUrl: './data-table.component.html',
 })
 export class DataTableDemoComponent implements OnInit {
 

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

@@ -4,8 +4,8 @@ import { TdDialogService } from '../../../../platform/core';
 
 @Component({
   selector: 'dialogs-demo',
-  styleUrls: ['dialogs.component.scss'],
-  templateUrl: 'dialogs.component.html',
+  styleUrls: ['./dialogs.component.scss'],
+  templateUrl: './dialogs.component.html',
 })
 export class DialogsDemoComponent {
 

src/app/components/components/directives/directives.component.html

@@ -22,12 +22,16 @@
     <p class="md-body-1">Use <code>tdAutoTrim</code> on an input to automatically trim the characters.</p>
     <p>Try entering white spaces before or after a word this input:</p>
     <div layout="row">
-      <md-input flex tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"></md-input>
+      <md-input-container flex>
+        <input md-input tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
+      </md-input-container>
     </div>
     <p>Usage:</p>
     <td-highlight lang="html">
         <![CDATA[
-          <md-input tdAutoTrim [(ngModel)]="yourmodel" placeholder="This will be autotrimmed"></md-input>
+          <md-input-container>
+            <input md-input tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"/>
+          </md-input-container>
         ]]>
     </td-highlight>
   </md-card-content>
@@ -114,14 +118,18 @@
     </ul>
     <p>Example enter lower than 5 or higher than 10:</p>
     <div layout="row">
-      <md-input flex="20" placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required></md-input>
+      <md-input-container flex="20">
+        <input md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
+      </md-input-container>
     </div>
     <p>Errors:</p>
     <code>{{el?.errors | json}}</code>
     <p>HTML:</p>
     <td-highlight lang="html">
         <![CDATA[
-          <md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required></md-input>
+          <md-input-container>
+            <input md-input placeholder="CPUs" #el="ngModel" type="number" [(ngModel)]="val" min="5" max="10" required/>
+          </md-input-container>
         ]]>
     </td-highlight>
   </md-card-content>

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'directives-demo',
-  styleUrls: [ 'directives.component.scss' ],
-  templateUrl: 'directives.component.html',
+  styleUrls: ['./directives.component.scss' ],
+  templateUrl: './directives.component.html',
 })
 export class DirectivesComponent {
 

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

@@ -24,32 +24,19 @@ <h4 md-line>Headquarters</h4>
             </md-list-item>
           </md-list>
         </td-expansion-summary>
-        <form class="md-padding">
-          <md-input class="demo-full-width" placeholder="Company (disabled)" disabled value="Google">
-          </md-input>
-          <table style="width: 100%" cellspacing="0"><tr>
-            <td><md-input placeholder="First name" style="width: 100%"></md-input></td>
-            <td><md-input placeholder="Long Last Name That Will Be Truncated" style="width: 100%"></md-input></td>
-          </tr></table>
-          <p>
-            <md-input class="demo-full-width" placeholder="Address" value="1600 Amphitheatre Pkwy"></md-input>
-            <md-input class="demo-full-width" placeholder="Address 2"></md-input>
-          </p>
-          <table style="width: 100%" cellspacing="0"><tr>
-            <td><md-input class="demo-full-width" placeholder="City"></md-input></td>
-            <td><md-input class="demo-full-width" placeholder="State"></md-input></td>
-            <td><md-input #postalCode class="demo-full-width" maxLength="5"
-                          placeholder="Postal Code"
-                          value="94043">
-            </md-input></td>
-          </tr></table>
-          <md-divider></md-divider>
-          <div layout="row" layout-margin layout-align="end center">
-
-            <button md-button>Cancel</button>
-            <button md-button color="accent">Save</button>
-          </div>
+        <form class="md-padding" layout="column">
+          <md-input-container flex>
+            <input md-input placeholder="Company (disabled)" disabled value="Google"/>
+          </md-input-container>
+          <md-input-container flex>
+            <textarea md-input placeholder="Description" rows="4"></textarea>
+          </md-input-container>
         </form>
+        <md-divider></md-divider>
+        <div layout="row" layout-margin layout-align="end center">
+          <button md-button>Cancel</button>
+          <button md-button color="accent">Save</button>
+        </div>
       </td-expansion-panel>
       <td-expansion-panel label="Label goes here" sublabel="sublabel goes here" [disabled]="disabled">
         <div class="md-padding">

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'expansion-panel-demo',
-  styleUrls: ['expansion-panel.component.scss'],
-  templateUrl: 'expansion-panel.component.html',
+  styleUrls: ['./expansion-panel.component.scss'],
+  templateUrl: './expansion-panel.component.html',
 })
 export class ExpansionPanelDemoComponent {