Fix tests and add documentation

README.md

@@ -1,2 +1,128 @@
 # ngx-modal
-Dynamic modal dialog for Angular
+[![Build Status](https://travis-ci.org/Greentube/ngx-modal.svg?branch=master)](https://travis-ci.org/Greentube/ngx-modal)
+> Dynamic modal dialog for Angular
+
+# Table of contents:
+- [Installation](#installation)
+- [How it works](#how-it-works)
+- [Usage](#usage)
+- [API](#api)
+    - [ModalDialogService](#modaldialogservice)
+    - [IModalDialog](#imodaldialog)
+    - [IModalDialogOptions](#imodaldialogoptions)
+    - [IModalDialogButton](#imodaldialogbutton)
+    - [IModalDialogSettings](#imodaldialogsettings)
+- [License](#license)
+
+## Installation
+
+**SOON!**
+```
+npm install --save @greentube/ngx-modal
+```
+## How it works
+Modal dialog uses `ComponentFactoryResolver` to inject new child component wrapped in modal dialog to parent component.
+[ModalDialogService](#modaldialogservice) makes sure that only one instance of modal dialog is opened at a time.
+[IModalDialogOptions](#imodaldialogoptions) give you possibility to defined which child component will be rendered inside the wrapper and configure it based on your needs. 
+
+## Usage
+
+1. Include the `ngx-modal` module in your application at any place. Recommended is to add `forRoot` initialization in main app module.
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { ModalDialogModule } from '@greentube/ngx-modal';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        ModalDialogModule.forRoot()
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+2. Create custom component that implements `IModalDialog` or use `SimpleModalDialog` as a child component.
+
+3. Open modal dialog by using `ModalDialogService` and passing parent `ViewContainerRef` and `IModalDialogOptions`:
+```ts
+constructor(modalService: ModalDialogService, viewRef: ViewContainerRef) { }
+
+openNewDialog() {
+  this.modalService.openDialog(this.viewRef, {
+    title: 'Some modal title',
+    childComponent: SimpleModalComponent
+  });    
+}
+```
+## API
+
+### ModalDialogService
+#### Methods:
+- `openDialog(target: ViewContainerRef, dialogOptions?: IModalDialogOptions)`: Closes existing and opens new modal dialog according to IModalDialogOptions.
+
+### IModalDialog
+Every component that is used as modal dialog must implement `IModalDialog`.
+#### Methods:
+- `dialogInit(reference: ComponentRef<IModalDialog>, options?: IModalDialogOptions) => void`: This method is called after initialization of child component. Purpose of the method is to pass necessary information from outer scope to child component.
+
+### IModalDialogOptions
+#### Interface definition
+```ts
+interface IModalDialogOptions {
+  title?: string;
+  childComponent?: any;
+  onClose?: () => Promise<any> | Observable<any> | boolean;
+  actionButtons?: IModalDialogButton[];
+  data?: any;
+  settings?: IModalDialogSettings;
+}
+```
+
+### IModalDialogButton
+#### Interface definition
+```ts
+interface IModalDialogButton {
+  text: string;
+  buttonClass?: string;
+  onAction?: () => Promise<any> | Observable<any> | boolean;
+}
+```
+#### Properties
+##### text
+Mandatory: `true`
+Default: -
+Type: `string`
+Caption/text on the button
+##### buttonClass
+Mandatory: `false`
+Default: `btn btn-primary`
+Type: `string`
+Class name of button
+##### onAction
+Mandatory: `false`
+Default: -
+Type: `function`
+ReturnType: `Promise<any> | Observable<any> | boolean`
+Function to be called on button click. In case of Promise and Observable, modal dialog will not close unless successful resolve happens. In case of boolean, modal dialog will close only if result is `truthful`.
+
+### IModalDialogSettings
+#### Interface definition
+```ts
+interface IModalDialogSettings {
+  overlayClass?: string;
+  modalClass?: string;
+  contentClass?: string;
+  headerClass?: string;
+  bodyClass?: string;
+  footerClass?: string;
+  alertClass?: string;
+  alertDuration?: number;
+  buttonsClass?: string;
+  notifyWithAlert?: boolean;
+}
+```
+#### Properties
+TBD:
+
+## License
+Licensed under MIT

config/helpers.js

@@ -0,0 +1,32 @@
+/**
+ * taken from angular2-webpack-starter
+ */
+var path = require('path');
+
+// Helper functions
+var ROOT = path.resolve(__dirname, '..');
+
+function hasProcessFlag(flag) {
+    return process.argv.join('').indexOf(flag) > -1;
+}
+
+function isWebpackDevServer() {
+    return process.argv[1] && !! (/webpack-dev-server$/.exec(process.argv[1]));
+}
+
+function root(args) {
+    args = Array.prototype.slice.call(arguments, 0);
+    return path.join.apply(path, [ROOT].concat(args));
+}
+
+function checkNodeImport(context, request, cb) {
+    if (!path.isAbsolute(request) && request.charAt(0) !== '.') {
+        cb(null, 'commonjs ' + request); return;
+    }
+    cb();
+}
+
+exports.hasProcessFlag = hasProcessFlag;
+exports.isWebpackDevServer = isWebpackDevServer;
+exports.root = root;
+exports.checkNodeImport = checkNodeImport;

config/spec-bundle.js

@@ -0,0 +1,58 @@
+/*
+ * When testing with webpack and ES6, we have to do some extra
+ * things to get testing to work right. Because we are gonna write tests
+ * in ES6 too, we have to compile those as well. That's handled in
+ * karma.conf.js with the karma-webpack plugin. This is the entry
+ * file for webpack test. Just like webpack will create a bundle.js
+ * file for our client, when we run test, it will compile and bundle them
+ * all here! Crazy huh. So we need to do some setup
+ */
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+// Typescript emit helpers polyfill
+require('ts-helpers');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/proxy'); // since zone.js 0.6.15
+require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14
+
+// RxJS
+require('rxjs/Rx');
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(
+  browser.BrowserDynamicTestingModule,
+  browser.platformBrowserDynamicTesting()
+);
+
+/*
+ * Ok, this is kinda crazy. We can use the context method on
+ * require that webpack created in order to tell webpack
+ * what files we actually want to require or import.
+ * Below, context will be a function/object with file names as keys.
+ * Using that regex we are saying look in ../src then find
+ * any file that ends with spec.ts and get its path. By passing in true
+ * we say do this recursively
+ */
+var testContext = require.context('../tests', true, /\.spec\.ts/);
+
+/*
+ * get all the files, for each file, call the context function
+ * that will require the file and load it up here. Context will
+ * loop and require those spec files here
+ */
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+// requires and returns all modules that match
+var modules = requireAll(testContext);

config/webpack.test.js

@@ -0,0 +1,76 @@
+/**
+ * Adapted from angular2-webpack-starter
+ */
+
+const helpers = require('./helpers');
+const webpack = require('webpack');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+
+const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
+
+module.exports = {
+  /**
+   * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
+   *
+   * Do not change, leave as is or it wont work.
+   * See: https://github.com/webpack/karma-webpack#source-maps
+   */
+  devtool: 'inline-source-map',
+
+  resolve: {
+    extensions: ['.ts', '.js'],
+    modules: [helpers.root('src'), 'node_modules']
+  },
+
+  module: {
+    rules: [{
+      enforce: 'pre',
+      test: /\.ts$/,
+      loader: 'tslint-loader',
+      exclude: [helpers.root('node_modules')]
+    }, {
+      enforce: 'pre',
+      test: /\.js$/,
+      loader: 'source-map-loader',
+      exclude: [
+        // these packages have problems with their sourcemaps
+        helpers.root('node_modules/rxjs'),
+        helpers.root('node_modules/@angular')
+      ]
+    }, {
+      test: /\.ts$/,
+      loader: 'awesome-typescript-loader',
+      query: {
+        // use inline sourcemaps for "karma-remap-coverage" reporter
+        sourceMap: false,
+        inlineSourceMap: true,
+        module: "commonjs",
+        removeComments: true
+      },
+      exclude: [/\.e2e\.ts$/]
+    }, {
+      enforce: 'post',
+      test: /\.(js|ts)$/,
+      loader: 'istanbul-instrumenter-loader',
+      include: helpers.root('src'),
+      exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
+    }],
+  },
+
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      helpers.root('./src')
+    ),
+    new LoaderOptionsPlugin({
+      debug: true,
+      options: {
+        tslint: {
+          emitErrors: false,
+          failOnHint: false,
+          resourcePath: 'src'
+        },
+      }
+    })
+  ]
+};

index.ts

@@ -10,11 +10,10 @@ import { ModalDialogComponent } from './src/modal-dialog.component';
 import { ModalDialogService } from './src/modal-dialog.service';
 import { SimpleModalComponent } from './src/simple-modal.component';
 // modules
-import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 
 @NgModule({
-    imports: [ TranslateModule, CommonModule ],
+    imports: [ CommonModule ],
     declarations: [ ModalDialogComponent, SimpleModalComponent ],
     entryComponents: [ ModalDialogComponent, SimpleModalComponent ],
     exports: [ ModalDialogComponent, SimpleModalComponent ]
@@ -27,4 +26,4 @@ export class ModalDialogModule {
             providers: [ ModalDialogService ]
         };
     }
-}
+}

package.json

@@ -30,8 +30,7 @@
   "peerDependencies": {
     "@angular/core": ">=2.0.0",
     "@angular/common": ">=2.0.0",
-    "rxjs": "^5.0.0",
-    "@ngx-translate/core": "^6.0.0"
+    "rxjs": "^5.0.0"
   },
   "devDependencies": {
     "@angular/common": "2.4.8",
@@ -48,6 +47,7 @@
     "@types/jasmine": "2.5.41",
     "@types/node": "7.0.4",
     "awesome-typescript-loader": "3.0.0-beta.18",
+    "clean-webpack-plugin": "0.1.15",
     "codelyzer": "2.0.0-beta.4",
     "commitizen": "2.9.2",
     "concurrently": "3.1.0",
@@ -64,7 +64,6 @@
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.2",
     "loader-utils": "0.2.16",
-    "@ngx-translate/core": "6.0.0",
     "reflect-metadata": "0.1.8",
     "rxjs": "5.0.1",
     "semantic-release": "4.3.5",