Added missing variables that prevents skeleton from building as it is

+ Renamed 'mat-sidenav-helper' files/folders to 'fuse-mat-sidenav-helper' & fixed its import issues

.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';
 
-describe('fuse2 App', () => {
-  let page: Fuse2Page;
+describe('Fuse2 App', () => {
+    let page: Fuse2Page;
 
-  beforeEach(() => {
-    page = new Fuse2Page();
-  });
+    beforeEach(() => {
+        page = new Fuse2Page();
+    });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
-  });
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
+    });
 });

e2e/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class Fuse2Page {
-  navigateTo() {
-    return browser.get('/');
-  }
+    navigateTo() {
+        return browser.get('/');
+    }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+    getParagraphText() {
+        return element(by.css('app-root h1')).getText();
+    }
 }

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({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular/cli'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular/cli/plugins/karma')
+        ],
+        client:{
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+            reports: [ 'html', 'lcovonly' ],
+            fixWebpackSourcePaths: true
+        },
+        angularCli: {
+            environment: 'dev'
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false
+    });
 };

package.json

@@ -1,75 +1,72 @@
 {
   "name": "fuse2",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "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-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "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": {
-    "@angular/animations": "4.4.3",
-    "@angular/cdk": "2.0.0-beta.11",
-    "@angular/common": "4.4.3",
-    "@angular/compiler": "4.4.3",
-    "@angular/core": "4.4.3",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.4.3",
-    "@angular/http": "4.4.3",
-    "@angular/material": "2.0.0-beta.11",
-    "@angular/platform-browser": "4.4.3",
-    "@angular/platform-browser-dynamic": "4.4.3",
-    "@angular/router": "4.4.3",
-    "@swimlane/ngx-charts": "6.0.2",
-    "@swimlane/ngx-datatable": "9.3.1",
-    "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.19.0",
-    "angular-in-memory-web-api": "0.4.6",
+    "@agm/core": "1.0.0-beta.2",
+    "@angular/animations": "5.0.1",
+    "@angular/cdk": "5.0.0-rc0",
+    "@angular/common": "5.0.1",
+    "@angular/compiler": "5.0.1",
+    "@angular/core": "5.0.1",
+    "@angular/flex-layout": "2.0.0-beta.10",
+    "@angular/forms": "5.0.1",
+    "@angular/http": "5.0.1",
+    "@angular/material": "5.0.0-rc0",
+    "@angular/platform-browser": "5.0.1",
+    "@angular/platform-browser-dynamic": "5.0.1",
+    "@angular/router": "5.0.1",
+    "@ngx-translate/core": "8.0.0",
+    "@swimlane/ngx-charts": "6.1.0",
+    "@swimlane/ngx-datatable": "11.0.3",
+    "@withinpixels/ngx-dnd": "3.1.0",
+    "angular-calendar": "0.21.3",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
-    "d3": "4.10.0",
+    "core-js": "2.5.1",
+    "d3": "4.11.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
-    "md2": "0.0.28",
-    "moment": "2.18.1",
-    "ngx-color-picker": "4.3.1",
-    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.6.2",
-    "perfect-scrollbar": "0.8.1",
-    "rxjs": "5.4.3",
+    "moment": "2.19.2",
+    "ngx-color-picker": "4.4.0",
+    "ngx-cookie-service": "1.0.9",
+    "perfect-scrollbar": "1.0.3",
+    "rxjs": "5.5.2",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.2",
-    "@angular/compiler-cli": "4.4.3",
-    "@angular/language-service": "4.4.3",
+    "@angular/cli": "1.5.0",
+    "@angular/compiler-cli": "5.0.1",
+    "@angular/language-service": "5.0.1",
     "@angularclass/hmr": "2.1.3",
-    "@ngtools/webpack": "1.7.1",
-    "@types/jasmine": "2.6.0",
-    "@types/jasminewd2": "2.0.2",
-    "@types/node": "6.0.88",
-    "codelyzer": "3.0.1",
-    "jasmine-core": "2.6.2",
-    "jasmine-spec-reporter": "4.1.0",
+    "@types/jasmine": "2.5.54",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "6.0.90",
+    "codelyzer": "3.2.2",
+    "jasmine-core": "2.6.4",
+    "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",
-    "node-sass": "4.5.3",
     "protractor": "5.1.2",
-    "ts-node": "3.0.4",
-    "tslint": "5.3.2",
-    "typescript": "2.3.3"
+    "ts-node": "3.2.2",
+    "tslint": "5.7.0",
+    "typescript": "2.4.2"
   }
 }

protractor.conf.js

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

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector   : 'fuse-root',
@@ -8,7 +9,18 @@ import { FuseSplashScreenService } from './core/services/splash-screen.service';
 })
 export class AppComponent
 {
-    constructor(private fuseSplashScreen: FuseSplashScreenService)
+    constructor(
+        private fuseSplashScreen: FuseSplashScreenService,
+        private translate: TranslateService
+    )
     {
+        // Add languages
+        this.translate.addLangs(['en', 'tr']);
+
+        // Set the default language
+        this.translate.setDefaultLang('en');
+
+        // Use a language
+        this.translate.use('en');
     }
 }

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { FuseSampleModule } from './main/content/sample/sample.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 const appRoutes: Routes = [
     {
@@ -31,6 +32,7 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
+        TranslateModule.forRoot(),
         FuseMainModule,
         FuseSampleModule
     ],

src/app/core/animations.ts

@@ -33,21 +33,21 @@ export const fuseAnimations = [
                     stagger('50ms', [
                         animateChild()
                     ])
-                ])),
+                ], {optional: true})),
         transition('void => 100',
             query('@*',
                 [
                     stagger('100ms', [
                         animateChild()
                     ])
-                ])),
+                ], {optional: true})),
         transition('void => 200',
             query('@*',
                 [
                     stagger('200ms', [
                         animateChild()
                     ])
-                ]))
+                ], {optional: true}))
     ]),
 
     trigger('fadeInOut', [
@@ -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/confirm-dialog/confirm-dialog.component.html

@@ -1,6 +1,6 @@
-<h1 md-dialog-title>Confirm</h1>
-<div md-dialog-content>{{confirmMessage}}</div>
-<div md-dialog-actions class="pt-24">
-    <button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
-    <button md-button (click)="dialogRef.close(false)">Cancel</button>
+<h1 matDialogTitle>Confirm</h1>
+<div mat-dialog-content>{{confirmMessage}}</div>
+<div mat-dialog-actions class="pt-24">
+    <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
+    <button mat-button (click)="dialogRef.close(false)">Cancel</button>
 </div>

src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MdDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material';
 
 @Component({
     selector   : 'fuse-confirm-dialog',
@@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit
 {
     public confirmMessage: string;
 
-    constructor(public dialogRef: MdDialogRef<FuseConfirmDialogComponent>)
+    constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
     {
     }
 

src/app/core/components/copier/copier.service.ts

@@ -6,55 +6,60 @@
  *
  * Both released under MIT license - © Zeno Rocha
  */
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
-export class CopierService {
+export class CopierService
+{
 
-  private textarea: HTMLTextAreaElement;
+    private textarea: HTMLTextAreaElement;
 
-  /** Copy the text value to the clipboard. */
-  copyText(text: string): boolean {
-    this.createTextareaAndSelect(text);
+    /** Copy the text value to the clipboard. */
+    copyText(text: string): boolean
+    {
+        this.createTextareaAndSelect(text);
 
-    const copySuccessful = document.execCommand('copy');
-    this.removeFake();
+        const copySuccessful = document.execCommand('copy');
+        this.removeFake();
 
-    return copySuccessful;
-  }
-
-  /**
-   * Creates a hidden textarea element, sets its value from `text` property,
-   * and makes a selection on it.
-   */
-  private createTextareaAndSelect(text: string) {
-    // Create a fake element to hold the contents to copy
-    this.textarea = document.createElement('textarea');
-
-    // Prevent zooming on iOS
-    this.textarea.style.fontSize = '12pt';
-
-    // Hide the element
-    this.textarea.classList.add('cdk-visually-hidden');
-
-    // Move element to the same position vertically
-    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
-    this.textarea.style.top = yPosition + 'px';
-
-    this.textarea.setAttribute('readonly', '');
-    this.textarea.value = text;
-
-    document.body.appendChild(this.textarea);
-
-    this.textarea.select();
-    this.textarea.setSelectionRange(0, this.textarea.value.length);
-  }
-
-  /** Remove the text area from the DOM. */
-  private removeFake() {
-    if (this.textarea) {
-      document.body.removeChild(this.textarea);
-      this.textarea = null;
+        return copySuccessful;
+    }
+
+    /**
+     * Creates a hidden textarea element, sets its value from `text` property,
+     * and makes a selection on it.
+     */
+    private createTextareaAndSelect(text: string)
+    {
+        // Create a fake element to hold the contents to copy
+        this.textarea = document.createElement('textarea');
+
+        // Prevent zooming on iOS
+        this.textarea.style.fontSize = '12pt';
+
+        // Hide the element
+        this.textarea.classList.add('cdk-visually-hidden');
+
+        // Move element to the same position vertically
+        const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+        this.textarea.style.top = yPosition + 'px';
+
+        this.textarea.setAttribute('readonly', '');
+        this.textarea.value = text;
+
+        document.body.appendChild(this.textarea);
+
+        this.textarea.select();
+        this.textarea.setSelectionRange(0, this.textarea.value.length);
+    }
+
+    /** Remove the text area from the DOM. */
+    private removeFake()
+    {
+        if ( this.textarea )
+        {
+            document.body.removeChild(this.textarea);
+            this.textarea = null;
+        }
     }
-  }
 }

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/demo/demo-sidenav/demo-sidenav.component.html

@@ -1,100 +1,100 @@
 <div class="demo-sidenav">
-    <md-list>
-        <h3 md-subheader>Sidenav Demo</h3>
+    <mat-list>
+        <h3 matSubheader>Sidenav Demo</h3>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 1</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 2</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 3</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 4</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 5</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 6</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 7</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 8</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 9</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 10</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 11</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 12</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 13</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 14</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 15</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 16</span>
-        </md-list-item>
+        </mat-list-item>
 
-    </md-list>
+    </mat-list>
 </div>

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,23 +1,23 @@
-<button md-icon-button
+<button mat-icon-button
         type="button"
         class="mat-elevation-z1"
-        [mdMenuTriggerFor]="colorMenu"
-        (onMenuOpen)="onMenuOpen()"
-        [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
-    <md-icon>palette</md-icon>
+        [matMenuTriggerFor]="colorMenu"
+        (menuOpened)="onMenuOpen()"
+        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
+    <mat-icon>palette</mat-icon>
 </button>
 
-<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
+<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
 
-    <header [ngClass]="selectedColor?.class || 'md-accent-bg'"
+    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
             class="mat-elevation-z4"
             fxLayout="row"
             fxLayoutAlign="space-between center">
 
-        <button md-icon-button
+        <button mat-icon-button
                 [style.visibility]="view==='hues'?'visible':'hidden'"
                 (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
-            <md-icon class="s-20">arrow_back</md-icon>
+            <mat-icon class="s-20">arrow_back</mat-icon>
         </button>
 
         <span *ngIf="selectedColor?.palette">
@@ -28,11 +28,11 @@
             Select Color
         </span>
 
-        <button md-icon-button
+        <button mat-icon-button
                 class="remove-color-button"
                 (click)="removeColor()"
                 aria-label="Remove Color">
-            <md-icon class="s-20">delete</md-icon>
+            <mat-icon class="s-20">delete</mat-icon>
         </button>
     </header>
 
@@ -47,10 +47,10 @@
                  fxLayoutAlign="start start"
                  class="colors" fusePerfectScrollbar>
                 <div class="color"
-                     [ngClass]="'md-'+color.key+'-bg'"
+                     [ngClass]="'mat-'+color.key+'-bg'"
                      *ngFor="let color of (colors | keys)"
                      (click)="$event.stopPropagation();selectPalette(color.key)"
-                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{color.key}}
                     </span>
@@ -67,16 +67,16 @@
                 <div class="color"
                      *ngFor="let hue of hues"
                      [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
-                     [ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
+                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
                      (click)="selectHue(hue)"
-                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{hue}}
                     </span>
-                    <md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
+                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
                 </div>
             </div>
         </div>
 
     </div>
-</md-menu>
+</mat-menu>

src/app/core/components/material-color-picker/material-color-picker.component.scss

@@ -11,7 +11,7 @@
             overflow: hidden;
             min-height: 258px;
             height: 308px;
-            background-color: #f7f7f7;
+            background-color: #F7F7F7;
 
             .view {
                 position: absolute;
@@ -39,7 +39,7 @@
                             font-size: 10px;
                         }
 
-                        md-icon {
+                        mat-icon {
                             position: absolute;
                             top: 2px;
                             right: 2px;

src/app/core/components/material-color-picker/material-color-picker.component.ts

@@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             {
                 this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
                 this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
-                this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
             }
             else
             {

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

@@ -1,7 +1,7 @@
-<a class="nav-link" md-ripple>
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<a class="nav-link" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 
 <div class="children" [ngClass]="{'open': isOpen}">

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

@@ -1,6 +1,18 @@
-<a class="nav-link" md-ripple
-   [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<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" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
-</a>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" 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"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

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/navigation.service.ts

@@ -19,6 +19,7 @@ export class FuseNavigationService
 
     /**
      * Get navigation model
+     *
      * @returns {any[]}
      */
     getNavigationModel()
@@ -28,19 +29,125 @@ export class FuseNavigationService
 
     /**
      * Set the navigation model
+     *
      * @param model
      */
     setNavigationModel(model)
     {
-        // console.log(model);
-
         this.navigationModel = model;
-
-        console.log(this.navigationModel);
-
         this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
+    /**
+     * Add new navigation item
+     * to the given location
+     */
+    addNavigationItem(location, item)
+    {
+        // Parse the location
+        const locationArr = location.split('.');
+
+        if ( locationArr.length === 0 )
+        {
+            return;
+        }
+
+        // Find the navigation item
+        const navItem = this.findNavigationItemById(locationArr);
+
+        // Act according to the item type
+        switch ( navItem.type )
+        {
+            case 'item':
+
+                // Create a children array
+                navItem.children = [];
+
+                // Push the item
+                navItem.children.push(item);
+
+                // Change the item type to collapsable
+                navItem.type = 'collapse';
+
+                break;
+
+            case 'collapse':
+
+                // Push the item
+                navItem.children.push(item);
+
+                break;
+
+            case 'group':
+
+                // Push the item
+                navItem.children.push(item);
+
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    /**
+     * Get navigation item from
+     * given location
+     *
+     * @param location
+     */
+    getNavigationItem(location)
+    {
+        // Parse the location
+        const locationArr = location.split('.');
+
+        if ( locationArr.length === 0 )
+        {
+            return;
+        }
+
+        // Find and return the navigation item
+        return this.findNavigationItemById(locationArr);
+    }
+
+    /**
+     * Find navigation item by location
+     *
+     * @param location
+     * @param navigation
+     */
+    findNavigationItemById(location, navigation?)
+    {
+        if ( !navigation )
+        {
+            navigation = this.navigationModel.model;
+        }
+
+        // Iterate through the given navigation
+        for ( const navItem of navigation )
+        {
+            // If the nav item id equals the first location...
+            if ( navItem.id === location[0] )
+            {
+                // If there is more location to look at...
+                if ( location.length > 1 )
+                {
+                    // Remove the first item of the location
+                    location.splice(0, 1);
+
+                    // Go nested...
+                    return this.findNavigationItemById(location, navItem.children);
+                }
+
+                // Otherwise just return the nav item
+                else
+                {
+                    return navItem;
+                }
+            }
+        }
+    }
+
     /**
      * Get flattened navigation array
      * @param navigationItems

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

@@ -1,7 +1,7 @@
-<a class="nav-link" md-ripple (click)="toggleOpen($event)">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<a class="nav-link" matRipple (click)="toggleOpen($event)">
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">

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,6 +1,18 @@
-<a class="nav-link" md-ripple
-   [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<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" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
 </a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" 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"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

src/app/core/components/search-bar/search-bar.component.html

@@ -1,20 +1,20 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
     <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
         <label for="fuse-search-bar-input">
-            <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
-                <md-icon class="s-24">search</md-icon>
+                <mat-icon class="s-24">search</mat-icon>
             </button>
             <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
+                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
             </span>-->
         </label>
 
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
 
-        <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
+        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
                 aria-label="Collapse Search Bar">
-            <md-icon class="s-24">close</md-icon>
+            <mat-icon class="s-24">close</mat-icon>
         </button>
 
     </div>

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

@@ -2,8 +2,8 @@
 
     <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
          fxHide fxShow.lt-md>
-        <button md-icon-button (click)="showMobileShortcutsPanel()">
-            <md-icon class="amber-600-fg">star</md-icon>
+        <button mat-icon-button (click)="showMobileShortcutsPanel()">
+            <mat-icon class="amber-600-fg">star</mat-icon>
         </button>
     </div>
 
@@ -16,8 +16,8 @@
                 <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
                      *ngFor="let shortcutItem of shortcutItems">
 
-                    <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -25,64 +25,64 @@
 
                 </div>
 
-                <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
-                        (onMenuOpen)="onMenuOpen()">
-                    <md-icon class="amber-600-fg">star</md-icon>
+                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
+                        (menuOpened)="onMenuOpen()">
+                    <mat-icon class="amber-600-fg">star</mat-icon>
                 </button>
 
             </div>
 
             <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
-                <button md-icon-button (click)="hideMobileShortcutsPanel()">
-                    <md-icon>close</md-icon>
+                <button mat-icon-button (click)="hideMobileShortcutsPanel()">
+                    <mat-icon>close</mat-icon>
                 </button>
             </div>
 
         </div>
 
-        <md-menu #addMenu="mdMenu" class="w-240">
+        <mat-menu #addMenu="matMenu" class="w-240">
 
-            <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
-                <input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
-            </md-input-container>
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+                <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
+            </mat-form-field>
 
-            <md-divider></md-divider>
-            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+            <mat-divider></mat-divider>
+            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
-                <md-list-item *ngFor="let shortcutItem of shortcutItems"
-                              (click)="toggleShortcut($event, shortcutItem)">
+                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
+                               (click)="toggleShortcut($event, shortcutItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{shortcutItem.title}}</p>
-                        <md-icon class="ml-8">star</md-icon>
+                        <p matLine fxFlex>{{shortcutItem.title}}</p>
+                        <mat-icon class="ml-8">star</mat-icon>
                     </div>
-                </md-list-item>
-                <md-list-item *ngIf="shortcutItems.length === 0">
+                </mat-list-item>
+                <mat-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
-                </md-list-item>
-            </md-nav-list>
+                </mat-list-item>
+            </mat-nav-list>
 
-            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
-                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
-                              (click)="toggleShortcut($event, navigationItem)">
+            <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+                <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
+                               (click)="toggleShortcut($event, navigationItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                             {{navigationItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{navigationItem.title}}</p>
-                        <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
+                        <p matLine fxFlex>{{navigationItem.title}}</p>
+                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
                     </div>
-                </md-list-item>
-            </md-nav-list>
-        </md-menu>
+                </mat-list-item>
+            </mat-nav-list>
+        </mat-menu>
 
     </div>
 

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

@@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     onMenuOpen()
     {
-        this.searchInputField.nativeElement.focus();
+        setTimeout(() => {
+            this.searchInputField.nativeElement.focus();
+        });
     }
 
     showMobileShortcutsPanel()

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

@@ -1,50 +1,56 @@
-<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
-    <md-icon>settings</md-icon>
+<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
+    <mat-icon>settings</mat-icon>
 </button>
 
 <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
+<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
 
-    <button md-icon-button class="close-button" (click)="closeBar()">
-        <md-icon>close</md-icon>
+    <button mat-icon-button class="close-button" (click)="closeBar()">
+        <mat-icon>close</mat-icon>
     </button>
 
     <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
         <h3>Navigation:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
+            <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>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
+        </mat-radio-group>
 
         <h3 class="mt-24">Footer:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
+        </mat-radio-group>
 
         <h3 class="mt-24">Layout Mode:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
+        </mat-radio-group>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
         <h3>Colors:</h3>
         <div class="colors">
@@ -69,30 +75,31 @@
 
         </div>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
         <h3>Router Animation:</h3>
-        <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
-            <md-option value="none">
-                None
-            </md-option>
-            <md-option value="slideUp">
-                Slide up
-            </md-option>
-            <md-option value="slideDown">
-                Slide down
-            </md-option>
-            <md-option value="slideRight">
-                Slide right
-            </md-option>
-            <md-option value="slideLeft">
-                Slide left
-            </md-option>
-            <md-option value="fadeIn">
-                Fade in
-            </md-option>
-        </md-select>
-
+        <mat-form-field class="w-100-p">
+            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+                <mat-option value="none">
+                    None
+                </mat-option>
+                <mat-option value="slideUp">
+                    Slide up
+                </mat-option>
+                <mat-option value="slideDown">
+                    Slide down
+                </mat-option>
+                <mat-option value="slideRight">
+                    Slide right
+                </mat-option>
+                <mat-option value="slideLeft">
+                    Slide left
+                </mat-option>
+                <mat-option value="fadeIn">
+                    Fade in
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 
 </div>

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

@@ -14,6 +14,7 @@
     display: block;
     right: 0;
     top: 160px;
+    z-index: 998;
 
     &.bar-closed .theme-options-panel {
         display: none;
@@ -48,7 +49,7 @@
             color: rgba(0, 0, 0, 0.54);
         }
 
-        .mat-divider{
+        .mat-divider {
             display: block !important;
             width: 100%;
             margin: 24px 0 16px 0;
@@ -102,7 +103,7 @@
         opacity: .75;
         z-index: 998;
 
-        md-icon {
+        mat-icon {
             animation: rotating 3s linear infinite;
         }
 

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

@@ -3,6 +3,7 @@ import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/anim
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
 import { fuseAnimations } from '../../animations';
+import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -26,6 +27,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     constructor(
         private animationBuilder: AnimationBuilder,
         private fuseConfig: FuseConfigService,
+        private navigationService: FuseNavigationService,
         private renderer: Renderer2
     )
     {
@@ -38,6 +40,27 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.fuseSettings = newSettings;
                     }
                 );
+
+        // Get the nav model and add customize nav item
+        // that opens the bar programmatically
+        const navModel = this.navigationService.getNavigationModel();
+
+        navModel.push({
+            'id'      : 'custom-function',
+            'title'   : 'Custom Function',
+            'type'    : 'group',
+            'children': [
+                {
+                    'id'      : 'customize',
+                    'title'   : 'Customize',
+                    'type'    : 'item',
+                    'icon'    : 'settings',
+                    'function': () => {
+                        this.openBar();
+                    }
+                }
+            ]
+        });
     }
 
     ngOnInit()

src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts

@@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
         {
             setTimeout(() => {
                 this.viewContainer.createEmbeddedView(this.templateRef);
-            }, 350);
+            }, 300);
             this.isCreated = true;
         }
         else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )

src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts

@@ -0,0 +1,99 @@
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
+
+@Directive({
+    selector: '[fuseMatSidenavHelper]'
+})
+export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
+{
+    matchMediaSubscription: Subscription;
+
+    @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
+    @HostBinding('class.mat-stop-transition') stopTransition = true;
+
+    @Input('fuseMatSidenavHelper') id: string;
+    @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
+
+    constructor(
+        private fuseMatSidenavService: FuseMatSidenavHelperService,
+        private fuseMatchMedia: FuseMatchMedia,
+        private observableMedia: ObservableMedia,
+        private matSidenav: MatSidenav
+    )
+    {
+    }
+
+    ngOnInit()
+    {
+        this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
+
+        if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+        {
+            setTimeout(() => {
+                this.isLockedOpen = true;
+                this.matSidenav.mode = 'side';
+                this.matSidenav.open();
+            });
+            this.stopTransition = false;
+        }
+        else
+        {
+            setTimeout(() => {
+                this.isLockedOpen = false;
+                this.matSidenav.mode = 'over';
+                this.matSidenav.close();
+            });
+
+            setTimeout(() => {
+                this.stopTransition = false;
+            }, 3000);
+        }
+
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
+            if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+            {
+                setTimeout(() => {
+                    this.isLockedOpen = true;
+                    this.matSidenav.mode = 'side';
+                    this.matSidenav.open();
+                });
+            }
+            else
+            {
+                setTimeout(() => {
+                    this.isLockedOpen = false;
+                    this.matSidenav.mode = 'over';
+                    this.matSidenav.close();
+                });
+            }
+        });
+
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaSubscription.unsubscribe();
+    }
+}
+
+@Directive({
+    selector: '[fuseMatSidenavToggler]'
+})
+export class FuseMatSidenavTogglerDirective
+{
+    @Input('fuseMatSidenavToggler') id;
+
+    constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
+    {
+    }
+
+    @HostListener('click')
+    onClick()
+    {
+        this.fuseMatSidenavService.getSidenav(this.id).toggle();
+    }
+}

src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { MdSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 @Injectable()
-export class FuseMdSidenavHelperService
+export class FuseMatSidenavHelperService
 {
-    sidenavInstances: MdSidenav[];
+    sidenavInstances: MatSidenav[];
 
     constructor()
     {

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

@@ -1,5 +1,5 @@
-import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
-import * as Ps from 'perfect-scrollbar';
+import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import PerfectScrollbar from 'perfect-scrollbar';
 import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
@@ -13,10 +13,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
+    ps;
 
     constructor(
         private element: ElementRef,
-        private zone: NgZone,
         private fuseConfig: FuseConfigService,
         private platform: Platform
     )
@@ -48,11 +48,8 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
             return;
         }
 
-        this.zone.runOutsideAngular(() => {
-
-            // Initialize the perfect-scrollbar
-            Ps.initialize(this.element.nativeElement);
-        });
+        // Initialize the perfect-scrollbar
+        this.ps = new PerfectScrollbar(this.element.nativeElement);
     }
 
     ngOnDestroy()
@@ -65,7 +62,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.onSettingsChanged.unsubscribe();
 
         // Destroy the perfect-scrollbar
-        Ps.destroy(this.element.nativeElement);
+        this.ps.destroy();
     }
 
     update()
@@ -76,7 +73,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         }
 
         // Update the perfect-scrollbar
-        Ps.update(this.element.nativeElement);
+        this.ps.update();
     }
 
     destroy()
@@ -126,7 +123,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
 
             // PS has weird event sending order, this is a workaround for that
             this.update();
-
             this.update();
         }
         else if ( value !== this.element.nativeElement[target] )

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -1,99 +0,0 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MdSidenav } from '@angular/material';
-import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
-
-@Directive({
-    selector: '[fuseMdSidenavHelper]'
-})
-export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
-{
-    matchMediaSubscription: Subscription;
-
-    @HostBinding('class.md-is-locked-open') isLockedOpen = true;
-    @HostBinding('class.md-stop-transition') stopTransition = true;
-
-    @Input('fuseMdSidenavHelper') id: string;
-    @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
-
-    constructor(
-        private fuseMdSidenavService: FuseMdSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMedia,
-        private observableMedia: ObservableMedia,
-        private mdSidenav: MdSidenav
-    )
-    {
-    }
-
-    ngOnInit()
-    {
-        this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
-
-        if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
-        {
-            setTimeout(() => {
-                this.isLockedOpen = true;
-                this.mdSidenav.mode = 'side';
-                this.mdSidenav.open();
-            });
-            this.stopTransition = false;
-        }
-        else
-        {
-            setTimeout(() => {
-                this.isLockedOpen = false;
-                this.mdSidenav.mode = 'over';
-                this.mdSidenav.close();
-            });
-
-            setTimeout(() => {
-                this.stopTransition = false;
-            }, 3000);
-        }
-
-        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
-            if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
-            {
-                setTimeout(() => {
-                    this.isLockedOpen = true;
-                    this.mdSidenav.mode = 'side';
-                    this.mdSidenav.open();
-                });
-            }
-            else
-            {
-                setTimeout(() => {
-                    this.isLockedOpen = false;
-                    this.mdSidenav.mode = 'over';
-                    this.mdSidenav.close();
-                });
-            }
-        });
-
-    }
-
-    ngOnDestroy()
-    {
-        this.matchMediaSubscription.unsubscribe();
-    }
-}
-
-@Directive({
-    selector: '[fuseMdSidenavToggler]'
-})
-export class FuseMdSidenavTogglerDirective
-{
-    @Input('fuseMdSidenavToggler') id;
-
-    constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
-    {
-    }
-
-    @HostListener('click')
-    onClick()
-    {
-        this.fuseMdSidenavService.getSidenav(this.id).toggle();
-    }
-}

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/material.module.ts

@@ -1,106 +1,108 @@
 import { NgModule } from '@angular/core';
 import {
-    MdAutocompleteModule,
-    MdButtonModule,
-    MdButtonToggleModule,
-    MdCheckboxModule,
-    MdToolbarModule,
-    MdTooltipModule,
-    MdCardModule,
-    MdChipsModule,
-    MdDatepickerModule,
-    MdDialogModule,
-    MdExpansionModule,
-    MdGridListModule,
-    MdIconModule,
-    MdInputModule,
-    MdListModule,
-    MdMenuModule,
-    MdNativeDateModule,
-    MdPaginatorModule,
-    MdProgressBarModule,
-    MdProgressSpinnerModule,
-    MdRadioModule,
-    MdRippleModule,
-    MdSelectModule,
-    MdSidenavModule,
-    MdSliderModule,
-    MdSlideToggleModule,
-    MdSnackBarModule,
-    MdStepperModule,
-    MdSortModule,
-    MdTableModule,
-    MdTabsModule
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatCardModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatStepperModule
 } from '@angular/material';
 import { CdkTableModule } from '@angular/cdk/table';
 
 @NgModule({
     imports: [
-        MdAutocompleteModule,
-        MdButtonModule,
-        MdButtonToggleModule,
-        MdCardModule,
-        MdCheckboxModule,
-        MdChipsModule,
-        MdDatepickerModule,
-        MdDialogModule,
-        MdExpansionModule,
-        MdGridListModule,
-        MdIconModule,
-        MdInputModule,
-        MdListModule,
-        MdMenuModule,
-        MdNativeDateModule,
-        MdPaginatorModule,
-        MdProgressBarModule,
-        MdProgressSpinnerModule,
-        MdRadioModule,
-        MdRippleModule,
-        MdSelectModule,
-        MdSidenavModule,
-        MdSliderModule,
-        MdSlideToggleModule,
-        MdSnackBarModule,
-        MdStepperModule,
-        MdSortModule,
-        MdTableModule,
-        MdTabsModule,
-        MdToolbarModule,
-        MdTooltipModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatFormFieldModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatStepperModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
         CdkTableModule
     ],
     exports: [
-        MdAutocompleteModule,
-        MdButtonModule,
-        MdButtonToggleModule,
-        MdCardModule,
-        MdCheckboxModule,
-        MdChipsModule,
-        MdDatepickerModule,
-        MdDialogModule,
-        MdExpansionModule,
-        MdGridListModule,
-        MdIconModule,
-        MdInputModule,
-        MdListModule,
-        MdMenuModule,
-        MdNativeDateModule,
-        MdPaginatorModule,
-        MdProgressBarModule,
-        MdProgressSpinnerModule,
-        MdRadioModule,
-        MdRippleModule,
-        MdSelectModule,
-        MdSidenavModule,
-        MdSliderModule,
-        MdSlideToggleModule,
-        MdSnackBarModule,
-        MdStepperModule,
-        MdSortModule,
-        MdTableModule,
-        MdTabsModule,
-        MdToolbarModule,
-        MdTooltipModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatStepperModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
         CdkTableModule
     ]
 })

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

@@ -5,27 +5,28 @@ 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 { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive';
+import { FuseMatSidenavHelperService } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
-import { Md2Module } from 'md2';
+import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
     declarations   : [
-        FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
         FuseHljsComponent,
@@ -42,16 +43,15 @@ import { CookieService } from 'ngx-cookie-service';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule,
-        Md2Module
+        NgxDatatableModule
     ],
     exports        : [
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
         FormsModule,
-        FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
         FuseHljsComponent,
@@ -62,7 +62,7 @@ import { CookieService } from 'ngx-cookie-service';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        Md2Module
+        TranslateModule
     ],
     entryComponents: [
         FuseConfirmDialogComponent
@@ -71,7 +71,8 @@ import { CookieService } from 'ngx-cookie-service';
         CookieService,
         FuseMatchMedia,
         FuseNavbarVerticalService,
-        FuseMdSidenavHelperService
+        FuseMatSidenavHelperService,
+        FuseTranslationLoaderService
     ]
 })
 

src/app/core/scss/core.scss

@@ -3,7 +3,7 @@
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
 // Perfect scrollbar
-@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
 // Fuse
 @import "fuse";
 
@@ -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/_angular-material-fix.scss

@@ -1,3 +1,4 @@
+// Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
     .mat-button-ripple {
@@ -5,11 +6,12 @@
     }
 }
 
-md-sidenav-container {
+// Fix: "Sidenav opening with animations for the first time"
+mat-sidenav-container {
 
-    md-sidenav {
+    mat-sidenav {
 
-        &[md-is-locked-open].md-stop-transition {
+        &[mat-is-locked-open].mat-stop-transition {
             transition: none !important;
             transform: translate3d(0, 0, 0) !important;
             opacity: 0;
@@ -39,3 +41,26 @@ md-sidenav-container {
     .mat-drawer-content {
     }
 }
+
+// Fix: "Inconsistent font sizes across elements"
+.mat-input-wrapper {
+    font-size: 16px;
+}
+
+.mat-checkbox {
+    font-size: 16px;
+}
+
+.mat-radio-button {
+    font-size: 16px;
+}
+
+.mat-pseudo-checkbox-checked:after {
+    width: 14px;
+    height: 7px;
+}
+
+// Fix: "Input underlines has wrong color opacity value"
+.mat-form-field-underline {
+    background-color: rgba(0, 0, 0, 0.12);
+}

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

@@ -51,14 +51,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     // If the base text color is black...
     @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
 
-        &.secondary-text,
-        .secondary-text,
         .mat-icon,
-        .icon,
-        .md2-datepicker-button {
+        .icon {
             color: rgba(0, 0, 0, 0.54);
         }
 
+        &.secondary-text,
+        .secondary-text {
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
+
         &.hint-text,
         .hint-text,
         &.disabled-text,
@@ -80,8 +82,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     @else {
 
         .mat-icon,
-        .icon,
-        .md2-datepicker-button {
+        .icon {
             color: rgba(255, 255, 255, 1);
         }
 
@@ -111,49 +112,60 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 @mixin generateMaterialElementColors($contrastColor) {
 
     // If the contrast color is white...
-    $foreground: $mat-dark-theme-foreground;
+    $fuseForeground: (
+        base: white,
+        text: white,
+        hint-text: rgba(white, 0.5),
+        divider: rgba(white, 0.12),
+    );
 
     // If the contrast color is black...
     @if (rgba(black, 1) == rgba($contrastColor, 1)) {
-        $foreground: $mat-light-theme-foreground;
+
+        $fuseForeground: (
+            base: black,
+            hint-text: rgba(black, 0.38),
+            divider: rgba(black, 0.12),
+        );
     }
 
     // Native Input
     input[type="text"] {
-        color: mat-color($foreground, base);
+        color: map_get($fuseForeground, base);
     }
 
     // Input
     .mat-input-placeholder {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
     .mat-input-underline {
-        background-color: mat-color($foreground, divider);
+        background-color: map_get($fuseForeground, divider);
     }
 
     // Select
     .mat-select-trigger,
     .mat-select-arrow {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
     .mat-select-underline {
-        background-color: mat-color($foreground, divider);
+        background-color: map_get($fuseForeground, divider);
     }
 
     .mat-select-disabled .mat-select-value,
     .mat-select-arrow,
     .mat-select-trigger {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
-    .mat-select-content, .mat-select-panel-done-animating {
-        background: mat-color($background, card);
+    .mat-select-content,
+    .mat-select-panel-done-animating {
+        background: map_get($background, card);
     }
 
     .mat-select-value {
-        color: mat-color($foreground, text);
+        color: map_get($fuseForeground, text);
     }
 }
 
@@ -164,7 +176,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         background-color: $color !important;
     }
 
-    .md-#{$colorName}#{$hue}-bg {
+    .mat-#{$colorName}#{$hue}-bg {
         background-color: $color !important;
         color: $contrastColor !important;
 
@@ -175,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/_global.scss

@@ -1,6 +1,6 @@
 body {
 
-    > md-sidenav-container {
+    > mat-sidenav-container {
         height: 100%;
     }
 }

src/app/core/scss/partials/_icons.scss

@@ -1,5 +1,5 @@
 i,
-md-icon {
+mat-icon {
     color: rgba(0, 0, 0, 0.54);
     font-size: 24px;
     width: 24px;

src/app/core/scss/partials/_material.scss

@@ -46,14 +46,14 @@
         margin-top: 0;
         margin-bottom: 0;
     }
-    md-icon.status {
+    mat-icon.status {
         position: absolute;
         top: 28px;
         left: 28px;
     }
 }
 
-md-icon.status {
+mat-icon.status {
     border-radius: 50%;
 
     &.online {
@@ -116,7 +116,7 @@ md-icon.status {
         max-height: 48px;
         height: 48px;
 
-        md-icon {
+        mat-icon {
             margin: 0 16px 0 0;
         }
 
@@ -142,7 +142,7 @@ md-icon.status {
         }
     }
 
-    md-divider {
+    mat-divider {
         margin: 8px 0;
     }
 }
@@ -196,7 +196,7 @@ md-icon.status {
         background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
-        margin: 24px 24px 0 0;
+        margin: 12px;
         overflow: hidden;
 
         &.style-1 {
@@ -234,7 +234,7 @@ md-icon.status {
                 }
             }
 
-            md-divider {
+            mat-divider {
                 margin: 16px 32px;
             }
 

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;
@@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex: 1;
                 background: none;
@@ -132,11 +132,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     min-width: 240px;
                     max-width: 240px;
                     height: auto;
-                    z-index: 2;
+                    z-index: 4;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         background: none;
                         box-shadow: none;
                     }
@@ -145,6 +145,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         height: $carded-header-height;
                         min-height: $carded-header-height;
                         max-height: $carded-header-height;
+
+                        @include media-breakpoint-down('sm') {
+                            height: $carded-header-height-sm;
+                            min-height: $carded-header-height-sm;
+                            max-height: $carded-header-height-sm;
+                        }
                     }
 
                     .content {
@@ -175,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                             height: $carded-header-height-without-toolbar;
                             min-height: $carded-header-height-without-toolbar;
                             max-height: $carded-header-height-without-toolbar;
+
+                            @include media-breakpoint-down('sm') {
+                                height: $carded-header-height-without-toolbar-sm;
+                                min-height: $carded-header-height-without-toolbar-sm;
+                                max-height: $carded-header-height-without-toolbar-sm;
+                            }
                         }
 
                         .content-card {
@@ -210,17 +222,73 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     }
                 }
             }
+
+            // Tabbed
+            &.tabbed {
+
+                > mat-sidenav-container {
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        width: calc(100% - 240px);
+
+                        .center {
+                            width: calc(100% - 32px);
+
+                            @include media-breakpoint-down('md') {
+                                width: calc(100% - 64px);
+                            }
+
+                            .header {
+                                flex: 1;
+                            }
+
+                            .content-card {
+
+                                .content {
+
+                                    .mat-tab-group {
+                                        overflow: hidden;
+
+                                        .mat-tab-header {
+
+                                            .mat-tab-label {
+                                                height: 64px;
+                                            }
+                                        }
+
+                                        .mat-tab-body {
+                                            overflow: hidden;
+
+                                            .mat-tab-body-content {
+                                                overflow: hidden;
+
+                                                .tab-content {
+                                                    position: relative;
+                                                    width: 100%;
+                                                    height: 100%;
+                                                    overflow: auto;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         // Left sidenav
         &.left-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
@@ -238,12 +306,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.right-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
                     order: 999;
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
@@ -295,7 +363,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
 
                     > .mat-sidenav-content,
@@ -309,7 +377,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Inner Sidenav
             &.inner-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1;
 
                     .sidenav {
@@ -338,10 +406,9 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex-direction: column;
-                //flex-direction: row;
                 flex: 1;
                 background: none;
                 z-index: 2;
@@ -354,7 +421,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     z-index: 51;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         width: 220px;
                         min-width: 220px;
                         max-width: 220px;
@@ -440,7 +507,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
@@ -458,7 +525,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto !important;
 
                     > .mat-sidenav-content,
@@ -483,7 +550,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
 
                     > .mat-sidenav-content,
                     > .mat-drawer-content {

src/app/core/scss/partials/_print.scss

@@ -4,8 +4,9 @@
 
 @media all {
 
-    /* Never show page break in normal view */
-    .page-break {
+    /* Never show page breaks in normal view */
+    .page-break-after,
+    .page-break-before {
         display: none;
     }
 
@@ -13,22 +14,30 @@
 
 @media print {
 
-    /* Page Styles */
-    @page {
-        //margin: 0.5cm;
+    /* html and body tweaks */
+    html, body {
+        height: auto !important;
+        overflow: initial !important;
     }
 
-    /* Page break */
-    .page-break {
+    /* Page breaks */
+    .page-break-after {
         display: block;
-        break-after: always;
         page-break-after: always;
+        position: relative;
+    }
+
+    .page-break-before {
+        display: block;
+        page-break-before: always;
+        position: relative;
     }
 
     /* General styles */
     fuse-root {
 
-        fuse-navbar,
+        fuse-navbar-vertical,
+        fuse-navbar-horizontal,
         fuse-toolbar,
         fuse-footer,
         fuse-quick-panel,
@@ -41,11 +50,16 @@
         .ps {
             overflow: visible !important;
         }
-    }
 
-    /* Printable page specific styles */
-    .printable {
-        overflow: visible !important;
-        height: auto !important;
+        .mat-drawer-container,
+        .mat-sidenav-container {
+            background-color: white !important;
+
+            .mat-drawer-content,
+            .mat-sidenav-content {
+                overflow: initial !important;
+                height: auto !important
+            }
+        }
     }
 }

src/app/core/scss/partials/_reset.scss

@@ -28,7 +28,7 @@ html, body {
 }
 
 // Reset non angular-material input's default browser/os styles
-*:not(md-input-container) {
+*:not(mat-input-container) {
 
     > input {
         border: none;
@@ -55,7 +55,7 @@ html, body {
     }
 }
 
-*:not(md-input-container) {
+*:not(mat-input-container) {
 
     > input[type="button"],
     > button,

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/scss/partials/plugins/_perfect-scrollbar.scss

@@ -1,11 +1,12 @@
 .ps {
     position: relative;
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-x {
         z-index: 99999;
     }
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-y {
         z-index: 99999;
+        left: auto !important;
     }
 }

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

@@ -22,18 +22,19 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation: 'left', // 'right', 'left', 'top', 'none'
-                toolbar   : 'below', // 'above', 'below', 'none'
-                footer    : 'below', // 'above', 'below', 'none'
-                mode      : 'fullwidth' // 'boxed', 'fullwidth'
+                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: 'md-white-500-bg',
-                navbar : 'md-fuse-dark-500-bg',
-                footer : 'md-fuse-dark-700-bg'
+                toolbar: 'mat-white-500-bg',
+                navbar : 'mat-fuse-dark-700-bg',
+                footer : 'mat-fuse-dark-900-bg'
             },
             customScrollbars: true,
-            routerAnimation : 'fadeIn'
+            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
         };
 
         /**
@@ -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/core/services/translation-loader.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface Locale
+{
+    lang: string;
+    data: Object;
+}
+
+@Injectable()
+export class FuseTranslationLoaderService
+{
+    constructor(private translate: TranslateService)
+    {
+    }
+
+    public loadTranslations(...args: Locale[]): void
+    {
+        const locales = [...args];
+
+        locales.forEach((locale) => {
+            // use setTranslation() with the third argument set to true
+            // to append translations instead of replacing them
+            this.translate.setTranslation(locale.lang, locale.data, true);
+        });
+    }
+}

src/app/main/content/sample/i18n/en.ts

@@ -0,0 +1,8 @@
+export const locale = {
+    lang: 'en',
+    data: {
+        'SAMPLE': {
+            'HELLO': 'Hello, World!'
+        }
+    }
+};

src/app/main/content/sample/i18n/tr.ts

@@ -0,0 +1,8 @@
+export const locale = {
+    lang: 'tr',
+    data: {
+        'SAMPLE': {
+            'HELLO': 'Merhaba Dünya!'
+        }
+    }
+};

src/app/main/content/sample/sample.component.html

@@ -1,5 +1,5 @@
 <div class="page-layout blank p-24" fusePerfectScrollbar>
 
-    <h2>Sample Page</h2>
+    <h2>{{'SAMPLE.HELLO' | translate}}</h2>
 
 </div>

src/app/main/content/sample/sample.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { FuseTranslationLoaderService } from '../../../core/services/translation-loader.service';
+
+import { locale as english } from './i18n/en';
+import { locale as turkish } from './i18n/tr';
 
 @Component({
     selector   : 'fuse-sample',
@@ -7,7 +11,8 @@ import { Component } from '@angular/core';
 })
 export class FuseSampleComponent
 {
-    constructor()
+    constructor(private translationLoader: FuseTranslationLoaderService)
     {
+        this.translationLoader.loadTranslations(english, turkish);
     }
 }

src/app/main/footer/footer.component.html

@@ -1,20 +1,20 @@
-<md-toolbar>
+<mat-toolbar>
 
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
 
         <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
-           target="_blank" md-button class="md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
+           target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
-            <md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
-            <span>Purchase FUSE (Angular4+)</span>
+            <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
+            <span>Purchase FUSE (Angular5+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
-            <a md-button href="http://fusetheme.com/angular/docs" target="_blank">Documentation</a>
+            <a mat-button href="http://fusetheme.com/angular/docs" target="_blank">Documentation</a>
             <span>&bull;</span>
-            <a md-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a>
+            <a mat-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a>
         </div>
 
     </div>
 
-</md-toolbar>
+</mat-toolbar>

src/app/main/main.component.html

@@ -1,16 +1,16 @@
-<md-sidenav-container>
+<mat-sidenav-container>
 
-    <div id="fuse-main-content" fxFlexFill>
+    <div id="fuse-main-content">
 
         <!-- 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"
-                                  fxShow [fxHide.gt-md]="fuseSettings.layout.navigation === 'top'"
-                                  class="left-navbar" [class]="fuseSettings.colorClasses.navbar"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
+                                  class="left-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,18 +55,18 @@
 
         <!-- 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 -->
 
     </div>
 
     <!-- QUICK PANEL -->
-    <md-sidenav fuseMdSidenavHelper="quick-panel" align="end">
+    <mat-sidenav fuseMatSidenavHelper="quick-panel" align="end">
         <fuse-quick-panel></fuse-quick-panel>
-    </md-sidenav>
+    </mat-sidenav>
     <!-- / QUICK PANEL -->
 
-</md-sidenav-container>
+</mat-sidenav-container>
 
 <fuse-theme-options></fuse-theme-options>

src/app/main/main.component.scss

@@ -6,12 +6,6 @@ fuse-main {
     width: 100%;
     height: 100%;
 
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-
     > .mat-sidenav-container {
         display: flex;
         flex: 1;
@@ -72,4 +66,10 @@ fuse-main {
             }
         }
     }
+
+    &[fuse-layout-mode="boxed"] {
+        max-width: 1200px;
+        margin: 0 auto;
+        @include mat-elevation(8);
+    }
 }

src/app/main/main.component.ts

@@ -14,7 +14,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
 {
     onSettingsChanged: Subscription;
     fuseSettings: any;
-    @HostBinding('class.boxed') boxed;
+    @HostBinding('attr.fuse-layout-mode') layoutMode;
 
     constructor(
         private _renderer: Renderer2,
@@ -29,7 +29,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
-                        this.boxed = this.fuseSettings.layout.mode === 'boxed';
+                        this.layoutMode = this.fuseSettings.layout.mode;
                     }
                 );
 

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

@@ -8,7 +8,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 })
 export class FuseNavbarHorizontalComponent implements OnInit
 {
-    constructor() {
+    constructor()
+    {
     }
 
     ngOnInit()

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

@@ -5,12 +5,12 @@
         <span class="logo-text">FUSE</span>
     </div>
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
-        <md-icon>menu</md-icon>
+    <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
+        <mat-icon>menu</mat-icon>
     </button>
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
-        <md-icon>arrow_back</md-icon>
+    <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
+        <mat-icon>arrow_back</mat-icon>
     </button>
 
 </div>

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

@@ -134,11 +134,18 @@ fuse-navbar-vertical {
         }
     }
 
-    .nav-bar-content {
+    .navbar-content {
         flex: 1;
     }
 }
 
+fuse-navbar-horizontal + #wrapper > fuse-navbar-vertical {
+    display: none;
+    @include media-breakpoint-down(md) {
+        display: flex;
+    }
+}
+
 .fuse-navbar-backdrop {
     position: absolute;
     top: 0;

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

@@ -18,14 +18,37 @@ 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;
 
     player: AnimationPlayer;
 
@@ -34,20 +57,21 @@ 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);
 
-        this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
-            setTimeout(() => {
-                this.fusePerfectScrollbarDirective.update();
-            }, 310);
-        });
+        this.navigationServiceWatcher =
+            this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this.fusePerfectScrollbarDirective.update();
+                }, 310);
+            });
 
         this.matchMediaWatcher =
             this.fuseMatchMedia.onMediaChange
@@ -85,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();
@@ -101,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         }
         else
         {
-            if ( !this.foldedByDefault )
+            if ( !this._folded )
             {
                 this.deActivateFolded();
             }
@@ -112,8 +136,20 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         }
     }
 
+    ngOnDestroy()
+    {
+        clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        this.matchMediaWatcher.unsubscribe();
+        this.navigationServiceWatcher.unsubscribe();
+    }
+
     openBar()
     {
+        if ( !this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = false;
         this.updateCssClasses();
         if ( this.media.isActive('lt-lg') )
@@ -124,6 +160,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     closeBar()
     {
+        if ( this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = true;
         this.updateCssClasses();
         this._detachBackdrop();
@@ -181,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.removeClass('fuse-nav-bar-closed');
+            this.fuseMainComponent.addClass('fuse-navbar-opened');
+            this.fuseMainComponent.removeClass('fuse-navbar-closed');
         }
         else
         {
-            this.fuseMainComponent.addClass('fuse-nav-bar-closed');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-opened');
+            this.fuseMainComponent.addClass('fuse-navbar-closed');
+            this.fuseMainComponent.removeClass('fuse-navbar-opened');
         }
     }
 
@@ -235,9 +276,4 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
             });
         }
     }
-
-    ngOnDestroy()
-    {
-        this.matchMediaWatcher.unsubscribe();
-    }
 }

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

@@ -1,6 +1,6 @@
-<md-list class="date" cdk-focus-region-start>
+<mat-list class="date" cdk-focus-region-start>
 
-    <h3 md-subheader cdk-focus-init>
+    <h3 matSubheader cdk-focus-init>
         <span>Today</span>
     </h3>
 
@@ -14,33 +14,59 @@
             <span> {{date | date:'MMMM'}}</span>
         </div>
     </div>
-</md-list>
+</mat-list>
 
-<md-divider cdk-focus-region-end></md-divider>
+<mat-divider cdk-focus-region-end></mat-divider>
 
-<md-list>
-    <h3 md-subheader>
+<mat-list>
+    <h3 matSubheader>
+        <span>Events</span>
+    </h3>
+
+    <mat-list-item *ngFor="let event of events">
+        <h3 matLine>{{event.title}}</h3>
+        <p matLine class="secondary-text">{{event.detail}}</p>
+    </mat-list-item>
+</mat-list>
+
+<mat-divider></mat-divider>
+
+<mat-list>
+    <h3 matSubheader>
+        <span>Notes</span>
+    </h3>
+
+    <mat-list-item *ngFor="let note of notes">
+        <h3 matLine>{{note.title}}</h3>
+        <p matLine class="secondary-text">{{note.detail}}</p>
+    </mat-list-item>
+</mat-list>
+
+<mat-divider></mat-divider>
+
+<mat-list>
+    <h3 matSubheader>
         <span>Quick Settings</span>
     </h3>
 
-    <md-list-item>
-        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
-                         labelPosition="before">
+    <mat-list-item>
+        <mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
+                          labelPosition="before">
             <h3>Notifications</h3>
-        </md-slide-toggle>
-    </md-list-item>
+        </mat-slide-toggle>
+    </mat-list-item>
 
-    <md-list-item>
-        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
-                         labelPosition="before">
+    <mat-list-item>
+        <mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
+                          labelPosition="before">
             <h3>Cloud Sync</h3>
-        </md-slide-toggle>
-    </md-list-item>
+        </mat-slide-toggle>
+    </mat-list-item>
 
-    <md-list-item>
-        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
-                         labelPosition="before">
+    <mat-list-item>
+        <mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
+                          labelPosition="before">
             <h3>Retro Thrusters</h3>
-        </md-slide-toggle>
-    </md-list-item>
-</md-list>
+        </mat-slide-toggle>
+    </mat-list-item>
+</mat-list>

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

@@ -10,6 +10,8 @@ export class FuseQuickPanelComponent implements OnInit
 {
     date: Date;
     settings: any;
+    notes = [];
+    events = [];
 
     constructor()
     {

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

@@ -1,12 +1,14 @@
-<md-toolbar class="p-0 mat-elevation-z1">
+<mat-toolbar class="p-0 mat-elevation-z1">
+
+    <mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
 
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="toggle-button-navbar mat-icon-button"
-                    fuseNavbarVertical="openBar" fxHide.gt-md>
-                <md-icon>menu</md-icon>
+            <button mat-button class="toggle-button-navbar mat-icon-button"
+                    fuseNavbarVertical="toggleBar" fxHide.gt-md>
+                <mat-icon>menu</mat-icon>
             </button>
 
             <div class="toolbar-separator" fxHide.gt-md></div>
@@ -17,7 +19,7 @@
                 </div>
             </div>
 
-            <div class="px-8 px-md-16">
+            <div class="px-8 px-mat-16">
                 <fuse-shortcuts></fuse-shortcuts>
             </div>
 
@@ -25,35 +27,33 @@
 
         <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <md-spinner *ngIf="showSpinner" class="loading-spinner mx-8"></md-spinner>
-
-            <button md-button [mdMenuTriggerFor]="userMenu"
+            <button mat-button [matMenuTriggerFor]="userMenu"
                     class="user-button">
                 <div fxLayout="row" fxLayoutAlign="center center">
                     <img class="avatar" src="assets/images/avatars/profile.jpg">
                     <span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
-                    <md-icon class="s-16" fxHide.xs>keyboard_arrow_down</md-icon>
+                    <mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
                 </div>
             </button>
 
-            <md-menu #userMenu="mdMenu">
+            <mat-menu #userMenu="matMenu">
 
-                <button md-menu-item>
-                    <md-icon>account_circle</md-icon>
+                <button mat-menu-item>
+                    <mat-icon>account_circle</mat-icon>
                     <span>My Profile</span>
                 </button>
 
-                <button md-menu-item class="">
-                    <md-icon>mail</md-icon>
+                <button mat-menu-item class="">
+                    <mat-icon>mail</mat-icon>
                     <span>Inbox</span>
                 </button>
 
-                <button md-menu-item class="">
-                    <md-icon>exit_to_app</md-icon>
+                <button mat-menu-item class="">
+                    <mat-icon>exit_to_app</mat-icon>
                     <span>Logout</span>
                 </button>
 
-            </md-menu>
+            </mat-menu>
 
             <div class="toolbar-separator"></div>
 
@@ -61,33 +61,35 @@
 
             <div class="toolbar-separator"></div>
 
-            <button md-button fxHide fxShow.gt-xs
+            <button mat-button fxHide fxShow.gt-xs
                     class="language-button"
-                    [mdMenuTriggerFor]="languageMenu">
+                    [matMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">
                     <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
                     <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
                 </div>
             </button>
 
-            <md-menu #languageMenu="mdMenu">
-                <button md-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
+            <mat-menu #languageMenu="matMenu">
+
+                <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">
                         <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </div>
                 </button>
-            </md-menu>
+
+            </mat-menu>
 
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
-            <button md-icon-button
+            <button mat-icon-button
                     class="mat-icon-button quick-panel-toggle-button"
-                    fuseMdSidenavToggler="quick-panel"
+                    fuseMatSidenavToggler="quick-panel"
                     aria-label="Toggle quick panel">
-                <md-icon class="icon">format_list_bulleted</md-icon>
+                <mat-icon class="icon">format_list_bulleted</mat-icon>
             </button>
 
         </div>
     </div>
-</md-toolbar>
+</mat-toolbar>

src/app/main/toolbar/toolbar.component.scss

@@ -13,6 +13,15 @@
     .mat-toolbar {
         background: inherit;
         color: inherit;
+        position: relative;
+
+        .loading-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+        }
     }
 
     .logo {
@@ -24,13 +33,8 @@
         }
     }
 
-    .loading-spinner {
-        width: 32px;
-        height: 32px;
-    }
-
     .user-button,
-    .search-button,
+    fuse-search-bar,
     .language-button,
     .quick-panel-toggle-button {
         min-width: 64px;

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { FuseConfigService } from '../../core/services/config.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -13,12 +14,13 @@ export class FuseToolbarComponent
     userStatusOptions: any[];
     languages: any;
     selectedLanguage: any;
-    showSpinner: boolean;
+    showLoadingBar: boolean;
     horizontalNav: boolean;
 
     constructor(
         private router: Router,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private translate: TranslateService
     )
     {
         this.userStatusOptions = [
@@ -55,11 +57,6 @@ export class FuseToolbarComponent
                 'title': 'English',
                 'flag' : 'us'
             },
-            {
-                'id'   : 'es',
-                'title': 'Spanish',
-                'flag' : 'es'
-            },
             {
                 'id'   : 'tr',
                 'title': 'Turkish',
@@ -73,11 +70,11 @@ export class FuseToolbarComponent
             (event) => {
                 if ( event instanceof NavigationStart )
                 {
-                    this.showSpinner = true;
+                    this.showLoadingBar = true;
                 }
                 if ( event instanceof NavigationEnd )
                 {
-                    this.showSpinner = false;
+                    this.showLoadingBar = false;
                 }
             });
 
@@ -92,4 +89,13 @@ export class FuseToolbarComponent
         // Do your search here...
         console.log(value);
     }
+
+    setLanguage(lang)
+    {
+        // Set the selected language for toolbar
+        this.selectedLanguage = lang;
+
+        // Use the selected language for translations
+        this.translate.use(lang.id);
+    }
 }

src/app/navigation.model.ts

@@ -6,10 +6,12 @@ export class NavigationModel
     {
         this.model = [
             {
-                'title': 'Applications',
-                'type' : 'group',
+                'id'      : 'applications',
+                'title'   : 'Applications',
+                'type'    : 'group',
                 'children': [
                     {
+                        'id'   : 'sample',
                         'title': 'Sample',
                         'type' : 'item',
                         'icon' : 'email',

src/environments/environment.hmr.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: false,
-    hmr: true
+    hmr       : true
 };

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: true,
-    hmr: false
+    hmr       : false
 };

src/environments/environment.ts

@@ -5,5 +5,5 @@
 
 export const environment = {
     production: false,
-    hmr: false
+    hmr       : false
 };

src/index.html

@@ -3,12 +3,12 @@
 
     <head>
 
-        <title>Fuse2 - Angular 4+ Material Design Admin Template</title>
+        <title>Fuse2 - Angular 5+ Material Design Admin Template</title>
         <base href="/">
 
         <meta charset="utf-8">
         <meta name="description" content="Material design admin template with pre-built apps and pages">
-        <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6, Material">
+        <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6,Material">
         <meta name="author" content="Withinpixels">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 

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`. */
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+/** IE10 and IE11 requires the following for the Reflect API. */
+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"
     ]
   }