Merge 'master' into skeleton

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,23 +19,23 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.5",
-    "@angular/animations": "7.0.4",
+    "@angular/animations": "7.2.1",
-    "@angular/cdk": "7.0.4",
+    "@angular/cdk": "7.2.1",
-    "@angular/common": "7.0.4",
+    "@angular/common": "7.2.1",
-    "@angular/compiler": "7.0.4",
+    "@angular/compiler": "7.2.1",
-    "@angular/core": "7.0.4",
+    "@angular/core": "7.2.1",
-    "@angular/flex-layout": "7.0.0-beta.19",
+    "@angular/flex-layout": "7.0.0-beta.23",
-    "@angular/forms": "7.0.4",
+    "@angular/forms": "7.2.1",
-    "@angular/http": "7.0.4",
+    "@angular/http": "7.2.1",
-    "@angular/material": "7.0.4",
+    "@angular/material": "7.2.1",
-    "@angular/material-moment-adapter": "7.0.4",
+    "@angular/material-moment-adapter": "7.2.1",
-    "@angular/platform-browser": "7.0.4",
+    "@angular/platform-browser": "7.2.1",
-    "@angular/platform-browser-dynamic": "7.0.4",
+    "@angular/platform-browser-dynamic": "7.2.1",
-    "@angular/router": "7.0.4",
+    "@angular/router": "7.2.1",
-    "@ngrx/effects": "6.1.2",
+    "@ngrx/effects": "7.0.0",
-    "@ngrx/router-store": "6.1.2",
+    "@ngrx/router-store": "7.0.0",
-    "@ngrx/store": "6.1.2",
+    "@ngrx/store": "7.0.0",
-    "@ngrx/store-devtools": "6.1.2",
+    "@ngrx/store-devtools": "7.0.0",
     "@ngx-translate/core": "11.0.1",
     "@swimlane/dragula": "3.7.3",
     "@swimlane/ngx-charts": "10.0.0",
@@ -43,48 +43,49 @@
     "@swimlane/ngx-dnd": "6.0.0",
     "@types/prismjs": "1.9.0",
     "angular-calendar": "0.26.4",
-    "angular-in-memory-web-api": "0.7.0",
+    "angular-in-memory-web-api": "0.8.0",
     "chart.js": "2.7.3",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.7",
+    "core-js": "2.6.2",
     "d3": "5.7.0",
-    "date-fns": "1.29.0",
+    "date-fns": "1.30.1",
     "hammerjs": "2.0.8",
     "lodash": "4.17.11",
-    "moment": "2.22.2",
+    "moment": "2.23.0",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "7.0.2",
+    "ngx-color-picker": "7.3.0",
-    "ngx-cookie-service": "2.0.0",
+    "ngx-cookie-service": "2.1.0",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",
     "rxjs": "6.3.3",
     "rxjs-compat": "6.3.3",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.26"
+    "zone.js": "0.8.28"
   },
   "devDependencies": {
-    "@angular/cli": "7.0.6",
+    "@angular/cli": "7.2.2",
-    "@angular/compiler-cli": "7.0.4",
+    "@angular/compiler-cli": "7.2.1",
-    "@angular/language-service": "7.0.4",
+    "@angular/language-service": "7.2.1",
-    "@angular-devkit/build-angular": "0.10.6",
+    "@angular-devkit/build-angular": "0.12.2",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.11",
+    "@types/jasmine": "2.8.14",
     "@types/jasminewd2": "2.0.6",
-    "@types/lodash": "4.14.118",
+    "@types/lodash": "4.14.119",
     "@types/node": "8.9.5",
     "codelyzer": "4.5.0",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "3.0.0",
+    "karma": "3.1.4",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage-istanbul-reporter": "2.0.4",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.4.1",
+    "protractor": "5.4.2",
     "ts-node": "7.0.1",
+    "tslib": "1.9.3",
     "tslint": "5.11.0",
-    "typescript": "3.1.6",
+    "typescript": "3.2.2",
     "webpack-bundle-analyzer": "3.0.3"
   }
 }

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -35,17 +35,17 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
-     * @param {Renderer2} _renderer
      * @param {CookieService} _cookieService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseNavigationService} _fuseNavigationService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
+     * @param {Renderer2} _renderer
      */
     constructor(
         private _cookieService: CookieService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseNavigationService: FuseNavigationService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
         private _renderer: Renderer2
     )
     {
@@ -109,7 +109,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
-                if ( this._observableMedia.isActive('gt-sm') )
+                if ( this._mediaObserver.isActive('gt-sm') )
                 {
                     this.hideMobileShortcutsPanel();
                 }

src/@fuse/components/sidebar/sidebar.component.ts

@@ -2,7 +2,7 @@ import {
     ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -87,7 +87,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseSidebarService} _fuseSidebarService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      * @param {Renderer2} _renderer
      */
     constructor(
@@ -97,7 +97,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         private _fuseConfigService: FuseConfigService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseSidebarService: FuseSidebarService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
         private _renderer: Renderer2
     )
     {
@@ -319,7 +319,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             .subscribe(() => {
 
                 // Get the active status
-                const isActive = this._observableMedia.isActive(this.lockedOpen);
+                const isActive = this._mediaObserver.isActive(this.lockedOpen);
 
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -30,13 +30,13 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
      * @param {MatSidenav} _matSidenav
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
         private _matSidenav: MatSidenav,
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -58,7 +58,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
         // Register the sidenav to the service
         this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);
 
-        if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+        if ( this._mediaObserver.isActive(this.matIsLockedOpen) )
         {
             this.isLockedOpen = true;
             this._matSidenav.mode = 'side';
@@ -74,7 +74,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
-                if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+                if ( this._mediaObserver.isActive(this.matIsLockedOpen) )
                 {
                     this.isLockedOpen = true;
                     this._matSidenav.mode = 'side';

src/@fuse/scss/partials/plugins/_ngx-datatable.scss

@@ -95,6 +95,11 @@
                 min-height: 48px;
                 font-size: 13px;
                 padding: 0 24px;
+
+                .datatable-header-cell-template-wrap {
+                    display: inline-flex;
+                    align-items: center;
+                }
             }
         }
 
@@ -172,7 +177,7 @@
 }
 
 [class*="datatable-icon-"] {
-    font-family: 'Material Icons';
+    font-family: 'material-outline-icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
@@ -204,11 +209,11 @@
 }
 
 .datatable-icon-up:before {
-    content: "keyboard_arrow_up";
+    content: "arrow_drop_up";
 }
 
 .datatable-icon-down:before {
-    content: "keyboard_arrow_down";
+    content: "arrow_drop_down";
 }
 
 .datatable-icon-sort:before {
@@ -249,4 +254,4 @@
 
 .datatable-icon-prev:before {
     content: "skip_previous";
-}
+}

src/@fuse/services/config.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { Router, RoutesRecognized } from '@angular/router';
+import { ResolveEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -96,7 +96,7 @@ export class FuseConfigService
         // Reload the default layout config on every RoutesRecognized event
         // if the current layout config is different from the default one
         this._router.events
-            .pipe(filter(event => event instanceof RoutesRecognized))
+            .pipe(filter(event => event instanceof ResolveEnd))
             .subscribe(() => {
                 if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
                 {

src/@fuse/services/match-media.service.ts

@@ -1,4 +1,4 @@
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -14,10 +14,10 @@ export class FuseMatchMediaService
     /**
      * Constructor
      *
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -39,7 +39,7 @@ export class FuseMatchMediaService
      */
     private _init(): void
     {
-        this._observableMedia.asObservable()
+        this._mediaObserver.media$
             .pipe(
                 debounceTime(500),
                 distinctUntilChanged()

src/app/app.theme.scss

@@ -61,7 +61,7 @@ $custom_palettes: (
 // @ Typography
 // -----------------------------------------------------------------------------------------------------
 
-// Force the input field font sizes to 16px
+// Angular Material typography
 $typography: mat-typography-config(
     $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
     $title: mat-typography-level(20px, 32px, 600),

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -78,7 +78,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -129,4 +129,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -129,4 +129,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -76,7 +76,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -115,4 +115,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/environments/environment.ts

@@ -1,5 +1,5 @@
 // This file can be replaced during build by using the `fileReplacements` array.
-// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
@@ -8,9 +8,10 @@ export const environment = {
 };
 
 /*
- * In development mode, to ignore zone related error stack frames such as
+ * For easier debugging in development mode, you can import the following file
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- * import the following file, but please comment it out in production mode
+ *
- * because it will have performance impact when throw error
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
  */
 // import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/karma.conf.js

@@ -18,7 +18,7 @@ module.exports = function (config)
         },
         coverageIstanbulReporter: {
             dir                  : require('path').join(__dirname, '../coverage'),
-            reports              : ['html', 'lcovonly'],
+            reports              : ['html', 'lcovonly', 'text-summary'],
             fixWebpackSourcePaths: true
         },
         reporters               : ['progress', 'kjhtml'],
@@ -29,4 +29,4 @@ module.exports = function (config)
         browsers                : ['Chrome'],
         singleRun               : false
     });
-};
+};

src/main.ts

@@ -1,8 +1,8 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from 'app/app.module';
+import { AppModule } from './app/app.module';
-import { environment } from 'environments/environment';
+import { environment } from './environments/environment';
 import { hmrBootstrap } from 'hmr';
 
 if ( environment.production )

src/tsconfig.app.json

@@ -1,8 +1,7 @@
 {
     "extends": "../tsconfig.json",
     "compilerOptions": {
-        "outDir": "../out-tsc/app",
+        "outDir": "../out-tsc/app"
-        "module": "es2015"
     },
     "exclude": [
         "test.ts",

tsconfig.json

@@ -5,9 +5,11 @@
         "outDir": "./dist/out-tsc",
         "sourceMap": true,
         "declaration": false,
+        "module": "es2015",
         "moduleResolution": "node",
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
+        "importHelpers": true,
         "paths": {
             "@fuse": [
                 "@fuse/"

tslint.json

@@ -1,6 +1,6 @@
 {
     "rulesDirectory": [
-        "node_modules/codelyzer"
+        "codelyzer"
     ],
     "rules": {
         "arrow-return-shorthand": true,