Merge branch 'master' into skeleton

.angular-cli.json

@@ -37,13 +37,16 @@
     },
     "lint": [
         {
-            "project": "src/tsconfig.app.json"
+            "project": "src/tsconfig.app.json",
+            "exclude": "**/node_modules/**"
         },
         {
-            "project": "src/tsconfig.spec.json"
+            "project": "src/tsconfig.spec.json",
+            "exclude": "**/node_modules/**"
         },
         {
-            "project": "e2e/tsconfig.e2e.json"
+            "project": "e2e/tsconfig.e2e.json",
+            "exclude": "**/node_modules/**"
         }
     ],
     "test": {

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-Material Design Admin Template with Angular 4+ and Angular Material 2
+Material Design Admin Template with Angular 5+ and Angular Material 2
 
 ## Development server
 

e2e/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { Fuse2Page } from './app.po';
+import { AppPage } from './app.po';
 
-describe('fuse2 App', () => {
+describe('angular5 App', () => {
-  let page: Fuse2Page;
+    let page: AppPage;
 
-  beforeEach(() => {
+    beforeEach(() => {
-    page = new Fuse2Page();
+        page = new AppPage();
-  });
+    });
 
-  it('should display welcome message', () => {
+    it('should display welcome message', () => {
-    page.navigateTo();
+        page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
-  });
+    });
 });

e2e/app.po.ts

@@ -1,11 +1,14 @@
-import { browser, by, element } from 'protractor';
+import { AppPage } from './app.po';
 
-export class Fuse2Page {
+describe('Fuse App', () => {
-  navigateTo() {
+    let page: AppPage;
-    return browser.get('/');
-  }
 
-  getParagraphText() {
+    beforeEach(() => {
-    return element(by.css('app-root h1')).getText();
+        page = new AppPage();
-  }
+    });
-}
+
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
+    });
+});

e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

karma.conf.js

@@ -1,33 +1,33 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
-  config.set({
+    config.set({
-    basePath: '',
+        basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+        frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
+        plugins: [
-      require('karma-jasmine'),
+            require('karma-jasmine'),
-      require('karma-chrome-launcher'),
+            require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
+            require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+            require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+            require('@angular/cli/plugins/karma')
-    ],
+        ],
-    client:{
+        client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
+        },
-    coverageIstanbulReporter: {
+        coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+            reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
+            fixWebpackSourcePaths: true
-    },
+        },
-    angularCli: {
+        angularCli: {
-      environment: 'dev'
+            environment: 'dev'
-    },
+        },
-    reporters: ['progress', 'kjhtml'],
+        reporters: ['progress', 'kjhtml'],
-    port: 9876,
+        port: 9876,
-    colors: true,
+        colors: true,
-    logLevel: config.LOG_INFO,
+        logLevel: config.LOG_INFO,
-    autoWatch: true,
+        autoWatch: true,
-    browsers: ['Chrome'],
+        browsers: ['Chrome'],
-    singleRun: false
+        singleRun: false
-  });
+    });
 };

package.json

@@ -1,42 +1,42 @@
 {
   "name": "fuse2",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "license": "",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "start-hmr": "ng serve --hmr -e=hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
-    "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
+    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.1",
+    "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "4.4.6",
+    "@angular/animations": "5.0.0",
     "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.4.6",
+    "@angular/common": "5.0.0",
-    "@angular/compiler": "4.4.6",
+    "@angular/compiler": "5.0.0",
-    "@angular/core": "4.4.6",
+    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.9",
+    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "4.4.6",
+    "@angular/forms": "5.0.0",
-    "@angular/http": "4.4.6",
+    "@angular/http": "5.0.0",
     "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.4.6",
+    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "4.4.6",
+    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "4.4.6",
+    "@angular/router": "5.0.0",
     "@ngx-translate/core": "8.0.0",
-    "@swimlane/ngx-charts": "6.0.2",
+    "@swimlane/ngx-charts": "6.1.0",
-    "@swimlane/ngx-datatable": "9.3.1",
+    "@swimlane/ngx-datatable": "10.4.0",
-    "@swimlane/ngx-dnd": "3.0.0",
+    "@withinpixels/ngx-dnd": "3.1.0",
-    "angular-calendar": "0.21.2",
+    "angular-calendar": "0.21.3",
-    "angular-in-memory-web-api": "0.5.0",
+    "angular-in-memory-web-api": "0.5.1",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
-    "d3": "4.10.0",
+    "d3": "4.11.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
@@ -44,30 +44,30 @@
     "ngx-color-picker": "4.4.0",
     "ngx-cookie-service": "1.0.9",
     "perfect-scrollbar": "1.0.3",
-    "rxjs": "5.4.3",
+    "rxjs": "5.5.2",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.7",
+    "@angular/cli": "1.5.0",
-    "@angular/compiler-cli": "4.4.6",
+    "@angular/compiler-cli": "5.0.0",
-    "@angular/language-service": "4.4.6",
+    "@angular/language-service": "5.0.0",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.6.0",
+    "@types/jasmine": "2.5.54",
-    "@types/jasminewd2": "2.0.2",
+    "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.88",
+    "@types/node": "6.0.90",
-    "codelyzer": "3.2.0",
+    "codelyzer": "3.2.2",
-    "jasmine-core": "2.6.2",
+    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.0",
+    "jasmine-spec-reporter": "4.1.1",
     "karma": "1.7.1",
     "karma-chrome-launcher": "2.1.1",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.1.2",
-    "ts-node": "3.2.0",
+    "ts-node": "3.2.2",
     "tslint": "5.7.0",
-    "typescript": "2.3.3"
+    "typescript": "2.4.2"
   }
 }

protractor.conf.js

@@ -4,25 +4,25 @@
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
-  allScriptsTimeout: 11000,
+    allScriptsTimeout: 11000,
-  specs: [
+    specs: [
-    './e2e/**/*.e2e-spec.ts'
+        './e2e/**/*.e2e-spec.ts'
-  ],
+    ],
-  capabilities: {
+    capabilities: {
-    'browserName': 'chrome'
+        'browserName': 'chrome'
-  },
+    },
-  directConnect: true,
+    directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+    baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+    framework: 'jasmine',
-  jasmineNodeOpts: {
+    jasmineNodeOpts: {
-    showColors: true,
+        showColors: true,
-    defaultTimeoutInterval: 30000,
+        defaultTimeoutInterval: 30000,
-    print: function() {}
+        print: function() {}
-  },
+    },
-  onPrepare() {
+    onPrepare() {
-    require('ts-node').register({
+        require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+            project: 'e2e/tsconfig.e2e.json'
-    });
+        });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
+    }
 };

src/app/core/animations.ts

@@ -129,6 +129,17 @@ export const fuseAnimations = [
         transition('* => void', animate('300ms'))
     ]),
 
+    trigger('expandCollapse', [
+        state('void', style({
+            height: '0px'
+        })),
+        state('*', style({
+            height: '*'
+        })),
+        transition('void => *', animate('300ms ease-out')),
+        transition('* => void', animate('300ms ease-in'))
+    ]),
+
     trigger('routerTransitionLeft', [
 
         transition('* => *', [

src/app/core/components/countdown/countdown.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import * as moment from 'moment';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/interval';
 
 @Component({
     selector   : 'fuse-countdown',

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html

@@ -1,4 +1,5 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
     <span class="nav-link-badge" *ngIf="item.badge"

src/app/core/components/navigation/navigation.component.html

@@ -22,7 +22,7 @@
 
             <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
             <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
-            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
 
         </ng-container>
 

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts

@@ -166,7 +166,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
                 }
             }
 
-            if ( parent.children[i].url === url )
+            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
             {
                 return true;
             }

src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html

@@ -1,4 +1,5 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
     <span class="nav-link-badge" *ngIf="item.badge"

src/app/core/components/theme-options/theme-options.component.html

@@ -21,6 +21,12 @@
             <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
         </mat-radio-group>
 
+        <h3>Navigation Fold (for vertical navigation):</h3>
+        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+                          (change)="onSettingsChange()">
+            Folded
+        </mat-slide-toggle>
+
         <h3 class="mt-24">Toolbar:</h3>
         <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>

src/app/core/fuseUtils.ts

@@ -82,10 +82,12 @@ export class FuseUtils
     {
         function S4()
         {
-            return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
+            return Math.floor((1 + Math.random()) * 0x10000)
+                       .toString(16)
+                       .substring(1);
         }
 
-        return (S4() + S4());
+        return S4() + S4();
     }
 
     public static toggleInArray(item, array)
@@ -99,4 +101,14 @@ export class FuseUtils
             array.splice(array.indexOf(item), 1);
         }
     }
+
+    public static handleize(text)
+    {
+        return text.toString().toLowerCase()
+                   .replace(/\s+/g, '-')           // Replace spaces with -
+                   .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+                   .replace(/\-\-+/g, '-')         // Replace multiple - with single -
+                   .replace(/^-+/, '')             // Trim - from start of text
+                   .replace(/-+$/, '');            // Trim - from end of text
+    }
 }

src/app/core/modules/shared.module.ts

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { NgxDnDModule } from '@swimlane/ngx-dnd';
+import { NgxDnDModule } from '@withinpixels/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';

src/app/core/scss/core.scss

@@ -25,6 +25,7 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+@import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";

src/app/core/scss/partials/_cards.scss

@@ -0,0 +1,154 @@
+.fuse-card {
+    max-width: 320px;
+    min-width: 320px;
+    background: white;
+    border-radius: 2px;
+    @include mat-elevation(2);
+
+    &.variable-width {
+        min-width: 0;
+    }
+
+    .card-rich-media {
+        position: relative;
+
+        .card-title {
+            position: absolute;
+            right: 16px;
+            bottom: 16px;
+            left: 16px;
+            font-size: 20px;
+            color: white;
+        }
+    }
+
+    .card-media-header {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+
+        &.medium {
+            align-items: flex-start;
+
+            .card-rich-media {
+                width: 120px;
+                height: 120px;
+            }
+        }
+
+        &.large {
+            align-items: flex-start;
+
+            .card-rich-media {
+                width: 160px;
+                height: 160px;
+            }
+        }
+
+        .card-primary-title {
+            padding: 0 16px 0 0;
+            flex: 1;
+        }
+
+        .card-rich-media {
+            width: 80px;
+            height: 80px;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-avatar-header {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+
+        .card-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 100%;
+            margin-right: 16px;
+        }
+
+        .card-avatar-title {
+
+            .card-title {
+                font-size: 14px;
+                font-weight: bold;
+            }
+
+            .card-subtitle {
+                font-size: 13px;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .card-primary-title {
+        padding: 16px;
+
+        .card-title {
+            font-size: 24px;
+        }
+
+        .card-subtitle {
+            font-size: 14px;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-supporting-text {
+        padding: 16px;
+        font-size: 14px;
+        line-height: 1.75;
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-actions {
+        display: flex;
+        padding: 8px;
+
+        &.icon-buttons {
+            padding: 0 8px;
+        }
+
+        &.align-center {
+            justify-content: center;
+        }
+
+        &.align-right {
+            justify-content: flex-end;
+        }
+
+        .mat-button {
+            min-width: 0 !important;
+            padding: 0 8px !important;
+        }
+
+        .card-expander {
+            margin-left: auto;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-expand-area {
+        overflow: hidden;
+
+        .card-expanded-supporting-text {
+            padding: 8px 16px 16px 16px;
+            font-size: 14px;
+            line-height: 1.75;
+        }
+    }
+}

src/app/core/scss/partials/_colors.scss

@@ -187,6 +187,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         // Generate material element colors
         // based on current contrast color
         @include generateMaterialElementColors($contrastColor);
+
+        &[disabled] {
+            background-color: rgba($color, .12) !important;
+            color: rgba($contrastColor, .26) !important;
+        }
     }
 
     .#{$colorName}#{$hue}-fg {

src/app/core/scss/partials/_navigation.scss

@@ -195,6 +195,10 @@
 
         > .nav-item {
 
+            > .nav-link {
+                height: 56px;
+            }
+
             &.nav-collapse {
                 position: relative;
 

src/app/core/scss/partials/_page-layouts.scss

@@ -96,7 +96,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         max-height: $carded-toolbar-height;
                     }
 
-                    .content {
+                    > .content {
                         display: flex;
                         flex: 1;
                         overflow: auto;

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

@@ -55,6 +55,7 @@
                     min-height: 48px;
                     transition: none;
                     padding: 0 24px;
+                    overflow: hidden;
                 }
             }
         }
@@ -82,6 +83,16 @@
 
                 .datatable-pager {
                     margin: 0 0 0 24px;
+
+                    .pager {
+
+                        li {
+
+                            a {
+                                text-decoration: none !important;
+                            }
+                        }
+                    }
                 }
             }
         }

src/app/core/services/config.service.ts

@@ -22,10 +22,11 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation: 'left', // 'right', 'left', 'top', 'none'
+                navigation      : 'left', // 'right', 'left', 'top', 'none'
-                toolbar   : 'below', // 'above', 'below', 'none'
+                navigationFolded: false, // true, false
-                footer    : 'below', // 'above', 'below', 'none'
+                toolbar         : 'below', // 'above', 'below', 'none'
-                mode      : 'fullwidth' // 'boxed', 'fullwidth'
+                footer          : 'below', // 'above', 'below', 'none'
+                mode            : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
                 toolbar: 'mat-white-500-bg',
@@ -44,6 +45,7 @@ export class FuseConfigService
             this.defaultSettings.customScrollbars = false;
         }
 
+        // Set the settings from the default settings
         this.settings = Object.assign({}, this.defaultSettings);
 
         // Reload the default settings on every navigation start
@@ -58,7 +60,6 @@ export class FuseConfigService
 
         // Create the behavior subject
         this.onSettingsChanged = new BehaviorSubject(this.settings);
-
     }
 
     /**
@@ -67,7 +68,10 @@ export class FuseConfigService
      */
     setSettings(settings)
     {
+        // Set the settings from the given object
         this.settings = Object.assign({}, this.settings, settings);
+
+        // Trigger the event
         this.onSettingsChanged.next(this.settings);
     }
 }

src/app/main/main.component.html

@@ -4,13 +4,13 @@
 
         <!-- TOOLBAR: Above -->
         <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
-            <fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+            <fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
         </ng-container>
         <!-- / TOOLBAR: Above -->
 
         <!-- NAVBAR: Top -->
         <fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
-                                [class]="fuseSettings.colorClasses.navbar"
+                                [ngClass]="fuseSettings.colorClasses.navbar"
                                 *ngIf="fuseSettings.layout.navigation === 'top'">
         </fuse-navbar-horizontal>
         <!-- / NAVBAR: Top -->
@@ -18,9 +18,9 @@
         <div id="wrapper">
 
             <!-- NAVBAR: Left -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="left-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Left -->
@@ -29,7 +29,7 @@
 
                 <!-- TOOLBAR: Below -->
                 <ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
-                    <fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+                    <fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
                 </ng-container>
                 <!-- / TOOLBAR: Below -->
 
@@ -37,16 +37,16 @@
 
                 <!-- FOOTER: Below -->
                 <ng-container *ngIf="fuseSettings.layout.footer === 'below'">
-                    <fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+                    <fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
                 </ng-container>
                 <!-- / FOOTER: Below -->
 
             </div>
 
             <!-- NAVBAR: Right -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="right-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'right'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Right -->
@@ -55,7 +55,7 @@
 
         <!-- FOOTER: Above -->
         <ng-container *ngIf="fuseSettings.layout.footer === 'above'">
-            <fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+            <fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
         </ng-container>
         <!-- FOOTER: Above -->
 

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

@@ -18,13 +18,34 @@ import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/anim
 export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 {
     private _backdropElement: HTMLElement | null = null;
+    private _folded = false;
+
     @HostBinding('class.close') isClosed: boolean;
     @HostBinding('class.folded') isFoldedActive: boolean;
     @HostBinding('class.folded-open') isFoldedOpen: boolean;
     @HostBinding('class.initialized') initialized: boolean;
-    @Input('folded') foldedByDefault = false;
     @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
 
+    @Input()
+    set folded(value: boolean)
+    {
+        this._folded = value;
+
+        if ( this._folded )
+        {
+            this.activateFolded();
+        }
+        else
+        {
+            this.deActivateFolded();
+        }
+    }
+
+    get folded(): boolean
+    {
+        return this._folded;
+    }
+
     matchMediaWatcher: Subscription;
     navigationServiceWatcher: Subscription;
     fusePerfectScrollbarUpdateTimeout;
@@ -36,11 +57,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         private fuseMatchMedia: FuseMatchMedia,
         private fuseNavigationService: FuseNavigationService,
         private navBarService: FuseNavbarVerticalService,
-        public media: ObservableMedia,
         private router: Router,
         private _renderer: Renderer2,
         private _elementRef: ElementRef,
-        private animationBuilder: AnimationBuilder
+        private animationBuilder: AnimationBuilder,
+        public media: ObservableMedia
     )
     {
         navBarService.setNavBar(this);
@@ -88,7 +109,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     ngOnInit()
     {
         this.isClosed = false;
-        this.isFoldedActive = this.foldedByDefault;
+        this.isFoldedActive = this._folded;
         this.isFoldedOpen = false;
         this.initialized = false;
         this.updateCssClasses();
@@ -104,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         }
         else
         {
-            if ( !this.foldedByDefault )
+            if ( !this._folded )
             {
                 this.deActivateFolded();
             }
@@ -124,6 +145,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     openBar()
     {
+        if ( !this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = false;
         this.updateCssClasses();
         if ( this.media.isActive('lt-lg') )
@@ -134,6 +160,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     closeBar()
     {
+        if ( this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = true;
         this.updateCssClasses();
         this._detachBackdrop();
@@ -191,15 +222,15 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     updateCssClasses()
     {
-        if ( this.isClosed )
+        if ( !this.isClosed )
         {
-            this.fuseMainComponent.addClass('fuse-nav-bar-opened');
+            this.fuseMainComponent.addClass('fuse-navbar-opened');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-closed');
+            this.fuseMainComponent.removeClass('fuse-navbar-closed');
         }
         else
         {
-            this.fuseMainComponent.addClass('fuse-nav-bar-closed');
+            this.fuseMainComponent.addClass('fuse-navbar-closed');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-opened');
+            this.fuseMainComponent.removeClass('fuse-navbar-opened');
         }
     }
 

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

@@ -7,7 +7,7 @@
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    fuseNavbarVertical="openBar" fxHide.gt-md>
+                    fuseNavbarVertical="toggleBar" fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
             </button>
 

src/polyfills.ts

@@ -39,14 +39,17 @@ import 'core-js/es7/array';
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
+/** IE10 and IE11 requires the following for the Reflect API. */
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'core-js/es6/reflect';
 
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es7/reflect';
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /***************************************************************************************************

src/test.ts

@@ -17,8 +17,7 @@ declare const __karma__: any;
 declare const require: any;
 
 // Prevent Karma from running prematurely.
-__karma__.loaded = function () {
+__karma__.loaded = function () {};
-};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

src/tsconfig.app.json

@@ -2,8 +2,8 @@
     "extends": "../tsconfig.json",
     "compilerOptions": {
         "outDir": "../out-tsc/app",
+        "baseUrl": "./",
         "module": "es2015",
-        "baseUrl": "",
         "types": []
     },
     "exclude": [

src/tsconfig.spec.json

@@ -2,9 +2,9 @@
     "extends": "../tsconfig.json",
     "compilerOptions": {
         "outDir": "../out-tsc/spec",
+        "baseUrl": "./",
         "module": "commonjs",
         "target": "es5",
-        "baseUrl": "",
         "types": [
             "jasmine",
             "node"

src/typings.d.ts

@@ -1,7 +1,5 @@
 /* SystemJS module definition */
 declare var module: NodeModule;
-
+interface NodeModule {
-interface NodeModule
-{
     id: string;
 }

tsconfig.json

@@ -2,7 +2,6 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
-    "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
@@ -13,7 +12,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "es2016",
+      "es2017",
       "dom"
     ]
   }