Initial commit

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "ngx-flowchart": {
+    "ngx-flowchart-demo": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/ngx-flowchart",
+            "outputPath": "dist/ngx-flowchart-demo",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -61,18 +61,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ngx-flowchart:build"
+            "browserTarget": "ngx-flowchart-demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ngx-flowchart:build:production"
+              "browserTarget": "ngx-flowchart-demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ngx-flowchart:build"
+            "browserTarget": "ngx-flowchart-demo:build"
           }
         },
         "test": {
@@ -109,15 +109,55 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "ngx-flowchart:serve"
+            "devServerTarget": "ngx-flowchart-demo:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "ngx-flowchart-demo:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "ngx-flowchart": {
+      "projectType": "library",
+      "root": "projects/ngx-flowchart",
+      "sourceRoot": "projects/ngx-flowchart/src",
+      "prefix": "fc",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/ngx-flowchart/tsconfig.lib.json",
+            "project": "projects/ngx-flowchart/ng-package.json"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "ngx-flowchart:serve:production"
+              "project": "projects/ngx-flowchart/ng-package.prod.json"
             }
           }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ngx-flowchart/src/test.ts",
+            "tsConfig": "projects/ngx-flowchart/tsconfig.spec.json",
+            "karmaConfig": "projects/ngx-flowchart/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/ngx-flowchart/tsconfig.lib.json",
+              "projects/ngx-flowchart/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
         }
       }
     }},
-  "defaultProject": "ngx-flowchart"
-}
+  "defaultProject": "ngx-flowchart-demo"
+}
\ No newline at end of file

package.json

 {
-  "name": "ngx-flowchart",
+  "name": "ngx-flowchart-demo",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
+    "build": "ng build ngx-flowchart --prod",
+    "test": "ng test ngx-flowchart",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.800.0",
+    "@angular-devkit/build-ng-packagr": "~0.800.6",
     "@angular/cli": "~8.0.1",
     "@angular/compiler-cli": "~8.0.0",
     "@angular/language-service": "~8.0.0",
@@ -39,8 +40,10 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
+    "ng-packagr": "^5.1.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
+    "tsickle": "^0.35.0",
     "tslint": "~5.15.0",
     "typescript": "~3.4.3"
   }

projects/ngx-flowchart/README.md

+# NgxFlowchart
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.3.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ngx-flowchart` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-flowchart`.
+> Note: Don't forget to add `--project ngx-flowchart` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ngx-flowchart` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ngx-flowchart`, go to the dist folder `cd dist/ngx-flowchart` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ngx-flowchart` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

projects/ngx-flowchart/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ngx-flowchart'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/ngx-flowchart/ng-package.json

+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-flowchart",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ngx-flowchart/ng-package.prod.json

+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-flowchart",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ngx-flowchart/package.json

+{
+  "name": "ngx-flowchart",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^8.0.3",
+    "@angular/core": "^8.0.3"
+  }
+}
\ No newline at end of file

projects/ngx-flowchart/src/lib/ngx-flowchart.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgxFlowchartComponent } from './ngx-flowchart.component';
+
+describe('NgxFlowchartComponent', () => {
+  let component: NgxFlowchartComponent;
+  let fixture: ComponentFixture<NgxFlowchartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NgxFlowchartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NgxFlowchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-flowchart/src/lib/ngx-flowchart.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fc-canvas',
+  template: `
+    <p>
+      ngx-flowchart works!
+    </p>
+  `,
+  styles: []
+})
+export class NgxFlowchartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/ngx-flowchart/src/lib/ngx-flowchart.module.ts

+import { NgModule } from '@angular/core';
+import { NgxFlowchartComponent } from './ngx-flowchart.component';
+
+@NgModule({
+  declarations: [NgxFlowchartComponent],
+  imports: [
+  ],
+  exports: [NgxFlowchartComponent]
+})
+export class NgxFlowchartModule { }

projects/ngx-flowchart/src/lib/ngx-flowchart.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { NgxFlowchartService } from './ngx-flowchart.service';
+
+describe('NgxFlowchartService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: NgxFlowchartService = TestBed.get(NgxFlowchartService);
+    expect(service).toBeTruthy();
+  });
+});

projects/ngx-flowchart/src/lib/ngx-flowchart.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgxFlowchartService {
+
+  constructor() { }
+}

projects/ngx-flowchart/src/public-api.ts

+/*
+ * Public API Surface of ngx-flowchart
+ */
+
+export * from './lib/ngx-flowchart.service';
+export * from './lib/ngx-flowchart.component';
+export * from './lib/ngx-flowchart.module';

projects/ngx-flowchart/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/ngx-flowchart/tsconfig.lib.json

+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/ngx-flowchart/tsconfig.spec.json

+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/ngx-flowchart/tslint.json

+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "fc",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "fc",
+      "kebab-case"
+    ]
+  }
+}

src/app/app.component.html

@@ -5,16 +5,6 @@
   </h1>
   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<div>
+  <fc-canvas></fc-canvas>
+</div>

src/app/app.module.ts

@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { NgxFlowchartModule } from 'ngx-flowchart';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    NgxFlowchartModule
   ],
   providers: [],
   bootstrap: [AppComponent]

tsconfig.json

@@ -17,6 +17,14 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "ngx-flowchart": [
+        "dist/ngx-flowchart"
+      ],
+      "ngx-flowchart/*": [
+        "dist/ngx-flowchart/*"
+      ]
+    }
   }
-}
+}
\ No newline at end of file