angular5 and latest buildchain

.gitignore

@@ -8,6 +8,5 @@ documentation
 src/*.js
 src/components/*.js
 tsconfig-*.json
-yarn.lock
 _dist_demo_node_modules
 dist-demo

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.yarnpkg.com/

package.json

@@ -2,7 +2,7 @@
   "COMMENT": "THIS FILE WILL BE PARSED DURING BUILD. IT IS NOT THE ACTUAL PACKAGE FILE PUSHED TO NPMJS!",
   "name": "@cloukit/notification",
   "moduleId": "notification",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Show success, error, info and warn notifications on the page",
   "license": "MIT",
   "author": "codelcou.io",
@@ -18,17 +18,17 @@
     "test": "echo \"ok\""
   },
   "dependencies": {
-    "@cloukit/icon": ">=1.4.0",
-    "@cloukit/dropout": ">=1.4.0",
-    "@cloukit/theme": ">=1.6.1"
+    "@cloukit/icon": ">=1.5.0",
+    "@cloukit/dropout": ">=1.6.0",
+    "@cloukit/theme": ">=1.7.0"
   },
   "devDependencies": {
-    "@cloukit/library-build-chain": "1.15.0",
-    "@cloukit/story": "1.2.0"
+    "@cloukit/library-build-chain": "1.17.1",
+    "@cloukit/story": "1.3.1"
   },
   "peerDependencies": {
-    "@angular/common": ">=4.0.0",
-    "@angular/core": ">=4.0.0",
+    "@angular/common": ">=5.0.0",
+    "@angular/core": ">=5.0.0",
     "rxjs": ">=5.0.0",
     "zone.js": ">=0.8.0"
   }

src/components/notification.module.ts

@@ -6,15 +6,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CloukitThemeService } from '@cloukit/theme';
-import { CloukitDropoutModule } from '@cloukit/dropout';
 import { CloukitNotificationService } from './services/notification.service';
 import { CloukitNotificationOutletLoaderComponent } from './children/notification-outlet-loader.component';
 import { CloukitNotificationOutletComponent } from './children/notification-outlet.component';
 import { CloukitNotificationComponent } from './children/notification.component';
 import { CloukitNotificationComponentThemeDefault } from './notification.theme';
 
 @NgModule({
-  imports: [ CommonModule, CloukitDropoutModule ],
+  imports: [ CommonModule ],
   exports: [
     CloukitNotificationOutletLoaderComponent,
     CloukitNotificationOutletComponent,

src/demo/demo.module.ts

@@ -1,10 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { CloukitDropoutModule } from '@cloukit/dropout';
 import { CloukitThemeModule } from '@cloukit/theme';
+import { CloukitDropoutModule } from '@cloukit/dropout';
 import { CloukitNotificationModule } from '../index';
 import { DemoComponent } from './demo.component';
-import demoStoriesSource from '../assets/demoStoriesSource.json';
 import { CloukitStoryModule, CloukitStoryService } from '@cloukit/story';
 import { Story00Component } from './stories/story-00-simple-notifications';
 import { Story01Component } from './stories/story-01-timed-notifications';
@@ -20,8 +19,8 @@ import { Story01Component } from './stories/story-01-timed-notifications';
   imports: [
     CommonModule,
     CloukitThemeModule,
-    CloukitNotificationModule,
     CloukitDropoutModule,
+    CloukitNotificationModule,
     CloukitStoryModule,
   ],
   providers: [ ],
@@ -30,11 +29,10 @@ import { Story01Component } from './stories/story-01-timed-notifications';
 export class DemoModule {
   constructor(private cloukitStoryService: CloukitStoryService) {
     //
-    // REGISTER STORY SOURCES
+    // INITIALIZE STORY SOURCES
     //
-    const keys = Object.keys(demoStoriesSource);
-    for (let i=0; i<keys.length; i++) {
-      this.cloukitStoryService.addSource(keys[i], demoStoriesSource[keys[i]]);
-    }
+    const baseUrl = document.getElementsByTagName('base')[0].href;
+    const storySourceJsonUrl = `${baseUrl}assets/demoStoriesSource.json`; // File is auto generated by build chain!
+    this.cloukitStoryService.loadStoryJson(storySourceJsonUrl);
   }
 }

src/demo/stories/story-00-simple-notifications.html

@@ -11,7 +11,7 @@
       class="superButtonSecondary"
       (click)="closeSuccess()"
       [disabled]="!success || success?.actions.closed"
-    >close success</button>
+    >close</button>
     <div class="eventLog">
       <div
         class="eventLogEntry eventLogEntry-{{entry}}"
@@ -31,7 +31,7 @@
       class="superButtonSecondary"
       (click)="closeInfo()"
       [disabled]="!info || info?.actions.closed"
-    >close info</button>
+    >close</button>
     <div class="eventLog">
       <div
         class="eventLogEntry eventLogEntry-{{entry}}"
@@ -51,7 +51,7 @@
       class="superButtonSecondary"
       (click)="closeWarn()"
       [disabled]="!warn || warn?.actions.closed"
-    >close warn</button>
+    >close</button>
     <div class="eventLog">
       <div
         class="eventLogEntry eventLogEntry-{{entry}}"
@@ -71,7 +71,7 @@
       class="superButtonSecondary"
       (click)="closeError()"
       [disabled]="!error || error?.actions.closed"
-    >close error</button>
+    >close</button>
     <div class="eventLog">
       <div
         class="eventLogEntry eventLogEntry-{{entry}}"