ngrx updated to v5.0.0

+ Increase the Fuse version number

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,29 +19,29 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.1.3",
-    "@angular/cdk": "5.0.3",
-    "@angular/common": "5.1.3",
-    "@angular/compiler": "5.1.3",
-    "@angular/core": "5.1.3",
+    "@angular/animations": "5.2.1",
+    "@angular/cdk": "5.1.0",
+    "@angular/common": "5.2.1",
+    "@angular/compiler": "5.2.1",
+    "@angular/core": "5.2.1",
     "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.1.3",
-    "@angular/http": "5.1.3",
-    "@angular/material": "5.0.3",
-    "@angular/material-moment-adapter": "5.0.3",
-    "@angular/platform-browser": "5.1.3",
-    "@angular/platform-browser-dynamic": "5.1.3",
-    "@angular/router": "5.1.3",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
-    "@ngx-translate/core": "9.0.2",
+    "@angular/forms": "5.2.1",
+    "@angular/http": "5.2.1",
+    "@angular/material": "5.1.0",
+    "@angular/material-moment-adapter": "5.1.0",
+    "@angular/platform-browser": "5.2.1",
+    "@angular/platform-browser-dynamic": "5.2.1",
+    "@angular/router": "5.2.1",
+    "@ngrx/effects": "5.0.0",
+    "@ngrx/router-store": "5.0.0",
+    "@ngrx/store": "5.0.0",
+    "@ngrx/store-devtools": "5.0.0",
+    "@ngx-translate/core": "9.1.1",
     "@swimlane/ngx-charts": "7.0.1",
     "@swimlane/ngx-datatable": "11.1.7",
     "@swimlane/ngx-dnd": "3.1.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.1",
+    "angular-calendar": "0.23.2",
     "angular-in-memory-web-api": "0.5.2",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.3",
@@ -51,34 +51,34 @@
     "moment": "2.20.1",
     "ngrx-store-freeze": "0.2.0",
     "ngx-color-picker": "5.3.0",
-    "ngx-cookie-service": "1.0.9",
+    "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.9.0",
+    "prismjs": "1.10.0",
     "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.19"
+    "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.3",
-    "@angular/compiler-cli": "5.1.3",
-    "@angular/language-service": "5.1.3",
+    "@angular/cli": "1.6.5",
+    "@angular/compiler-cli": "5.2.1",
+    "@angular/language-service": "5.2.1",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.5.54",
+    "@types/jasmine": "2.8.5",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "6.0.96",
-    "codelyzer": "4.0.2",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
+    "codelyzer": "4.1.0",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
     "karma-coverage-istanbul-reporter": "1.3.3",
     "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.1.2",
-    "ts-node": "3.2.2",
-    "tslint": "5.7.0",
-    "typescript": "2.4.2",
+    "ts-node": "4.1.0",
+    "tslint": "5.9.1",
+    "typescript": "2.5.3",
     "webpack-bundle-analyzer": "2.9.2"
   }
 }

src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,8 +1,8 @@
-import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import PerfectScrollbar from 'perfect-scrollbar';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
 import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
+import PerfectScrollbar from 'perfect-scrollbar';
 
 @Directive({
     selector: '[fusePerfectScrollbar]'
@@ -13,7 +13,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
-    ps;
+    ps: PerfectScrollbar;
 
     constructor(
         public element: ElementRef,
@@ -62,6 +62,21 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps.destroy();
     }
 
+    @HostListener('document:click', ['$event'])
+    documentClick(event: Event): void
+    {
+        if ( !this.isInitialized || !this.ps )
+        {
+            return;
+        }
+
+        // Update the scrollbar on document click..
+        // This isn't the most elegant solution but there is no other way
+        // of knowing when the contents of the scrollable container changes.
+        // Therefore, we update scrollbars on every document click.
+        this.ps.update();
+    }
+
     update()
     {
         if ( !this.isInitialized )

src/app/core/scss/core.scss

@@ -1,9 +1,9 @@
 // ngx-datatable
-@import '~@swimlane/ngx-datatable/release/index.css';
-@import '~@swimlane/ngx-datatable/release/themes/material.css';
-@import '~@swimlane/ngx-datatable/release/assets/icons.css';
+@import '~@swimlane/ngx-datatable/release/themes/material';
+
 // Perfect scrollbar
-@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar';
+
 // Fuse
 @import "fuse";
 

src/app/core/scss/partials/plugins/_ngx-datatable.scss

@@ -98,3 +98,68 @@
         }
     }
 }
+
+[class*="datatable-icon-"] {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+.datatable-icon-filter:before {
+    content: "filter_list";
+}
+.datatable-icon-collapse:before {
+    content: "unfold_less";
+}
+.datatable-icon-expand:before {
+    content: "unfold_more";
+}
+.datatable-icon-close:before {
+    content: "close";
+}
+.datatable-icon-up:before {
+    content: "keyboard_arrow_up";
+}
+.datatable-icon-down:before {
+    content: "keyboard_arrow_down";
+}
+.datatable-icon-sort:before {
+    content: "sort";
+}
+.datatable-icon-done:before {
+    content: "done";
+}
+.datatable-icon-done-all:before {
+    content: "done_all";
+}
+.datatable-icon-search:before {
+    content: "search";
+}
+.datatable-icon-pin:before {
+    content: "lock";
+}
+.datatable-icon-add:before {
+    content: "add";
+}
+.datatable-icon-left:before {
+    content: "chevron_left";
+}
+.datatable-icon-right:before {
+    content: "chevron_right";
+}
+.datatable-icon-skip:before {
+    content: "skip_next";
+}
+.datatable-icon-prev:before {
+    content: "skip_previous";
+}

src/app/main/content/apps/academy/course/course.component.scss

@@ -161,6 +161,7 @@
                 bottom: 0;
                 left: 0;
                 padding: 48px;
+                overflow: auto;
 
                 @media (max-width: 720px) {
                     padding: 0 0 120px 0;

src/app/main/content/apps/calendar/calendar.component.ts

@@ -25,21 +25,13 @@ import { fuseAnimations } from '../../../../core/animations';
 export class FuseCalendarComponent implements OnInit
 {
     view: string;
-
     viewDate: Date;
-
     events: CalendarEvent[];
-
     public actions: CalendarEventAction[];
-
     activeDayIsOpen: boolean;
-
     refresh: Subject<any> = new Subject();
-
     dialogRef: any;
-
     confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
-
     selectedDay: any;
 
     constructor(

src/app/main/content/apps/mail-ngrx/mail.component.ts

@@ -7,6 +7,8 @@ import { locale as english } from './i18n/en';
 import { locale as turkish } from './i18n/tr';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
 import * as fromStore from './store';
 import { FuseConfigService } from '../../../../core/services/config.service';
 

src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts

@@ -4,6 +4,7 @@ import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import { map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+import 'rxjs/add/operator/debounceTime';
 import { getRouterState, State } from '../../../../../../store/reducers';
 import { getMailsState } from '../selectors';
 import * as MailsActions from '../actions/mails.actions';

src/app/main/content/apps/scrumboard/board/list/card/card.component.scss

@@ -4,8 +4,8 @@
     position: relative;
     display: block;
     width: 100%;
-    margin: 16px 0;
-    background-color: white;
+    margin: 16px 0 !important;
+    background-color: white !important;
     color: #000;
     border-radius: 2px;
     transition: box-shadow 150ms ease;

src/app/main/content/apps/scrumboard/board/list/list.component.scss

@@ -4,7 +4,7 @@
     width: 344px;
     min-width: 344px;
     max-width: 344px;
-    padding-right: 24px;
+    padding-right: 24px !important;
     height: 100%;
 
     .list {
@@ -36,6 +36,7 @@
                 position: relative;
                 min-height: 32px;
                 padding: 0 16px;
+                background: mat-color($mat-grey, 200) !important;
             }
         }
 

src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss

@@ -10,13 +10,6 @@
     flex-shrink: 0;
     background: #FFFFFF;
 
-    &.todo-item-placeholder {
-        background: rgba(0, 0, 0, 0.12);
-        * {
-            opacity: 0;
-        }
-    }
-
     .handle {
         height: 48px;
         line-height: 48px;

src/app/main/content/components/cards/cards.component.scss

@@ -13,6 +13,7 @@
 
             .card {
                 display: flex;
+                align-items: flex-start;
                 padding: 24px 24px 48px 24px;
                 margin-bottom: 96px;
 

src/app/main/quick-panel/quick-panel.component.scss

@@ -1,8 +1,8 @@
 fuse-quick-panel {
     display: flex;
-    width: 330px;
-    min-width: 330px;
-    max-width: 330px;
+    width: 280px;
+    min-width: 280px;
+    max-width: 280px;
     z-index: 99;
     flex-direction: column;