refactor: Updated to Angular 8.X and rxjs 6.X

BREAKING CHANGE: Updated to Angular 8.X and rxjs 6.X

example/app.component.ts

@@ -52,8 +52,8 @@ router-outlet name=lazy_modal: <router-outlet name="lazy_modal"></router-outlet>
 })
 export class AppComponent {
 
-    @ViewChild(ModalConfirmComponent) private confirm: ModalConfirmComponent;
-    @ViewChild(ModalConfirm2Component) private confirm2: ModalConfirm2Component;
+    @ViewChild(ModalConfirmComponent, { static: true }) private confirm: ModalConfirmComponent;
+    @ViewChild(ModalConfirm2Component, { static: true }) private confirm2: ModalConfirm2Component;
     confirmSubscription: Subscription;
     confirm2Subscription: Subscription;
     styleWidth: string | null;

example/custom-modal.component.ts

@@ -13,7 +13,7 @@ import { ModalComponent } from '../src/index';
 })
 export class CustomModalComponent {
 
-    @ViewChild(ModalComponent) protected modal: ModalComponent;
+    @ViewChild(ModalComponent, { static: true }) protected modal: ModalComponent;
 
     constructor(
     ) { }

example/example-modal.component.ts

@@ -14,7 +14,7 @@ import { ModalComponent } from '../src/index';
 })
 export class ExampleModalComponent {
 
-    @ViewChild(ModalComponent) protected modal: ModalComponent;
+    @ViewChild(ModalComponent, { static: true }) protected modal: ModalComponent;
 
     constructor(
     ) { }

example/feature/parameter.component.ts

@@ -18,7 +18,7 @@ import { ModalComponent } from '../../src/index';
 })
 export class ParameterComponent {
 
-    @ViewChild(ModalComponent) modal: ModalComponent;
+    @ViewChild(ModalComponent, { static: true }) modal: ModalComponent;
     isOpen: boolean;
 
     open() {

example/lazy-modal.component.ts

@@ -13,7 +13,7 @@ import { ModalComponent } from '../src/index';
 })
 export class LazyModalComponent {
 
-    @ViewChild(ModalComponent) protected modal: ModalComponent;
+    @ViewChild(ModalComponent, { static: true }) protected modal: ModalComponent;
 
     constructor(
     ) { }

package.json

@@ -20,7 +20,6 @@
     "eslint:fix": "eslint src --ext ts --fix",
     "tslint:fix": "tslint -p tsconfig.json --fix",
     "lint:w": "run-p tsclint:w eslint:w",
-    "prepublishOnly": "sed -i -e 's/devDependencies/_devDependencies/g' package.json",
     "prepush": "npm run test && npm run build"
   },
   "keywords": [
@@ -33,85 +32,85 @@
   },
   "license": "MIT",
   "dependencies": {
-    "tslib": "^1.9.3"
+    "tslib": "^1.10.0"
   },
   "peerDependencies": {
     "focus-trap": "5",
-    "rxjs": "5.X",
-    "@angular/core": ">=2.4 3 4 5",
-    "@angular/common": ">=2.4 3 4 5",
-    "@angular/router": ">=2.4 3 4 5"
+    "rxjs": "6.X",
+    "@angular/core": ">=2.4 3 4 5 6 7 8 9",
+    "@angular/common": ">=2.4 3 4 5 6 7 8 9",
+    "@angular/router": ">=2.4 3 4 5 6 7 8 9"
   },
   "devDependencies": {
-    "@angular/common": "5.X",
-    "@angular/compiler": "5.X",
-    "@angular/compiler-cli": "5.X",
-    "@angular/core": "5.X",
-    "@angular/platform-browser": "5.X",
-    "@angular/platform-browser-dynamic": "5.X",
-    "@angular/router": "5.X",
-    "@semantic-release/changelog": "3.0.2",
+    "@angular/common": "8",
+    "@angular/compiler": "8",
+    "@angular/compiler-cli": "8",
+    "@angular/core": "8",
+    "@angular/platform-browser": "8",
+    "@angular/platform-browser-dynamic": "8",
+    "@angular/router": "8",
+    "@semantic-release/changelog": "3.0.4",
     "@semantic-release/commit-analyzer": "7.0.0-beta.2",
     "@semantic-release/git": "7.1.0-beta.3",
-    "@semantic-release/github": "5.4.0-beta.1",
-    "@semantic-release/gitlab": "3.1.2",
+    "@semantic-release/github": "5.4.2",
+    "@semantic-release/gitlab": "3.1.7",
     "@semantic-release/npm": "5.2.0-beta.6",
-    "@semantic-release/release-notes-generator": "7.1.7",
-    "@types/core-js": "2.5.0",
-    "@types/eslint": "4.16.6",
-    "@types/html-webpack-plugin": "3.2.0",
-    "@types/jasmine": "3.3.12",
+    "@semantic-release/release-notes-generator": "7.3.0",
+    "@types/core-js": "2.5.2",
+    "@types/eslint": "6.1.0",
+    "@types/html-webpack-plugin": "3.2.1",
+    "@types/jasmine": "3.4.0",
     "@types/karma": "3.0.3",
     "@types/karma-jasmine": "0.0.31",
     "@types/karma-webpack": "2.0.7",
-    "@types/node": "12.0.2",
-    "@types/webpack": "4.4.32",
-    "@types/webpack-dev-server": "3.1.6",
-    "@typescript-eslint/eslint-plugin-tslint": "1.9.0",
-    "@typescript-eslint/parser": "1.9.0",
+    "@types/node": "12.7.2",
+    "@types/webpack": "4.39.0",
+    "@types/webpack-dev-server": "3.1.7",
+    "@typescript-eslint/eslint-plugin-tslint": "2.0.0",
+    "@typescript-eslint/parser": "2.0.0",
     "angular-router-loader": "0.8.5",
     "awesome-typescript-loader": "5.2.1",
-    "codelyzer": "5.0.1",
+    "codelyzer": "5.1.0",
     "core-js": "2.6.8",
-    "css-loader": "2.1.1",
+    "css-loader": "3.2.0",
     "css-to-string-loader": "0.1.3",
     "ejs-loader": "0.3.3",
-    "eslint": "5.16.0",
+    "eslint": "6.2.1",
     "eslint-import-resolver-node": "0.3.2",
-    "eslint-plugin-import": "2.17.3",
+    "eslint-plugin-import": "2.18.2",
     "eslint-plugin-only-warn": "^1.0.1",
     "eslint-plugin-perf-standard": "1.0.3",
-    "eslint-plugin-unicorn": "8.0.2",
-    "eslint-plugin-wix-editor": "2.0.0",
-    "file-loader": "3.0.1",
-    "focus-trap": "5.0.1",
+    "eslint-plugin-unicorn": "10.0.0",
+    "eslint-plugin-wix-editor": "3.0.0",
+    "file-loader": "4.2.0",
+    "focus-trap": "5.0.2",
     "html-webpack-plugin": "3.2.0",
     "istanbul-instrumenter-loader": "3.0.1",
     "jasmine-core": "3.4.0",
-    "karma": "4.1.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage": "1.1.2",
+    "karma": "4.2.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.0.1",
     "karma-jasmine": "2.0.1",
     "karma-remap-coverage": "0.1.5",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "3.0.5",
-    "ng-packagr": "5.2.0",
-    "raw-loader": "2.0.0",
-    "rxjs": "5.X",
+    "karma-webpack": "4.0.2",
+    "ng-packagr": "5.5.0",
+    "raw-loader": "3.1.0",
+    "rxjs": "6.X",
     "semantic-release": "^16.0.0-beta.19",
-    "style-loader": "0.23.1",
-    "ts-node": "8.1.1",
-    "tsickle": "0.35.0",
-    "tslint": "5.16.0",
+    "style-loader": "1.0.0",
+    "ts-node": "8.3.0",
+    "tsickle": "0.36.0",
+    "tslint": "5.19.0",
     "tslint-clean-code": "0.2.9",
     "tslint-microsoft-contrib": "6.2.0",
     "tslint-sonarts": "1.9.0",
-    "typescript": "3.4.5",
+    "typescript": "3.5.3",
     "watchexec-bin": "1.0.0",
-    "webpack": "4.32.2",
-    "webpack-cli": "3.3.2",
-    "webpack-dev-server": "3.4.1",
-    "zone.js": "0.9.0"
+    "webpack": "4.39.2",
+    "webpack-cli": "3.3.7",
+    "webpack-dev-server": "3.8.0",
+    "zone.js": "0.10.2"
   },
   "config": {
     "commitizen": {

src/modal-confirm.component.ts

@@ -1,10 +1,9 @@
 /* tslint:disable:no-import-side-effect */
 import { Component, ViewChild, Input, Inject, OnInit, EventEmitter, Output } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/take';
+import { Subject } from 'rxjs';
 import { ModalComponent } from './modal.component';
 import { ModalOptions, OPTIONS } from './modal-library';
+import { filter, take } from 'rxjs/operators';
 
 @Component({
     selector: 'modal-confirm',
@@ -35,11 +34,12 @@ export class ModalConfirmComponent implements OnInit {
     @Input() settings: Partial<ModalOptions> = {};
     @Output() closemodal = new EventEmitter<void>();
     options: ModalOptions;
-    @ViewChild(ModalComponent) private readonly modal: ModalComponent;
+    @ViewChild(ModalComponent, { static: true }) private readonly modal: ModalComponent;
     readonly result: Subject<boolean> = new Subject<boolean>();
-    readonly okay = this.result
-        .filter(value => value)
-        .take(1);
+    readonly okay = this.result.pipe(
+        filter(value => value),
+        take(1),
+    );
 
     constructor(
         @Inject(OPTIONS) private readonly modalOptions: ModalOptions,

src/modal-header.component.spec.ts

@@ -2,7 +2,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ModalHeaderComponent } from './modal-header.component';
 import { ModalModule } from './modal.module';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 let component: ModalHeaderComponent;
 let fixture: ComponentFixture<ModalHeaderComponent>;

src/modal.component.ts

@@ -1,10 +1,9 @@
 import { Input, Output, Component, ElementRef, EventEmitter, Inject, OnDestroy, ViewChild, Renderer2, ContentChild, OnInit, HostListener } from '@angular/core';
 import { OPTIONS, ModalOptions } from './modal-library';
 import { ModalHeaderComponent } from './modal-header.component';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription, BehaviorSubject } from 'rxjs';
 import { Location } from '@angular/common';
 import { ActivatedRoute, Router, PRIMARY_OUTLET, UrlSegment, NavigationExtras } from '@angular/router';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import focusTrap from 'focus-trap';
 
 @Component({
@@ -25,8 +24,8 @@ export class ModalComponent implements OnDestroy, OnInit {
     @Output() closemodal: EventEmitter<void> = new EventEmitter();
     @Output() openmodal: EventEmitter<void> = new EventEmitter();
     options: ModalOptions;
-    @ViewChild('body') private readonly body: ElementRef;
-    @ContentChild(ModalHeaderComponent) private readonly header: ModalHeaderComponent;
+    @ViewChild('body', { static: true }) private readonly body: ElementRef;
+    @ContentChild(ModalHeaderComponent, { static: true }) private readonly header: ModalHeaderComponent;
     private closeSubscription: Subscription;
     private focusTrap: ReturnType<typeof focusTrap>;