New way of build

qjon · qjon · commit 550c97f2f2f2 · 2018-03-04T08:37:20.000+01:00
diff --git a/README.md b/README.md
@@ -1,21 +1,23 @@
+# angular2-tree
+
+Simple component to display tree structure
+
 [![npm (scoped)](https://img.shields.io/npm/v/@rign/angular2-tree.svg)]()
 [![Build Status](https://travis-ci.org/qjon/angular2-tree.svg?branch=master)](https://travis-ci.org/qjon/angular2-tree)
 [![npm version](https://badge.fury.io/js/%40rign%2Fangular2-tree.svg)](https://badge.fury.io/js/%40rign%2Fangular2-tree.svg)
 [![npm](https://img.shields.io/npm/dm/@rign\/angular2-tree.svg)](https://img.shields.io/npm/dm/@rign\/angular2-tree.svg)
 [![npm](https://img.shields.io/npm/l/@rign\/angular2-tree.svg)](https://github.com/qjon/angular2-tree/blob/master/LICENSE)
 
-# angular2-tree
-
 ## Installation
 
     npm i @rign/angular2-tree
    
 
 ## Usage
     
-Include _TreeModule_  in your application module and create Store with empty state and initialize Effects
+Include _TreeModule_  in your application module and create Store with empty state and initialize Effects. 
 
-    import {TreeModule} from '@rign/angular2-tree/main';
+    import {TreeModule} from '@rign/angular2-tree';
     
     @NgModule({
       declarations: [
@@ -29,14 +31,15 @@ Include _TreeModule_  in your application module and create Store with empty sta
       ]
     })
     
-You need also init translations module, because Tree needs it to translate all labels. 
+You need also init translations and animations module, because Tree needs it to translate all labels and animate expanding and collapsing. 
 
     @NgModule({
       declarations: [
         ...
       ],
       imports: [
         ...
+        BrowserAnimationsModule,
         TranslationModule.forRoot(),
         TreeModule.forRoot()
       ]
@@ -103,6 +106,18 @@ In component where you create tree, you should register _tree store_, create _Tr
       }
     }
 
+### CSS Styles
+
+To load default CSS styles and makes our tree looks nice you have to add 2 CSS files to your _angular-cli.json_ file:
+
+    ...
+    "styles": [
+      "../node_modules/bootstrap/dist/css/bootstrap.css",
+      "../node_modules/font-awesome/css/font-awesome.css",
+      "../node_modules/@rign/angular2-tree/styles.css",
+      "styles.css"
+    ],
+  
 
 ### Create own item template
 
@@ -233,6 +248,10 @@ At the end do not forget to add this effects to your app.
  
 ## Changes
 
+### v2.3.0
+* fix problem with building tree component in AOT
+* fix few small issues
+
 ### v2.2.0
 * add _forRoot_ static method
 * change translation module to _ng2-translate_
@@ -302,6 +321,9 @@ At the end do not forget to add this effects to your app.
 ## Demo
 
 Working demo with _local storage_ you can find [here](https://qjon.github.io/angular2-tree/).
+To run Demo locally clone this repository and run
+
+    npm start
 
 ## License
 
diff --git a/config/inlineAssets.js b/config/inlineAssets.js
diff --git a/config/package.json b/config/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@rign/angular2-tree",
+  "version": "2.3.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "ng serve",
+    "build": "ng build",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "test": "./node_modules/.bin/karma --config karma.conf.js start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/qjon/angular2-tree.git"
+  },
+  "main": "./bundles/angular2-teee.umd.min.js",
+  "module": "./esm5/angular2-tree.es5.js",
+  "es2015": "./esm2015/angular2-tree.es2015.js",
+  "typings": "./angular2-tree.d.ts",
+  "author": "Rafal Ignaszewski <rafal@ignaszewski.pl> http://ignaszewski.pl",
+  "dependencies": {
+    "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^2.0.0-beta.12",
+    "@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/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.0.0",
+    "@ngrx/core": "^1.2.0",
+    "@ngrx/effects": "^5.1.0",
+    "@ngrx/store": "^5.1.0",
+    "@ngrx/store-devtools": "^4.0.0",
+    "angular2-uuid": "^1.1.1",
+    "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
+    "font-awesome": "^4.6.3",
+    "ng2-dnd": "^2.2.2",
+    "ng2-translate": "^5.0.0",
+    "ngx-contextmenu": "^2.0.0-beta.6",
+    "rxjs": "^5.5.6",
+    "zone.js": "^0.8.4"
+  },
+  "devDependencies": {
+  }
+}
diff --git a/config/rollup-esm2015.conf.js b/config/rollup-esm2015.conf.js
diff --git a/config/rollup-esm5.conf.js b/config/rollup-esm5.conf.js
diff --git a/config/rollup-umd.conf.js b/config/rollup-umd.conf.js
@@ -94,5 +94,5 @@ export default {
     'rxjs/Observable',
     'rxjs/Subscription',
     'ngx-contextmenu'
-  ],
+  ]
 }
diff --git a/config/tsconfig-es2015.json b/config/tsconfig-es2015.json
@@ -3,29 +3,29 @@
     "declaration": true,
     "module": "es2015",
     "target": "es2015",
-    "baseUrl": "./tmp",
+    "baseUrl": "../tmp",
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
-    "outDir": "./tmp/esm2015",
-    "rootDir": "./tmp",
+    "outDir": "../tmp/esm2015",
+    "rootDir": "../tmp",
     "skipLibCheck": true,
     "lib": [
       "es2015",
       "dom"
     ]
   },
   "files": [
-    "./tmp/public_api.ts"
+    "../tmp/public_api.ts"
   ],
   "exclude": [
-    "./node_modules"
+    "../node_modules"
   ],
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "skipTemplateCodegen": true,
     "flatModuleOutFile": "angular2-tree.js",
-    "flatModuleId": "angular2-tree"
+    "flatModuleId": "@rign/angular2-tree"
   }
 }
diff --git a/config/tsconfig-esm5.json b/config/tsconfig-esm5.json
@@ -2,14 +2,14 @@
   "extends": "./tsconfig-es2015.json",
   "compilerOptions": {
     "target": "es5",
-    "outDir": "./tmp/esm5",
-    "rootDir": "./tmp"
+    "outDir": "../tmp/esm5",
+    "rootDir": "../tmp"
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "skipTemplateCodegen": true,
     "flatModuleOutFile": "angular2-tree.js",
-    "flatModuleId": "angular2-tree"
+    "flatModuleId": "@rign/angular2-tree"
   }
 }
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -9,7 +9,7 @@ import {HttpClientModule} from '@angular/common/http';
 import {StoreModule} from '@ngrx/store';
 import {EffectsModule} from '@ngrx/effects';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {TreeModule} from '../../../src/tree.module';
+import {TreeModule} from '../../../main';
 import {DndModule} from 'ng2-dnd';
 
 @NgModule({
diff --git a/demo/src/app/treeOne/treeOne.module.ts b/demo/src/app/treeOne/treeOne.module.ts
@@ -1,18 +1,18 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {HttpModule} from '@angular/http';
 import {TreeModule} from '../../../../main';
 import {TreeOneNodeService} from './treeOneNode.service';
 import {TreeOneComponent} from './treeOne.component';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [TreeOneComponent],
   exports: [TreeOneComponent],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     TreeModule
   ],
   providers: [TreeOneNodeService]
diff --git a/demo/src/app/treeTwo/newItem.component.html b/demo/src/app/treeTwo/newItem.component.html
@@ -12,7 +12,7 @@
     <span *ngIf="!isEditMode" class="tree-item-name" (click)="onSelect()">{{node.name}}</span>
     <form name="form">
       <input #inputElement type="text" class="form-control" *ngIf="isEditMode" [formControl]="nameField"
-             name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
+             name="name" (keydown)="onChange($event)" (blur)="onBlur()"/>
     </form>
   </div>
   <div class="col-sm-4 text-right">
diff --git a/demo/src/app/treeTwo/treeTwo.component.ts b/demo/src/app/treeTwo/treeTwo.component.ts
@@ -1,5 +1,14 @@
 import {Component, OnInit} from '@angular/core';
-import {IConfiguration, IContextMenu, ITreeState, ITreeData, TreeModel, TreeActionsService, NodeDispatcherService, treeStateSelector} from '../../../../main';
+import {
+  IConfiguration,
+  IContextMenu,
+  ITreeData,
+  ITreeState,
+  NodeDispatcherService,
+  TreeActionsService,
+  TreeModel,
+  treeStateSelector
+} from '../../../../main';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs/Observable';
 import {TreeTwoNodeService} from './treeTwoNode.service';
diff --git a/demo/src/app/treeTwo/treeTwo.module.ts b/demo/src/app/treeTwo/treeTwo.module.ts
@@ -1,12 +1,12 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {HttpModule} from '@angular/http';
 import {TreeModule} from '../../../../main';
 import {TreeTwoComponent} from './treeTwo.component';
 import {NewItemComponent} from './newItem.component';
 import {TreeTwoNodeService} from './treeTwoNode.service';
 import {TreeLocalStorageModule} from '../localStorage/treeLocalStorage.module';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -17,7 +17,7 @@ import {TreeLocalStorageModule} from '../localStorage/treeLocalStorage.module';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     TreeLocalStorageModule,
     ReactiveFormsModule,
     TreeModule
diff --git a/demo/src/tsconfig.json b/demo/src/tsconfig.json
@@ -18,5 +18,9 @@
     "typeRoots": [
       "../node_modules/@types"
     ]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictMetadataEmit": true
   }
 }
diff --git a/karma.conf.js b/karma.conf.js
@@ -29,6 +29,6 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: true
   });
 };
diff --git a/main.ts b/main.ts
@@ -13,3 +13,7 @@ export * from './src/service/nodesDispatcher.service';
 export * from './src/store/treeEffects.service';
 export * from './src/store/ITreeState';
 export * from './src/store/treeReducer'
+export * from './src/dragAndDrop/dragAndDrop.service';
+export * from './src/dragAndDrop/draggable.directive';
+export * from './src/dragAndDrop/droppable.directive';
+export * from './src/dragAndDrop/dropzone/dropzone.component';
diff --git a/package.json b/package.json
@@ -5,21 +5,22 @@
   "angular-cli": {},
   "scripts": {
     "start": "ng serve",
-    "build": "npm run clean:all && npm run build:inline && npm run build:esm2015 && npm run build:fesm2015 && npm run build:esm5 && npm run build:fesm5 && npm run build:umd && npm run build:min && npm run move:assets && npm run clean:tmp",
-    "build:inline": "rm -rf ./tmp && rsync -a --exclude *spec.ts *.ts  ./tmp & node inlineAssets.js",
-    "build:esm2015": "ngc -p tsconfig-es2015.json",
-    "build:fesm2015": "rollup -c rollup-esm2015.conf.js",
-    "build:esm5": "ngc -p tsconfig-esm5.json",
-    "build:fesm5": "rollup -c rollup-esm5.conf.js",
-    "build:umd": "rollup -c rollup-umd.conf.js",
+    "build": "npm run clean:all && npm run build:inline && npm run build:esm2015 && npm run build:fesm2015 && npm run build:esm5 && npm run build:fesm5 && npm run build:umd && npm run build:min && npm run move:assets && npm run less && npm run clean:tmp",
+    "build:inline": "rm -rf ./tmp && rsync -a --exclude *spec.ts *.ts  ./tmp & node config/inlineAssets.js",
+    "build:esm2015": "ngc -p config/tsconfig-es2015.json",
+    "build:fesm2015": "rollup -c config/rollup-esm2015.conf.js",
+    "build:esm5": "ngc -p config/tsconfig-esm5.json",
+    "build:fesm5": "rollup -c config/rollup-esm5.conf.js",
+    "build:umd": "rollup -c config/rollup-umd.conf.js",
     "build:min": "uglifyjs dist/bundles/angular2-tree.umd.js -c -m -o dist/bundles/angular2-tree.umd.min.js",
-    "move:assets": "cpx \"./tmp/esm2015/src/**/*.d.ts\" dist/src && copyfiles -up 1 tmp/esm2015/*.d.ts tmp/esm2015/*.json dist && copyfiles README.md package.json dist",
+    "move:assets": "cpx \"./tmp/esm2015/src/**/*.d.ts\" dist/src && copyfiles -up 1 tmp/esm2015/*.d.ts tmp/esm2015/*.json dist && copyfiles README.md npm-package.json dist && copyfiles -up 1 config/package.json dist",
+    "less": "lessc ./src/styles.less ./dist/styles.css",
     "clean:all": "rimraf dist/ && npm run clean:tmp",
     "clean:tmp": "rimraf tmp/",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "test": "./node_modules/.bin/karma --config karma.conf.js start",
-    "gh-pages": "ng build --env=prod --base-href \"https://qjon.github.io/angular2-tree/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"rafal@ignaszewski.pl\" --no-silent"
+    "gh-pages": "ng build --prod --base-href \"https://qjon.github.io/angular2-tree/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"rafal@ignaszewski.pl\" --no-silent"
   },
   "repository": {
     "type": "git",
@@ -76,6 +77,7 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-diff-reporter": "^1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "less": "^3.0.1",
     "ng2-inline-template": "^0.1.1",
     "protractor": "~5.1.2",
     "rollup": "^0.56.3",
diff --git a/src/dragAndDrop/dropzone/dropzone.component.html b/src/dragAndDrop/dropzone/dropzone.component.html
@@ -1,3 +1,3 @@
-<div *ngIf="isOpen$ | async" (drop)="onDrop($event)" (dragover)="onDragOver($event)" class="dropzone">
+<div *ngIf="isOpen$ | async" (drop)="onDrop()" (dragover)="onDragOver($event)" class="dropzone">
   {{'RI_TREE_LBL_DROP_ZONE' | translate}}
 </div>
diff --git a/src/item/item.component.html b/src/item/item.component.html
@@ -12,7 +12,7 @@
   <span *ngIf="!isEditMode" class="tree-item-name" (click)="onSelect()">{{node.name}}</span>
   <form name="form">
     <input #inputElement type="text" class="form-control" *ngIf="isEditMode" [formControl]="nameField"
-           name="name" (keydown)="onChange($event)" (blur)="onBlur($event)"/>
+           name="name" (keydown)="onChange($event)" (blur)="onBlur()"/>
   </form>
 </div>
 <div class="tree" [@isExpanded]="animationState" (@isExpanded.done)="onAnimationDone($event)">

Original file line number	Diff line number	Diff line change
`@@ -94,5 +94,5 @@ export default {`
`94`	`94`	`'rxjs/Observable',`
`95`	`95`	`'rxjs/Subscription',`
`96`	`96`	`'ngx-contextmenu'`
`97`		`- ],`
	`97`	`+ ]`
`98`	`98`	`}`