Merge pull request #146 from Stabzs/release/5.0.0

Release/5.0.0

.vscode/settings.json

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

CHANGELOG.md

@@ -1,9 +1,65 @@
+# 5.0.0 (2018-02-24)
+* **angular2-toaster:** Full release of 5.x.x functionality.  See CHANGELOG below for details.
+Closes #144, #129, #142, #139 and #128.
+
+
+# 5.0.0-alpha.1 (2018-02-22)
+### FEATURES
+* **angular2-toaster:** The toaster.css is now generated via SCSS.  Thanks to @bastienmoulia for his 
+hard (and patient) work on this feature!
+
+* **demos:** `angular-cli` project updated to include better examples around multi-container 
+instances.
+
+### BUG FIXES
+* **toaster-container.component:** The container's config is no longer copied onto the toast 
+instance.  Instead, titleClass and messageClass have been moved to input properties so that 
+individual containers can uniquely style these properties for the same toast instance being 
+broadcasted to multiple containers.  The `toasterconfig` property has been removed from 
+`Toast` as a result to clean up the intent of the `Toast` interface.  Closes 
+[#144](https://github.com/Stabzs/Angular2-Toaster/issues/144).
+
+
+# 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

@@ -3,14 +3,14 @@
 **angular2-toaster** is an asynchronous, non-blocking, Ahead of Time Compilation-supported Angular Toaster Notification library 
 largely based off of [AngularJS-Toaster](https://github.com/jirikavi/AngularJS-Toaster).
 
-[![npm](https://img.shields.io/npm/v/angular2-toaster.svg?maxAge=3600?cachedbust=true)](https://www.npmjs.com/package/angular2-toaster)
-[![npm](https://img.shields.io/npm/dt/angular2-toaster.svg?cachedbust=true)](https://www.npmjs.com/package/angular2-toaster)
+[![npm](https://img.shields.io/npm/v/angular2-toaster.svg?maxAge=3600?cached=true)](https://www.npmjs.com/package/angular2-toaster)
+[![npm](https://img.shields.io/npm/dt/angular2-toaster.svg?cached=true)](https://www.npmjs.com/package/angular2-toaster)
 [![Build Status](https://travis-ci.org/Stabzs/Angular2-Toaster.svg?branch=master)](https://travis-ci.org/Stabzs/Angular2-Toaster)
-[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=4.0.2)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
+[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=5.0.0)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
 
 
-Version ^4.0.0 now supports `@angular/animations`, which is a breaking change.  Please read both 
-the `Getting Started` and `Animations` sections before upgrading.
+Version ^ 5.0.0 requires either `.forRoot()` or `.forChild()` `ToasterModule` inclusion.  Please 
+read the 5.x.x release notes the `Getting Started` section before upgraded.
 
 # Demo
 A dynamic Angular and Typescript demo can be found at 
@@ -31,12 +31,21 @@ npm install angular2-toaster
 ```html
 <link rel="stylesheet" type="text/css" href="/node_modules/angular2-toaster/toaster.css" />
 ```
+or
+```html
+<link rel="stylesheet" type="text/css" href="/node_modules/angular2-toaster/toaster.min.css" />
+```
 
 ### Import CSS with Sass or Less
 ```scss
 @import 'node_modules/angular2-toaster/toaster';
 ```
 
+### Compile the Library's SCSS
+```scss
+@import 'node_modules/angular2-toaster/src/toaster';
+```
+
 
 ## Import Library
 
@@ -67,9 +76,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 +100,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 +141,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 +159,7 @@ class Root {
         this.toasterService = toasterService;    
     }
 
-    public toasterconfig : ToasterConfig = 
+    public config: ToasterConfig = 
         new ToasterConfig({
             showCloseButton: true, 
             tapToDismiss: false, 
@@ -250,9 +258,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 +272,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 +285,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 +299,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 +310,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 +345,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 +373,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 +391,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 +403,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 +429,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',

config/webpack.test.js

@@ -18,7 +18,7 @@ module.exports = {
      * Do not change, leave as is or it wont work.
      * See: https://github.com/webpack/karma-webpack#source-maps
      */
-    devtool: 'source-map',
+    devtool: 'inline- source-map',
 
     resolve: {
         extensions: ['.ts', '.js'],

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.
 
 ## 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