Merge pull request valor-software#393 from valor-software/feat-rc7

feat(core) add ng2-webpack-config

.gitignore

@@ -8,6 +8,7 @@ npm-debug.log
 
 # WebStorm
 .idea
+.vscode
 
 # ignore build and dist for now
 /bundles
@@ -19,6 +20,7 @@ npm-debug.log
 # ignore incline compiling
 /demo/**/*.js
 /demo/**/*.d.ts
+!/demo/custom-typings.d.ts
 /demo/**/*.js.map
 /components/**/*.js
 /components/**/*.d.ts

.ng2-config.js

@@ -0,0 +1,29 @@
+'use strict';
+var pkg = require('./package.json');
+
+module.exports = {
+  // metadata
+  title: pkg.description,
+  baseUrl: '/',
+  // root folder name
+  src: 'demo',
+  dist: 'demo-build',
+  htmlIndexes: ['index.html'],
+  // karma bundle src
+  spec: './spec-bundle.js',
+  // webpack entry
+  entry: {
+    polyfills: './demo/polyfills.ts',
+    vendor: './demo/vendor.ts',
+    main: './demo/index.ts'
+  },
+  commonChunks: {
+    name: ['polyfills', 'vendor'].reverse()
+  },
+  // webpack alias
+  alias: {},
+  copy: [
+    {from: 'demo/favicon.ico', to: 'favicon.ico'},
+    {from: 'demo/assets', to: 'assets'}
+  ]
+};

.travis.yml

@@ -2,12 +2,14 @@ language: node_js
 node_js:
   - "6"
 
+before_install: npm i -g npm@latest
+
 script:
   - npm run flow.install:typings
   - npm test
 
 after_success:
-  - ./node_modules/.bin/codecov
+  - ./node_modules/.bin/codecov  -f coverage/coverage-final.json
 
 addons:
   # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ )

components/file-upload/file-drop.directive.spec.ts

@@ -1,20 +1,27 @@
-import {Component} from '@angular/core';
-import {it, inject, beforeEachProviders} from '@angular/core/testing';
-import {ComponentFixture} from '@angular/compiler/testing';
-import {FileUploader} from './file-uploader.class';
-import {FileSelectDirective} from './file-select.directive';
+import { Component } from '@angular/core';
+import { inject, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileUploader } from './file-uploader.class';
+import { FileUploadModule } from './file-upload.module';
+
 @Component({
   selector: 'container',
-  template: `<input type="file" ng2FileSelect [uploader]="uploader" />`,
-  directives: [FileSelectDirective]
+  template: `<input type="file" ng2FileSelect [uploader]="uploader" />`
 })
 export class ContainerComponent {
   public uploader:FileUploader = new FileUploader({url: 'localhost:3000'});
 }
+
 describe('Directive: FileSelectDirective', () => {
-  beforeEachProviders(() => [
-    ContainerComponent
-  ]);
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FileUploadModule],
+      declarations: [ContainerComponent],
+      providers: [ContainerComponent]
+    });
+  });
+
   it('should be fine', inject([ContainerComponent], (fixture:ComponentFixture<ContainerComponent>) => {
     expect(fixture).not.toBeNull();
   }));

components/file-upload/file-drop.directive.ts

@@ -9,6 +9,7 @@ export class FileDropDirective {
   @Output() public onFileDrop:EventEmitter<File[]> = new EventEmitter<File[]>();
 
   private element:ElementRef;
+
   public constructor(element:ElementRef) {
     this.element = element;
   }
@@ -80,12 +81,13 @@ export class FileDropDirective {
       return false;
     }
   }
-/*
-  _addOverClass(item:any):any {
-    item.addOverClass();
-  }
 
-  _removeOverClass(item:any):any {
-    item.removeOverClass();
-  }*/
+  /*
+   _addOverClass(item:any):any {
+   item.addOverClass();
+   }
+
+   _removeOverClass(item:any):any {
+   item.removeOverClass();
+   }*/
 }

components/file-upload/file-item.class.ts

@@ -1,5 +1,5 @@
-import {FileLikeObject} from './file-like-object.class';
-import {FileUploader, ParsedResponseHeaders, FileUploaderOptions} from './file-uploader.class';
+import { FileLikeObject } from './file-like-object.class';
+import { FileUploader, ParsedResponseHeaders, FileUploaderOptions } from './file-uploader.class';
 
 export class FileItem {
   public file:FileLikeObject;
@@ -67,19 +67,19 @@ export class FileItem {
   }
 
   public onSuccess(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response,status,headers};
+    return {response, status, headers};
   }
 
   public onError(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response,status,headers};
+    return {response, status, headers};
   }
 
   public onCancel(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response,status,headers};
+    return {response, status, headers};
   }
 
   public onComplete(response:string, status:number, headers:ParsedResponseHeaders):any {
-    return {response,status,headers};
+    return {response, status, headers};
   }
 
   public _onBeforeUpload():void {

components/file-upload/file-like-object.class.ts

@@ -23,7 +23,7 @@ export class FileLikeObject {
     this.name = path.slice(path.lastIndexOf('/') + path.lastIndexOf('\\') + 2);
   }
 
-  public _createFromObject(object:{size: number, type: string, name: string}):void {
+  public _createFromObject(object:{size:number, type:string, name:string}):void {
     // this.lastModifiedDate = copy(object.lastModifiedDate);
     this.size = object.size;
     this.type = object.type;

components/file-upload/file-select.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input, HostListener } from '@angular/core';
 
-import {FileUploader} from './file-uploader.class';
+import { FileUploader } from './file-uploader.class';
 
 // todo: filters
 
@@ -9,6 +9,7 @@ export class FileSelectDirective {
   @Input() public uploader:FileUploader;
 
   private element:ElementRef;
+
   public constructor(element:ElementRef) {
     this.element = element;
   }

components/file-upload/file-upload.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FileDropDirective } from './file-drop.directive';
+import { FileSelectDirective } from './file-select.directive';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [FileDropDirective, FileSelectDirective],
+  exports: [FileDropDirective, FileSelectDirective]
+})
+export class FileUploadModule {
+}

components/file-upload/file-uploader.class.ts

@@ -1,6 +1,6 @@
-import {FileLikeObject} from './file-like-object.class';
-import {FileItem} from './file-item.class';
-import {FileType} from './file-type.class';
+import { FileLikeObject } from './file-like-object.class';
+import { FileItem } from './file-item.class';
+import { FileType } from './file-type.class';
 
 function isFile(value:any):boolean {
   return (File && value instanceof File);
@@ -295,13 +295,13 @@ export class FileUploader {
     if (typeof item._file.size !== 'number') {
       throw new TypeError('The file specified is no longer valid');
     }
-    if(!this.options.disableMultipart) {
-        sendable = new FormData();
-        this._onBuildItemForm(item, sendable);
+    if (!this.options.disableMultipart) {
+      sendable = new FormData();
+      this._onBuildItemForm(item, sendable);
 
-        sendable.append(item.alias, item._file, item.file.name);
+      sendable.append(item.alias, item._file, item.file.name);
     } else {
-        sendable = item._file;
+      sendable = item._file;
     }
 
     xhr.upload.onprogress = (event:any) => {

components/file-upload/readme.md

@@ -1,6 +1,6 @@
 ### Usage
 ```typescript
-import {FileSelectDirective, FileDropDirective, FileUploader} from 'ng2-file-upload/ng2-file-upload';
+import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
 ```
 
 ### Annotations

demo/app.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+let gettingStarted = require('./getting-started.md');
+
+@Component({
+  selector: 'app',
+  template: `
+  <main class="bd-pageheader">
+    <div class="container">
+      <h1>ng2-file-upload</h1>
+      <p>The Angular2 File Upload directives</p>
+      <a class="btn btn-primary" href="https://github.com/valor-software/ng2-file-upload">View on GitHub</a>
+      <div class="row">
+        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
+        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-file-upload&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
+      </div>
+    </div>
+  </main>
+
+  <div class="container">
+    <section id="getting-started">${gettingStarted}</section>
+
+    <file-upload-section class="col-md-12"></file-upload-section>
+  </div>
+
+  <footer class="footer">
+    <div class="container">
+      <p class="text-muted text-center"><a href="https://github.com/valor-software/ng2-file-upload">ng2-file-upload</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
+    </div>
+  </footer>
+  `
+})
+export class DemoComponent {
+}

demo/components/file-upload-section.ts

@@ -1,10 +1,5 @@
-import {Component} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
+import { Component } from '@angular/core';
 
-import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
-import {SimpleDemoComponent} from './file-upload/simple-demo';
-
-let name = 'File Upload';
 let doc = require('../../components/file-upload/readme.md');
 
 let tabDesc:Array<any> = [
@@ -16,62 +11,55 @@ let tabDesc:Array<any> = [
   }
 ];
 
-let tabsContent:string = ``;
-tabDesc.forEach((desc:any) => {
-  tabsContent += `
-          <tab heading="${desc.heading}" (select)="select($event)">
+@Component({
+  selector: 'file-upload-section',
+  template: `
+  <section [id]="name.toLowerCase()">
+    <div class="row">
+      <tabset>
+         <tab *ngFor="let desc of tabs" heading="{{desc.heading}}" (select)="select($event)">
           <div class="card card-block panel panel-default panel-body">
 
-            <${desc.heading.toLowerCase()}-demo *ngIf="currentHeading === '${desc.heading}'"></${desc.heading.toLowerCase()}-demo>
+            <simple-demo></simple-demo>
 
             <br>
 
             <div class="row" style="margin: 0px;">
               <tabset>
                 <tab heading="Markup">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-html"><code class="language-html" ng-non-bindable>${desc.html}</code></pre>
+                    <pre class="language-html"><code class="language-html" ng-non-bindable [innerHTML]="desc.html"></code></pre>
                   </div>
                 </tab>
                 <tab heading="TypeScript">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-typescript"><code class="language-typescript" ng-non-bindable>${desc.ts}</code></pre>
+                    <pre class="language-typescript"><code class="language-typescript" ng-non-bindable [innerHTML]="desc.ts"></code></pre>
                   </div>
                 </tab>
                 <tab heading="Backend Demo">
                   <div class="card card-block panel panel-default panel-body">
-                    <pre class="language-javascript"><code class="language-javascript" ng-non-bindable>${desc.js}</code></pre>
+                    <pre class="language-javascript"><code class="language-javascript" ng-non-bindable [innerHTML]="desc.js"></code></pre>
                   </div>
                 </tab>
               </tabset>
             </div>
           </div>
         </tab>
-  `;
-});
-
-@Component({
-  selector: 'file-upload-section',
-  template: `
-  <section id="${name.toLowerCase()}">
-    <div class="row">
-      <tabset>
-
-        ${tabsContent}
-
       </tabset>
     </div>
 
     <div class="row">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
+      <div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
     </div>
   </section>
-  `,
-  directives: [SimpleDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+  `
 })
 export class FileUploadSectionComponent {
+  public name:string = 'File Upload';
   public currentHeading:string = 'Simple';
+  public doc:string = doc;
+  public tabs:any = tabDesc;
 
   public select(e:any):void {
     if (e.heading) {

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

@@ -1,6 +1,5 @@
-import {Component} from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from '@angular/common';
-import {FILE_UPLOAD_DIRECTIVES, FileUploader} from '../../../ng2-file-upload';
+import { Component } from '@angular/core';
+import { FileUploader } from '../../../ng2-file-upload';
 
 // webpack html imports
 let template = require('./simple-demo.html');
@@ -10,8 +9,7 @@ const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
 
 @Component({
   selector: 'simple-demo',
-  template: template,
-  directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
+  template: template
 })
 export class SimpleDemoComponent {
   public uploader:FileUploader = new FileUploader({url: URL});

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

@@ -1,5 +1,5 @@
-import {Component, ElementRef, Renderer, Input, HostListener, HostBinding, OnInit} from '@angular/core';
-import {FileUploader, FileUploaderOptions} from '../../../../ng2-file-upload';
+import { Component, ElementRef, Renderer, Input, HostListener, HostBinding, OnInit } from '@angular/core';
+import { FileUploader, FileUploaderOptions } from '../../../../ng2-file-upload';
 
 @Component({
   selector: 'demo-file-upload',

demo/custom-typings.d.ts

@@ -0,0 +1 @@
+declare const ENV:string;