feat(package): update to angular 2 rc1 (#140)

* Make code compile with angular 2 rc1

* Switch to font-awesome and bootstrap 4

* Change to use let

components/table/ng-table-filtering.directive.ts

@@ -1,5 +1,5 @@
-import {Directive, EventEmitter, ElementRef, Renderer} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Directive, EventEmitter, ElementRef, Renderer} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 
 // import {setProperty} from 'angular2/ts/src/core/forms/directives/shared';
 function setProperty(renderer:Renderer, elementRef:ElementRef, propName:string, propValue:any) {

components/table/ng-table-paging.directive.ts

@@ -1,5 +1,5 @@
-import {Directive, EventEmitter, ElementRef, Renderer} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
+import {Directive, EventEmitter, ElementRef, Renderer} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 
 @Directive({
   selector: '[ngTablePaging]',

components/table/ng-table-sorting.directive.ts

@@ -1,5 +1,5 @@
-import {Directive, EventEmitter} from 'angular2/core';
-import {FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass} from 'angular2/common';
+import {Directive, EventEmitter} from '@angular/core';
+import {FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass} from '@angular/common';
 
 @Directive({
   selector: '[ngTableSorting]',

components/table/ng-table.component.ts

@@ -1,5 +1,5 @@
-import {Component, Directive, EventEmitter, ElementRef, Renderer} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgFor} from 'angular2/common';
+import {Component, Directive, EventEmitter, ElementRef, Renderer} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgFor} from '@angular/common';
 
 import {NgTableSorting} from './ng-table-sorting.directive';
 
@@ -12,16 +12,16 @@ import {NgTableSorting} from './ng-table-sorting.directive';
            role="grid" style="width: 100%;">
       <thead>
       <tr role="row">
-        <th *ngFor="#column of columns" [ngTableSorting]="config" [column]="column" (sortChanged)="onChangeTable($event)">
+        <th *ngFor="let column of columns" [ngTableSorting]="config" [column]="column" (sortChanged)="onChangeTable($event)">
           {{column.title}}
-          <i *ngIf="config && column.sort" class="pull-right glyphicon"
-            [ngClass]="{'glyphicon-chevron-down': column.sort === 'desc', 'glyphicon-chevron-up': column.sort === 'asc'}"></i>
+          <i *ngIf="config && column.sort" class="pull-right fa"
+            [ngClass]="{'fa-chevron-down': column.sort === 'desc', 'fa-chevron-up': column.sort === 'asc'}"></i>
         </th>
       </tr>
       </thead>
       <tbody>
-      <tr *ngFor="#row of rows">
-        <td *ngFor="#column of columns">{{getData(row, column.name)}}</td>
+      <tr *ngFor="let row of rows">
+        <td *ngFor="let column of columns">{{getData(row, column.name)}}</td>
       </tr>
       </tbody>
     </table>

demo/components/table-section.ts

@@ -1,5 +1,5 @@
-import {Component, } from 'angular2/core';
-import {CORE_DIRECTIVES} from 'angular2/common';
+import {Component, } from '@angular/core';
+import {CORE_DIRECTIVES} from '@angular/common';
 
 import {TableDemo} from './table/table-demo';
 

demo/components/table/table-demo.ts

@@ -1,5 +1,5 @@
-import {Component, EventEmitter, OnInit} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf} from 'angular2/common';
+import {Component, EventEmitter, OnInit} from '@angular/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf} from '@angular/common';
 import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
 
 import {NG_TABLE_DIRECTIVES} from '../../../ng2-table';

demo/index.html

@@ -13,7 +13,8 @@
 
   <!--link to bootstrap.css-->
   <link rel="stylesheet" href="assets/css/prism-okaidia.css">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-aNUYGqSUL9wG/vP7+cWZ5QOM4gsQou3sBfWRr/8S3R1Lv0rysEmnwsRKMbhiQX/O" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
   <link rel="stylesheet" href="assets/css/style.css">
 

demo/index.ts

@@ -1,6 +1,6 @@
-import {bootstrap} from 'angular2/bootstrap';
-import {Component} from 'angular2/core';
-import {NgClass} from 'angular2/common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {Component} from '@angular/core';
+import {NgClass} from '@angular/common';
 
 
 import {TableSection} from './components/table-section';

package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0-beta.0",
   "description": "angular2 table components",
   "scripts": {
+    "typings": "typings",
     "deploy": "NODE_ENV=production webpack -p --progress --color --optimize-minimize --optimize-dedupe --optimize-occurence-order",
+    "postinstall": "npm run typings -- install",
     "prepublish": "gulp clean && tsc",
     "server": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
     "start": "npm run server",
@@ -30,11 +32,15 @@
   "homepage": "https://github.com/valor-software/ng2-table#readme",
   "dependencies": {},
   "devDependencies": {
-    "angular2": "2.0.0-beta.0",
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler":  "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/platform-browser":  "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "bootstrap": "3.3.6",
     "clean-webpack-plugin": "0.1.8",
     "compression-webpack-plugin": "0.3.1",
-    "es6-shim": "0.33.13",
+    "es6-shim": "^0.35.0",
     "eslint": "1.10.3",
     "exports-loader": "0.6.3",
     "file-loader": "0.8.5",
@@ -48,19 +54,20 @@
     "markdown-loader": "0.1.7",
     "marked": "0.3.5",
     "moment": "2.11.2",
-    "ng2-bootstrap": "1.0.11",
+    "ng2-bootstrap": "1.0.16",
     "pre-commit": "1.1.2",
     "prismjs": "valorkin/prism",
     "prismjs-loader": "0.0.2",
     "raw-loader": "0.5.1",
     "reflect-metadata": "0.1.2",
     "require-dir": "0.3.0",
-    "rxjs": "5.0.0-beta.0",
+    "rxjs": "5.0.0-beta.6",
     "ts-loader": "0.8.2",
     "tslint": "3.6.0",
     "typescript": "1.8.7",
+    "typings": "^0.8.1",
     "webpack": "1.12.15",
     "webpack-dev-server": "1.14.0",
-    "zone.js": "0.6.10"
+    "zone.js": "^0.6.12"
   }
 }

tsconfig.json

@@ -17,6 +17,7 @@
     "node_modules"
   ],
   "files": [
-    "ng2-table.ts"
+    "ng2-table.ts",
+    "typings/browser.d.ts"
   ]
 }

typings.json

@@ -0,0 +1,6 @@
+{
+  "ambientDependencies": {
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
+    "node": "registry:dt/node#4.0.0+20160509154515"
+  }
+}

webpack.config.js

@@ -48,10 +48,10 @@ var config = {
   entry: {
     angular2: [
       // Angular 2 Deps
-      'zone.js/dist/zone-microtask',
+      'zone.js/dist/zone',
       'reflect-metadata',
-      'angular2/common',
-      'angular2/core'
+      '@angular/common',
+      '@angular/core'
     ],
     'angular2-table': ['ng2-table'],
     'angular2-table-demo': 'demo'