feat(Angular 5 release candidate)

5.0.0 alpha release candidate.  See changelog for details.  Addresses:

#128, #129, #139 and #142

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

CHANGELOG.md

@@ -1,9 +1,43 @@
+# 5.0.0-alpha.1 (2018-02-04)
+### BREAKING CHANGES
+* **angular2-toaster:** The library's Angular dependencies have been pinned to a minimum version of 
+5.0.0 for common, compiler, and core and RxJS has been pinned to a minimum of 5.4.2 due to defects 
+in lower RxJS versions.
+
+* **toaster.module:** `ToasterModule` now exposes both `forRoot` and `forChild` methods to ensure 
+that `ToasterService` is always provided as a singleton instance.  `ToasterModule` should always be 
+called with `forRoot` in the root of the application and subsequently called with `forChild` in 
+additional "per component" container injections.  Closes 
+[#129](https://github.com/Stabzs/Angular2-Toaster/issues/129).
+
+### FEATURES
+* **angular2-toaster:** A `toaster.min.css` file inclusion has been added.  Closes 
+[#142](https://github.com/Stabzs/Angular2-Toaster/issues/142).
+
+* **demos:** Rebuilt the `angular-cli` demo to pull from local pathing to allow for better local 
+examples.
+
+### BUG FIXES
+* **toaster.css:** The close button is now properly responsive and no longer overflows its 
+boundaries at collapsed resolutions.  Closes 
+[#139](https://github.com/Stabzs/Angular2-Toaster/issues/139).
+
+* **angular2-toaster:** Optimized builds now work as intended.  Closes
+[#128](https://github.com/Stabzs/Angular2-Toaster/issues/128).
+
+* **toaster-container.component:** If the same toast was broadcast to multiple containers, the 
+removal of the timeout for a toast in one container would affect all other timeouts for all 
+other containers for that toast instance.  Timeout Ids are now tracked internally in each container 
+to ensure that each container's toast instance is tracked individually.
+
+
 # 4.0.2 (2018-01-24)
 ### FEATURES
 * **angular2-toaster:** Update Angular dependencies to support 5.x.x versions.  Thanks @isaacplmann!
 
+
 # 4.0.1 (2017-7-16)
-* **toast-container.component:** The setTimeout call now runs outside of Angular and is patched on 
+* **toaster-container.component:** The setTimeout call now runs outside of Angular and is patched on 
 reentry with an `ngZone.run()` call.  This should provide better performance overall and should 
 make protractor testing easier.  Closes 
 [#120](https://github.com/Stabzs/Angular2-Toaster/issues/120).

README.md

@@ -67,9 +67,8 @@ import {ToasterModule, ToasterService} from 'angular2-toaster';
 import {Root} from './root.component'
 
 @NgModule({
-    imports: [BrowserAnimationsModule, ToasterModule],
+    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],
     declarations: [Root],
-    providers: [],
     bootstrap: [Root]
 })
 
@@ -92,9 +91,11 @@ export class Root {
     }
 }
 ```
+`ToasterModule.forRoot()` is recommended for most applications as it will guarantee a single instance of the ToasterService, ensuring that all recipient containers observe the same ToasterService events.
 
+For subsequent inclusions, use `ToasterModule.forChild()` to provide the `ToasterContainerComponent` only, ensuring that `ToasterService` is still held as a singleton at the root.
 
-## Getting Started with Default Configuration - Manual Component Inclusion:
+## Getting Started with Default Configuration - Manual Component Inclusion (obsolete >= 5.0.0):
 
 ```typescript
 import {Component} from '@angular/core';
@@ -131,15 +132,13 @@ bootstrap(Root);
 ```typescript
 import {Component} from '@angular/core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ToasterContainerComponent, ToasterService, ToasterConfig} from 'angular2-toaster';
+import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
 
 @Component({
     selector: 'root',
-    imports: [BrowserAnimationsModule],
-    directives: [ToasterContainerComponent],
-    providers: [ToasterService],
+    imports: [BrowserAnimationsModule, ToasterModule.forRoot()],
     template: `
-        <toaster-container [toasterconfig]="toasterconfig">
+        <toaster-container [toasterconfig]="config">
         </toaster-container>
         <button (click)="popToast()">pop toast</button>`
 })
@@ -151,7 +150,7 @@ class Root {
         this.toasterService = toasterService;    
     }
 
-    public toasterconfig : ToasterConfig = 
+    public config: ToasterConfig = 
         new ToasterConfig({
             showCloseButton: true, 
             tapToDismiss: false, 
@@ -250,9 +249,9 @@ There are five animation styles that can be applied via the toasterconfig `anima
 
 ```typescript
 template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-public toasterconfig : ToasterConfig = 
+public config: ToasterConfig = 
     new ToasterConfig({animation: 'fade'});
 ```
 
@@ -264,9 +263,9 @@ To change this behavior, pass a "limit" option to the config:
 
 ```typescript
 template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-public toasterconfig : ToasterConfig = 
+public config: ToasterConfig = 
     new ToasterConfig({limit: 5});
 ```
 
@@ -277,9 +276,9 @@ that if set to false, the toast will only be dismissed if the close button is de
 
 ```typescript
 template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-public toasterconfig : ToasterConfig = 
+public config: ToasterConfig = 
     new ToasterConfig({tapToDismiss: false});
 ```
 
@@ -291,9 +290,9 @@ The Close Button's visibility can be configured at three different levels:
 
     ```typescript
     template: 
-        `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+        `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-    public toasterconfig : ToasterConfig = 
+    public config: ToasterConfig = 
         new ToasterConfig({showCloseButton: true});
     ```
 
@@ -302,9 +301,9 @@ By passing the close-button configuration as an object instead of a boolean, you
 
     ```typescript
     template: 
-        `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+        `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-    public toasterconfig : ToasterConfig = 
+    public config: ToasterConfig = 
         new ToasterConfig({
             showCloseButton: { 'warning': true, 'error': false }
         });
@@ -337,9 +336,9 @@ The close button html can be overridden either globally or per toast call.
 
     ```typescript
     template: 
-        `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+        `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-    public toasterconfig : ToasterConfig = 
+    public config: ToasterConfig = 
         new ToasterConfig({
             closeHtml: '<button>Close</button>'
         });
@@ -365,9 +364,9 @@ If changed to false via the config, toasts will be added to the bottom of other
 
 ```typescript
 template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-public toasterconfig : ToasterConfig = 
+public config: ToasterConfig = 
     new ToasterConfig({newestOnTop: false});
 ```
 
@@ -383,9 +382,9 @@ The timeout can be configured at three different levels:
 * Globally in the config for all toast types:
   ```typescript
   template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-  public toasterconfig : ToasterConfig = 
+  public config: ToasterConfig = 
         new ToasterConfig({timeout: 2000});
   ```
 
@@ -395,9 +394,9 @@ behavior an info-class type should have.
 
   ```
   template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-  public toasterconfig : ToasterConfig = 
+  public config: ToasterConfig = 
       new ToasterConfig({timeout: {error:1000});
   ```
 If a type is not defined and specified, a timeout will not be applied, making the toast "sticky".
@@ -421,9 +420,9 @@ This can be overriden via the container's config.
 
 ```typescript
 template: 
-    `<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
+    `<toaster-container [toasterconfig]="config"></toaster-container>`
 
-public toasterconfig : ToasterConfig = 
+public config: ToasterConfig = 
     new ToasterConfig({mouseoverTimerStop: false});
 ```
 

angular2-toaster.ts

@@ -1,7 +1,8 @@
 export { ToastComponent } from "./src/toast.component";
 export { ToasterContainerComponent } from "./src/toaster-container.component";
-export { ToasterService, IClearWrapper } from "./src/toaster.service";
+export { ToasterService } from "./src/toaster.service";
+export { IClearWrapper } from "./src/clearWrapper";
 export { ToasterConfig, IToasterConfig } from "./src/toaster-config";
-export { Toast, OnActionCallback, ClickHandler } from './src/toast';
+export { Toast, ClickHandler, OnActionCallback } from "./src/toast";
 export { BodyOutputType } from "./src/bodyOutputType";
-export { ToasterModule } from "./src/toaster.module";
+export { ToasterModule } from "./src/toaster.module";

config/rollup.config.js

@@ -1,7 +1,9 @@
 export default {
     entry: './dist/angular2-toaster.js',
-    dest: './dist/bundles/angular2-toaster.umd.js',
-    format: 'umd',
+    output: {
+        file: 'dist/bundles/angular2-toaster.umd.js',
+        format: 'umd'
+    },
     moduleName: 'angular2toaster',
     external: [
         '@angular/core',

demo/angular-cli/.angular-cli.json

@@ -36,13 +36,16 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json"
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "src/tsconfig.spec.json"
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "e2e/tsconfig.e2e.json"
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
     }
   ],
   "test": {
@@ -52,6 +55,9 @@
   },
   "defaults": {
     "styleExt": "css",
-    "component": {}
+    "component": {},
+    "build": {
+      "preserveSymlinks": true
+    }
   }
 }

demo/angular-cli/.gitignore

@@ -2,6 +2,7 @@
 
 # compiled output
 /dist
+/dist-server
 /tmp
 /out-tsc
 

demo/angular-cli/README.md

@@ -1,14 +1,20 @@
 # AngularCli
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.7.
+Due to local pathing support in order to test angular2-toaster locally, the following setup steps are required.
+
+- run npm install
+- delete all @angular node packages from node_modules
+- delete @ngtools package from node_modules
+- delete ng and ngc files from node_modules/.bin
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `npm run start --aot` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
@@ -21,7 +27,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
 
 ## Further help
 

demo/angular-cli/e2e/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { AngularCliPage } from './app.po';
+import { AppPage } from './app.po';
 
 describe('angular-cli App', () => {
-  let page: AngularCliPage;
+  let page: AppPage;
 
   beforeEach(() => {
-    page = new AngularCliPage();
+    page = new AppPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
   });
 });

demo/angular-cli/e2e/app.po.ts

@@ -1,6 +1,6 @@
-import { browser, element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
 
-export class AngularCliPage {
+export class AppPage {
   navigateTo() {
     return browser.get('/');
   }

demo/angular-cli/e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
-    "types":[
+    "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

demo/angular-cli/karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
@@ -15,25 +15,14 @@ module.exports = function (config) {
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
     coverageIstanbulReporter: {
       reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,