Merge branch 'master' into skeleton

package-lock.json

@@ -108,7 +108,7 @@
         "less-loader": "4.0.6",
         "license-webpack-plugin": "1.2.3",
         "loader-utils": "1.1.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "memory-fs": "0.4.1",
         "minimatch": "3.0.4",
         "node-modules-path": "1.0.1",
@@ -373,6 +373,12 @@
         "@types/jasmine": "2.8.6"
       }
     },
+    "@types/lodash": {
+      "version": "4.14.106",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.106.tgz",
+      "integrity": "sha512-tOSvCVrvSqFZ4A/qrqqm6p37GZoawsZtoR0SJhlF7EonNZUgrn8FfT+RNQ11h+NUpMt6QVe36033f3qEKBwfWA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "6.0.101",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.101.tgz",
@@ -845,7 +851,7 @@
       "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
       "dev": true,
       "requires": {
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       }
     },
     "async-each": {
@@ -969,7 +975,7 @@
         "babel-types": "6.26.0",
         "detect-indent": "4.0.0",
         "jsesc": "1.3.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "source-map": "0.5.7",
         "trim-right": "1.0.1"
       },
@@ -1011,7 +1017,7 @@
         "babel-traverse": "6.26.0",
         "babel-types": "6.26.0",
         "babylon": "6.18.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       }
     },
     "babel-traverse": {
@@ -1028,7 +1034,7 @@
         "debug": "2.6.9",
         "globals": "9.18.0",
         "invariant": "2.2.3",
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       }
     },
     "babel-types": {
@@ -1039,7 +1045,7 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "esutils": "2.0.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "to-fast-properties": "1.0.3"
       }
     },
@@ -2050,7 +2056,7 @@
       "integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
       "dev": true,
       "requires": {
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       }
     },
     "combine-source-map": {
@@ -5334,7 +5340,7 @@
       "optional": true,
       "requires": {
         "glob": "7.1.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "minimatch": "3.0.4"
       }
     },
@@ -5641,7 +5647,7 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "request": "2.81.0"
       }
     },
@@ -5728,7 +5734,7 @@
         "bluebird": "3.5.1",
         "html-minifier": "3.5.10",
         "loader-utils": "0.2.17",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "pretty-error": "2.1.1",
         "toposort": "1.0.6"
       },
@@ -5867,7 +5873,7 @@
       "requires": {
         "http-proxy": "1.16.2",
         "is-glob": "3.1.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "micromatch": "2.3.11"
       },
       "dependencies": {
@@ -6826,7 +6832,7 @@
         "graceful-fs": "4.1.11",
         "http-proxy": "1.16.2",
         "isbinaryfile": "3.0.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "log4js": "2.5.2",
         "mime": "1.6.0",
         "minimatch": "3.0.4",
@@ -7078,10 +7084,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.4",
+      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+      "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
-      "dev": true
     },
     "lodash.assign": {
       "version": "4.2.0",
@@ -7358,7 +7363,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "lodash": "4.17.4"
+            "lodash": "4.17.5"
           }
         },
         "debug": {
@@ -9675,7 +9680,7 @@
       "optional": true,
       "requires": {
         "extend": "3.0.1",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "request": "2.81.0",
         "when": "3.7.8"
       },
@@ -9822,7 +9827,7 @@
       "optional": true,
       "requires": {
         "glob": "7.1.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "scss-tokenizer": "0.2.3",
         "yargs": "7.1.0"
       }
@@ -12612,7 +12617,7 @@
         "express": "4.16.2",
         "filesize": "3.6.0",
         "gzip-size": "4.1.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "mkdirp": "0.5.1",
         "opener": "1.4.3",
         "ws": "4.1.0"

package.json

@@ -49,6 +49,7 @@
     "d3": "4.13.0",
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
+    "lodash": "4.17.5",
     "moment": "2.21.0",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.1",
@@ -67,6 +68,7 @@
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
+    "@types/lodash": "4.14.106",
     "@types/node": "6.0.101",
     "codelyzer": "4.2.1",
     "jasmine-core": "2.8.0",

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
@@ -7,8 +7,6 @@ import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseConfigService } from '@fuse/services/config.service';
 
-import { navigation } from 'app/navigation/navigation';
-
 @Component({
     selector   : 'fuse-shortcuts',
     templateUrl: './shortcuts.component.html',
@@ -25,6 +23,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     matchMediaSubscription: Subscription;
     onConfigChanged: Subscription;
 
+    @Input() navigation: any;
+
     @ViewChild('searchInput') searchInputField;
     @ViewChild('shortcuts') shortcutsEl: ElementRef;
 
@@ -37,8 +37,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private cookieService: CookieService
     )
     {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
-
         this.onConfigChanged =
             this.fuseConfig.onConfigChanged
                 .subscribe(
@@ -50,6 +48,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
+        // Get the navigation items and flatten them
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(this.navigation);
+
         const cookieExists = this.cookieService.check('FUSE2.shortcuts');
 
         if ( cookieExists )

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

@@ -46,7 +46,7 @@ export class FuseSidebarService
         // Check if the sidebar exists
         if ( !this._registry[key] )
         {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);
         }
 
         // Unregister the sidebar
@@ -57,13 +57,14 @@ export class FuseSidebarService
      * Return the sidebar with the given key
      *
      * @param key
+     * @returns {FuseSidebarComponent}
      */
-    getSidebar(key): any
+    getSidebar(key): FuseSidebarComponent
     {
         // Check if the sidebar exists
         if ( !this._registry[key] )
         {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);
 
             return;
         }

src/@fuse/components/theme-options/theme-options.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -6,8 +6,6 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
-import { navigation } from 'app/navigation/navigation';
-
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',
@@ -16,6 +14,7 @@ import { navigation } from 'app/navigation/navigation';
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
+    @Input() navigation;
     @ViewChild('openButton') openButton;
     @ViewChild('panel') panel;
     @ViewChild('overlay') overlay: ElementRef;
@@ -43,10 +42,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.config = newConfig;
                     }
                 );
+    }
+
+    ngOnInit()
+    {
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
+        });
 
         // Get the nav model and add customize nav item
         // that opens the bar programmatically
-        const nav: any = navigation;
+        const nav: any = this.navigation;
 
         nav.push({
             'id'      : 'custom-function',
@@ -66,13 +72,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         });
     }
 
-    ngOnInit()
-    {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
-        });
-    }
-
     ngOnDestroy()
     {
         this.onConfigChanged.unsubscribe();

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

@@ -1,25 +1,8 @@
-import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Platform } from '@angular/cdk/platform';
-
+import * as _ from 'lodash';
-// Define the default config
-const DEFAULT_CONFIG = {
-    layout          : {
-        navigation      : 'left', // 'right', 'left', 'top', 'none'
-        navigationFolded: false, // true, false
-        toolbar         : 'below', // 'above', 'below', 'none'
-        footer          : 'below', // 'above', 'below', 'none'
-        mode            : 'fullwidth' // 'boxed', 'fullwidth'
-    },
-    colorClasses    : {
-        toolbar: 'mat-white-500-bg',
-        navbar : 'mat-fuse-dark-700-bg',
-        footer : 'mat-fuse-dark-900-bg'
-    },
-    customScrollbars: true,
-    routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
-};
 
 // Create the injection token for the custom config
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
@@ -29,6 +12,7 @@ export class FuseConfigService
 {
     config: any;
     defaultConfig: any;
+    isSetConfigRan = false;
 
     onConfigChanged: BehaviorSubject<any>;
 
@@ -42,18 +26,11 @@ export class FuseConfigService
     constructor(
         private router: Router,
         public platform: Platform,
-        @Inject(FUSE_CONFIG) @Optional() config
+        @Inject(FUSE_CONFIG) config
     )
     {
-        // Set the default settings from the constant
+        // Set the default config from the user provided one (forRoot)
-        this.defaultConfig = DEFAULT_CONFIG;
+        this.defaultConfig = config;
-
-        // If custom config provided with forRoot,
-        // use them as default config...
-        if ( config )
-        {
-            this.defaultConfig = config;
-        }
 
         /**
          * Disable Custom Scrollbars if Browser is Mobile
@@ -64,14 +41,25 @@ export class FuseConfigService
         }
 
         // Set the config from the default config
-        this.config = {...this.defaultConfig};
+        this.config = _.cloneDeep(this.defaultConfig);
 
         // Reload the default settings for the
         // layout on every navigation start
         router.events.subscribe(
             (event) => {
+
                 if ( event instanceof NavigationStart )
                 {
+                    this.isSetConfigRan = false;
+                }
+
+                if ( event instanceof NavigationEnd )
+                {
+                    if ( this.isSetConfigRan )
+                    {
+                        return;
+                    }
+
                     this.setConfig({
                             layout: this.defaultConfig.layout
                         }
@@ -91,20 +79,11 @@ export class FuseConfigService
      */
     setConfig(config): void
     {
-        // Set the config from the given object
+        // Set the SetConfigRan true
-        // Ugly, but works for now...
+        this.isSetConfigRan = true;
-        this.config = {
+
-            ...this.config,
+        // Merge the config
-            ...config,
+        this.config = _.merge({}, this.config, config);
-            layout     : {
-                ...this.config.layout,
-                ...config.layout,
-            },
-            colorClasses: {
-                ...this.config.colorClasses,
-                ...config.colorClasses
-            }
-        };
 
         // Trigger the event
         this.onConfigChanged.next(this.config);

src/app/main/main.component.html

@@ -74,4 +74,4 @@
 
 </mat-sidenav-container>
 
-<fuse-theme-options></fuse-theme-options>
+<fuse-theme-options [navigation]="navigation"></fuse-theme-options>

src/app/main/main.component.ts

@@ -5,6 +5,8 @@ import { Subscription } from 'rxjs/Subscription';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector     : 'fuse-main',
     templateUrl  : './main.component.html',
@@ -15,6 +17,8 @@ export class FuseMainComponent implements OnDestroy
 {
     onConfigChanged: Subscription;
     fuseSettings: any;
+    navigation: any;
+
     @HostBinding('attr.fuse-layout-mode') layoutMode;
 
     constructor(
@@ -38,6 +42,8 @@ export class FuseMainComponent implements OnDestroy
         {
             this.document.body.className += ' is-mobile';
         }
+
+        this.navigation = navigation;
     }
 
     ngOnDestroy()

src/app/main/navbar/navbar.component.html

@@ -10,12 +10,12 @@
             </div>
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    (click)="toggleSidebarFolded('navbar')" fxHide.lt-lg>
+                    (click)="toggleSidebarFolded()" fxHide.lt-lg>
                 <mat-icon>menu</mat-icon>
             </button>
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
+                    (click)="toggleSidebarOpened()" fxHide.gt-md>
                 <mat-icon>arrow_back</mat-icon>
             </button>
 

src/app/main/navbar/navbar.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
@@ -6,6 +7,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarComponent } from '@fuse/components/sidebar/sidebar.component';
 
 @Component({
     selector     : 'fuse-navbar',
@@ -13,7 +15,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
     styleUrls    : ['./navbar.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarComponent implements OnDestroy
+export class FuseNavbarComponent implements OnInit, OnDestroy
 {
     private fusePerfectScrollbar: FusePerfectScrollbarDirective;
 
@@ -41,7 +43,8 @@ export class FuseNavbarComponent implements OnDestroy
 
     constructor(
         private sidebarService: FuseSidebarService,
-        private navigationService: FuseNavigationService
+        private navigationService: FuseNavigationService,
+        private router: Router
     )
     {
         // Navigation data
@@ -51,6 +54,21 @@ export class FuseNavbarComponent implements OnDestroy
         this.layout = 'vertical';
     }
 
+    ngOnInit()
+    {
+        this.router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationEnd )
+                {
+                    if ( this.sidebarService.getSidebar('navbar') )
+                    {
+                        this.sidebarService.getSidebar('navbar').close();
+                    }
+                }
+            }
+        );
+    }
+
     ngOnDestroy()
     {
         if ( this.fusePerfectScrollbarUpdateTimeout )
@@ -64,13 +82,13 @@ export class FuseNavbarComponent implements OnDestroy
         }
     }
 
-    toggleSidebarOpened(key)
+    toggleSidebarOpened()
     {
-        this.sidebarService.getSidebar(key).toggleOpen();
+        this.sidebarService.getSidebar('navbar').toggleOpen();
     }
 
-    toggleSidebarFolded(key)
+    toggleSidebarFolded()
     {
-        this.sidebarService.getSidebar(key).toggleFold();
+        this.sidebarService.getSidebar('navbar').toggleFold();
     }
 }

src/app/main/toolbar/toolbar.component.html

@@ -21,7 +21,7 @@
             </div>
 
             <div class="px-8 px-mat-16">
-                <fuse-shortcuts></fuse-shortcuts>
+                <fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
             </div>
 
         </div>

src/app/main/toolbar/toolbar.component.ts

@@ -5,6 +5,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector   : 'fuse-toolbar',
     templateUrl: './toolbar.component.html',
@@ -19,6 +21,7 @@ export class FuseToolbarComponent
     showLoadingBar: boolean;
     horizontalNav: boolean;
     noNav: boolean;
+    navigation: any;
 
     constructor(
         private router: Router,
@@ -87,6 +90,7 @@ export class FuseToolbarComponent
             this.noNav = settings.layout.navigation === 'none';
         });
 
+        this.navigation = navigation;
     }
 
     toggleSidebarOpened(key)