Merge pull request #15 from valor-software/upgrade-ng2-beta-0

chore(version): upgrade to angular2 beta-0 fixes #13, #14

components/file-upload/file-drop.ts

@@ -1,10 +1,6 @@
-import {
+import { Directive, EventEmitter, ElementRef } from 'angular2/core';
-  Component, View, OnInit, OnDestroy, OnChanges,
-  Directive, EventEmitter, ElementRef, Renderer,
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
-} from 'angular2/angular2';
 
-import {FileUploader} from './file-uploader';
+import { FileUploader } from './file-uploader';
 
 @Directive({
   selector: '[ng2-file-drop]',

components/file-upload/file-select.ts

@@ -1,8 +1,4 @@
-import {
+import { Directive, ElementRef } from 'angular2/core';
-  Component, View, OnInit, OnDestroy, OnChanges,
-  Directive, EventEmitter, ElementRef, Renderer,
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
-} from 'angular2/angular2';
 
 import {FileUploader} from './file-uploader';
 

components/file-upload/file-uploader.ts

@@ -1,7 +1,3 @@
-import {
-  EventEmitter, ElementRef, Renderer
-} from 'angular2/angular2';
-
 import {FileLikeObject} from './file-like-object';
 import {FileItem} from './file-item';
 

demo/components/file-upload-section.ts

@@ -1,8 +1,9 @@
 /// <reference path="../../tsd.d.ts" />
 
-import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+import {Component, View} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
-import {tabs} from 'ng2-bootstrap/ng2-bootstrap';
+import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
 import {SimpleDemo} from './file-upload/simple-demo';
 
 let name = 'File Upload';
@@ -23,7 +24,7 @@ tabDesc.forEach(desc => {
           <tab heading="${desc.heading}" (select)="select($event)">
           <div class="card card-block panel panel-default panel-body">
 
-            <${desc.heading.toLowerCase()}-demo *ng-if="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
+            <${desc.heading.toLowerCase()}-demo *ngIf="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
 
             <br>
 
@@ -52,9 +53,7 @@ tabDesc.forEach(desc => {
 });
 
 @Component({
-  selector: 'file-upload-section'
+  selector: 'file-upload-section',
-})
-@View({
   template: `
   <section id="${name.toLowerCase()}">
     <div class="row">
@@ -71,7 +70,7 @@ tabDesc.forEach(desc => {
     </div>
   </section>
   `,
-  directives: [SimpleDemo, tabs, CORE_DIRECTIVES]
+  directives: [SimpleDemo, TAB_DIRECTIVES, CORE_DIRECTIVES]
 })
 export class FileUploadSection {
   private currentHeading:string = 'Simple';

demo/components/file-upload/simple-demo.html

@@ -21,7 +21,7 @@
             <h3>Select files</h3>
 
             <div ng2-file-drop
-                 [ng-class]="{'nv-file-over': hasBaseDropZoneOver}"
+                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                  (file-over)="fileOverBase($event)"
                  [uploader]="uploader"
                  class="well my-drop-zone">
@@ -29,7 +29,7 @@
             </div>
 
             <div ng2-file-drop
-                 [ng-class]="{'another-file-over-class': hasAnotherDropZoneOver}"
+                 [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
                  (file-over)="fileOverAnother($event)"
                  [uploader]="uploader"
                  class="well my-drop-zone">
@@ -46,7 +46,7 @@
         <div class="col-md-9" style="margin-bottom: 40px">
 
             <h3>Upload queue</h3>
-            <p>Queue length: {{ uploader.queue.length }}</p>
+            <p>Queue length: {{ uploader?.queue?.length }}</p>
 
             <table class="table">
                 <thead>
@@ -59,18 +59,18 @@
                 </tr>
                 </thead>
                 <tbody>
-                <tr *ng-for="#item of uploader.queue">
+                <tr *ngFor="#item of uploader.queue">
-                    <td><strong>{{ item.file.name }}</strong></td>
+                    <td><strong>{{ item?.file?.name }}</strong></td>
-                    <td *ng-if="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024 | number:'.2' }} MB</td>
+                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
-                    <td *ng-if="uploader.isHTML5">
+                    <td *ngIf="uploader.isHTML5">
                         <div class="progress" style="margin-bottom: 0;">
-                            <div class="progress-bar" role="progressbar" [ng-style]="{ 'width': item.progress + '%' }"></div>
+                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                         </div>
                     </td>
                     <td class="text-center">
-                        <span *ng-if="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
+                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
-                        <span *ng-if="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
+                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
-                        <span *ng-if="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
+                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                     </td>
                     <td nowrap>
                         <button type="button" class="btn btn-success btn-xs"
@@ -94,7 +94,7 @@
                 <div>
                     Queue progress:
                     <div class="progress" style="">
-                        <div class="progress-bar" role="progressbar" [ng-style]="{ 'width': uploader.progress + '%' }"></div>
+                        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                     </div>
                 </div>
                 <button type="button" class="btn btn-success btn-s"

demo/components/file-upload/simple-demo.ts

@@ -1,13 +1,8 @@
 /// <reference path="../../../tsd.d.ts" />
 
-import {
+import {Component} from 'angular2/core';
-  Component, View, EventEmitter,
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from 'angular2/common';
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle
+import {FILE_UPLOAD_DIRECTIVES, FileUploader} from '../../../ng2-file-upload';
-} from 'angular2/angular2';
-
-import {FileSelect} from '../../../components/file-upload/file-select';
-import {FileDrop} from '../../../components/file-upload/file-drop';
-import {FileUploader} from '../../../components/file-upload/file-uploader';
 
 // webpack html imports
 let template = require('./simple-demo.html');
@@ -16,11 +11,9 @@ let template = require('./simple-demo.html');
 const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
 
 @Component({
-  selector: 'simple-demo'
+  selector: 'simple-demo',
-})
-@View({
   template: template,
-  directives: [FileSelect, FileDrop, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
+  directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
 export class SimpleDemo {
   private uploader:FileUploader = new FileUploader({url: URL});

demo/index.html

@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-  <link rel="author" href="https://github.com/valor-software/ng2-bootstrap/graphs/contributors">
+  <link rel="author" href="https://github.com/valor-software/ng2-file-upload/graphs/contributors">
 
   <!--link to bootstrap.css-->
   <link rel="stylesheet" href="assets/css/prism-okaidia.css">

demo/index.ts

@@ -1,5 +1,7 @@
 /// <reference path="../tsd.d.ts" />
-import {Component, View, bootstrap, NgClass} from 'angular2/angular2';
+import {bootstrap} from 'angular2/platform/browser';
+import {Component, View} from 'angular2/core';
+import {NgClass} from 'angular2/common';
 
 import {FileUploadSection} from './components/file-upload-section';
 

ng2-file-upload.ts

@@ -2,3 +2,7 @@ export * from  './components/file-upload/file-select';
 export * from  './components/file-upload/file-drop';
 export * from  './components/file-upload/file-uploader';
 
+import {FileSelect} from './components/file-upload/file-select';
+import {FileDrop} from './components/file-upload/file-drop';
+
+export const FILE_UPLOAD_DIRECTIVES:[any] = [FileSelect, FileDrop];

package.json

@@ -1,11 +1,10 @@
 {
   "name": "ng2-file-upload",
-  "version": "0.46.0",
+  "version": "1.0.0-beta.0",
   "description": "angular2 file upload directives",
   "scripts": {
     "deploy": "NODE_ENV=production webpack -p --progress --color --optimize-minimize --optimize-dedupe --optimize-occurence-order",
     "prepublish": "gulp clean && tsc",
-    "prestart": "npm install",
     "server": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
     "start": "npm run server",
     "test": "gulp lint"
@@ -28,16 +27,15 @@
     "url": "https://github.com/valor-software/ng2-file-upload/issues"
   },
   "homepage": "https://github.com/valor-software/ng2-file-upload#readme",
-  "dependencies": {
+  "dependencies": {},
-    "angular2": "2.0.0-alpha.46",
-    "reflect-metadata": "0.1.2",
-    "@reactivex/rxjs": "5.0.0-alpha.7",
-    "zone.js": "0.5.8"
-  },
   "devDependencies": {
+    "angular2": "2.0.0-beta.0",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.0",
+    "zone.js": "0.5.10",
+    "es6-shim": "0.33.13",
     "bootstrap": "3.3.6",
-    "ng2-bootstrap": "0.46.0",
+    "clean-webpack-plugin": "0.1.5",
-    "clean-webpack-plugin": "0.1.4",
     "compression-webpack-plugin": "0.2.0",
     "eslint": "1.10.3",
     "exports-loader": "0.6.2",
@@ -47,19 +45,21 @@
     "gulp-eslint": "1.1.1",
     "gulp-size": "2.0.0",
     "gulp-tsc": "1.1.4",
-    "gulp-tslint": "4.1.0",
+    "gulp-tslint": "4.2.2",
     "html-loader": "0.4.0",
     "markdown-loader": "0.1.7",
     "marked": "0.3.5",
-    "moment": "2.10.6",
+    "moment": "2.11.0",
+    "ng2-bootstrap": "1.0.0-beta.2",
     "pre-commit": "1.1.2",
     "prismjs": "valorkin/prism",
     "prismjs-loader": "0.0.2",
     "raw-loader": "0.5.1",
     "require-dir": "0.3.0",
-    "typescript": "1.7.3",
     "ts-loader": "0.7.2",
-    "webpack": "1.12.9",
+    "tslint": "3.2.1",
+    "typescript": "1.7.5",
+    "webpack": "1.12.10",
     "webpack-dev-server": "1.14.0"
   },
   "contributors": [

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.2",
+  "version": "1.7.5",
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",

webpack.config.js

@@ -48,9 +48,9 @@ var config = {
   entry: {
     angular2: [
       // Angular 2 Deps
-      'zone.js',
+      'zone.js/dist/zone-microtask',
       'reflect-metadata',
-      'angular2/angular2',
+      'angular2/common',
       'angular2/core'
     ],
     'angular2-file-upload': ['ng2-file-upload'],
@@ -93,7 +93,7 @@ var config = {
   module: {
     loaders: [
       // support markdown
-      {test: /\.md$/, loader: 'html!markdown'},
+      {test: /\.md$/, loader: 'html?minimize=false!markdown'},
 
       // Support for *.json files.
       {test: /\.json$/, loader: 'json'},