Merge branch 'master' into skeleton

# Conflicts:
#	src/app/app.module.ts
#	src/app/main/content/apps/calendar/calendar.component.html
#	src/app/main/content/apps/contacts/contact-list/contact-list.component.html
#	src/app/main/content/apps/contacts/contacts.component.html
#	src/app/main/content/apps/contacts/contacts.component.scss
#	src/app/main/content/apps/contacts/contacts.module.ts
#	src/app/main/content/apps/contacts/contacts.service.ts
#	src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html
#	src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
#	src/app/navigation.model.ts

.angular-cli.json

@@ -9,7 +9,6 @@
             "outDir": "dist",
             "assets": [
                 "assets",
-                "app/main/content/components/angular-material",
                 "favicon.ico"
             ],
             "index": "index.html",
@@ -26,7 +25,6 @@
             "environmentSource": "environments/environment.ts",
             "environments": {
                 "dev": "environments/environment.ts",
-                "hmr": "environments/environment.hmr.ts",
                 "prod": "environments/environment.prod.ts"
             }
         }
@@ -38,28 +36,13 @@
     },
     "lint": [
         {
-            "project": "src/tsconfig.app.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
+            "project": "src/tsconfig.app.json"
         },
         {
-            "project": "src/tsconfig.spec.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
+            "project": "src/tsconfig.spec.json"
         },
         {
-            "project": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
+            "project": "e2e/tsconfig.e2e.json"
         }
     ],
     "test": {

.npmrc

@@ -1 +0,0 @@
-save-prefix=''

LICENSE

@@ -1 +0,0 @@
-https://themeforest.net/licenses/terms/regular

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-Material Design Admin Template with Angular 5+ and Angular Material 2
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.3.
 
 ## Development server
 
@@ -22,3 +22,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

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,12 +2,10 @@
   "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/1.0/config/configuration-file.html
+// https://karma-runner.github.io/0.13/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,84 +1,68 @@
 {
   "name": "fuse2",
-  "version": "1.3.2",
-  "license": "https://themeforest.net/licenses/terms/regular",
+  "version": "1.0.1",
+  "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --open",
-    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
-    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
-    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+    "start": "ng serve",
+    "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e",
-    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+    "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.1.3",
-    "@angular/cdk": "5.0.3",
-    "@angular/common": "5.1.3",
-    "@angular/compiler": "5.1.3",
-    "@angular/core": "5.1.3",
-    "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.1.3",
-    "@angular/http": "5.1.3",
-    "@angular/material": "5.0.3",
-    "@angular/material-moment-adapter": "5.0.3",
-    "@angular/platform-browser": "5.1.3",
-    "@angular/platform-browser-dynamic": "5.1.3",
-    "@angular/router": "5.1.3",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
-    "@ngx-translate/core": "9.0.2",
-    "@swimlane/ngx-charts": "7.0.1",
-    "@swimlane/ngx-datatable": "11.1.7",
-    "@swimlane/ngx-dnd": "3.1.0",
-    "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.1",
-    "angular-in-memory-web-api": "0.5.2",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.12.2",
-    "hammerjs": "2.0.8",
-    "intl": "1.2.5",
-    "moment": "2.20.1",
-    "ngrx-store-freeze": "0.2.0",
-    "ngx-color-picker": "5.3.0",
-    "ngx-cookie-service": "1.0.9",
-    "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.9.0",
-    "rxjs": "5.5.6",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.19"
+    "@angular/animations": "4.3.5",
+    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/common": "4.3.5",
+    "@angular/compiler": "4.3.5",
+    "@angular/core": "4.3.5",
+    "@angular/flex-layout": "2.0.0-beta.8",
+    "@angular/forms": "4.3.5",
+    "@angular/http": "4.3.5",
+    "@angular/material": "^2.0.0-beta.8",
+    "@angular/platform-browser": "4.3.5",
+    "@angular/platform-browser-dynamic": "4.3.5",
+    "@angular/router": "4.3.5",
+    "@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.3.2",
+    "classlist.js": "^1.1.20150312",
+    "core-js": "^2.5.0",
+    "d3": "^4.10.0",
+    "hammerjs": "^2.0.8",
+    "highlight.js": "^9.12.0",
+    "intl": "^1.2.5",
+    "moment": "^2.18.1",
+    "ngx-color-picker": "^4.3.1",
+    "ngx-perfect-scrollbar": "^4.5.6",
+    "rxjs": "^5.4.3",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.3",
-    "@angular/compiler-cli": "5.1.3",
-    "@angular/language-service": "5.1.3",
-    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.5.54",
-    "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.96",
-    "codelyzer": "4.0.2",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.3",
-    "karma-jasmine": "1.1.1",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
-    "ts-node": "3.2.2",
-    "tslint": "5.7.0",
-    "typescript": "2.4.2",
-    "webpack-bundle-analyzer": "2.9.2"
+    "@angular/cli": "^1.3.2",
+    "@angular/compiler-cli": "4.3.5",
+    "@angular/language-service": "4.3.5",
+    "@ngtools/webpack": "^1.6.2",
+    "@types/jasmine": "^2.5.54",
+    "@types/jasminewd2": "^2.0.2",
+    "@types/node": "^6.0.87",
+    "codelyzer": "~3.0.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "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"
   }
 }

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,12 +1,5 @@
 import { Component } from '@angular/core';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
-import { TranslateService } from '@ngx-translate/core';
-import { FuseTranslationLoaderService } from './core/services/translation-loader.service';
-
-import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { FuseNavigationModel } from './navigation/navigation.model';
-import { locale as navigationEnglish } from './navigation/i18n/en';
-import { locale as navigationTurkish } from './navigation/i18n/tr';
 
 @Component({
     selector   : 'fuse-root',
@@ -15,26 +8,7 @@ import { locale as navigationTurkish } from './navigation/i18n/tr';
 })
 export class AppComponent
 {
-    constructor(
-        private fuseNavigationService: FuseNavigationService,
-        private fuseSplashScreen: FuseSplashScreenService,
-        private translate: TranslateService,
-        private translationLoader: FuseTranslationLoaderService
-    )
+    constructor(private fuseSplashScreen: FuseSplashScreenService)
     {
-        // Add languages
-        this.translate.addLangs(['en', 'tr']);
-
-        // Set the default language
-        this.translate.setDefaultLang('en');
-
-        // Use a language
-        this.translate.use('en');
-
-        // Set the navigation model
-        this.fuseNavigationService.setNavigationModel(new FuseNavigationModel());
-
-        // Set the navigation translations
-        this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish);
     }
 }

src/app/app.module.ts

@@ -1,48 +1,22 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
-import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseMainModule } from './main/main.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
-import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { AppStoreModule } from './store/store.module';
+import { FuseSampleModule } from './main/content/sample/sample.module';
 
 const appRoutes: Routes = [
-    {
-        path        : 'apps',
-        loadChildren: './main/content/apps/apps.module#FuseAppsModule'
-    },
-    {
-        path        : 'pages',
-        loadChildren: './main/content/pages/pages.module#FusePagesModule'
-    },
-    {
-        path        : 'ui',
-        loadChildren: './main/content/ui/ui.module#FuseUIModule'
-    },
-    {
-        path        : 'services',
-        loadChildren: './main/content/services/services.module#FuseServicesModule'
-    },
-    {
-        path        : 'components',
-        loadChildren: './main/content/components/components.module#FuseComponentsModule'
-    },
-    {
-        path        : 'components-third-party',
-        loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
-    },
     {
         path      : '**',
-        redirectTo: 'apps/dashboards/project'
+        redirectTo: 'sample'
     }
 ];
 
@@ -52,22 +26,18 @@ const appRoutes: Routes = [
     ],
     imports     : [
         BrowserModule,
+        HttpModule,
         HttpClientModule,
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
-        TranslateModule.forRoot(),
-        InMemoryWebApiModule.forRoot(FuseFakeDbService, {
-            delay             : 0,
-            passThruUnknownUrl: true
-        }),
-        AppStoreModule,
-        FuseMainModule
+        PerfectScrollbarModule.forRoot(),
+        FuseMainModule,
+        FuseSampleModule
     ],
     providers   : [
         FuseSplashScreenService,
-        FuseConfigService,
-        FuseNavigationService
+        FuseConfigService
     ],
     bootstrap   : [
         AppComponent

src/app/core/animations.ts

@@ -1,69 +1,10 @@
-import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
+import { sequence, trigger, stagger, animate, style, group, query, transition, keyframes, animateChild, state } from '@angular/animations';
 
-const customAnimation = animation([
-    style({
-        opacity  : '{{opacity}}',
-        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
-    }),
-    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
-], {
-    params: {
-        duration: '200ms',
-        delay   : '0ms',
-        opacity : '0',
-        scale   : '1',
-        x       : '0',
-        y       : '0',
-        z       : '0'
-    }
-});
+// const query = (s, a, o = {optional: true}) => q(s, a, o);
 
-export const fuseAnimations = [
-
-    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
-
-    trigger('animateStagger', [
-        state('50', style('*')),
-        state('100', style('*')),
-        state('200', style('*')),
-
-        transition('void => 50',
-            query('@*',
-                [
-                    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', [
-        state('0', style({
-            display: 'none',
-            opacity: 0
-        })),
-        state('1', style({
-            display: 'block',
-            opacity: 1
-        })),
-        transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in'))
-    ]),
-
-    trigger('slideInOut', [
+export class Animations
+{
+    public static slideInOut = trigger('slideInOut', [
         state('0', style({
             height : '0px',
             display: 'none'
@@ -74,56 +15,9 @@ export const fuseAnimations = [
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
-    ]),
+    ]);
 
-    trigger('slideIn', [
-        transition('void => left', [
-                style({
-                    transform: 'translateX(100%)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(0)'
-                    })
-                )
-            ]
-        ),
-        transition('left => void', [
-                style({
-                    transform: 'translateX(0)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(-100%)'
-                    })
-                )
-            ]
-        ),
-        transition('void => right', [
-                style({
-                    transform: 'translateX(-100%)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(0)'
-                    })
-                )
-            ]
-        ),
-        transition('right => void', [
-                style({
-                    transform: 'translateX(0)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(100%)'
-                    })
-                )
-            ]
-        ),
-    ]),
-
-    trigger('slideInLeft', [
+    public static slideInLeft = trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
             display  : 'none'
@@ -134,9 +28,9 @@ export const fuseAnimations = [
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]),
+    ]);
 
-    trigger('slideInRight', [
+    public static slideInRight = trigger('slideInRight', [
         state('void', style({
             transform: 'translateX(100%)',
             display  : 'none'
@@ -147,9 +41,9 @@ export const fuseAnimations = [
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]),
+    ]);
 
-    trigger('slideInTop', [
+    public static slideInTop = trigger('slideInTop', [
         state('void', style({
             transform: 'translateY(-100%)',
             display  : 'none'
@@ -160,9 +54,9 @@ export const fuseAnimations = [
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]),
+    ]);
 
-    trigger('slideInBottom', [
+    public static slideInBottom = trigger('slideInBottom', [
         state('void',
             style({
                 transform: 'translateY(100%)',
@@ -174,20 +68,9 @@ export const fuseAnimations = [
         })),
         transition('void => *', animate('300ms')),
         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', [
+    public static routerTransitionLeft = trigger('routerTransitionLeft', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -212,7 +95,7 @@ export const fuseAnimations = [
                             transform: 'translateX(0)',
                             opacity  : 1
                         }),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
                             style({
                                 transform: 'translateX(-100%)',
                                 opacity  : 0
@@ -220,7 +103,7 @@ export const fuseAnimations = [
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateX(100%)'}),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
                             style({
                                 transform: 'translateX(0%)',
                                 opacity  : 1
@@ -231,9 +114,9 @@ export const fuseAnimations = [
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]),
+    ]);
 
-    trigger('routerTransitionRight', [
+    public static routerTransitionRight = trigger('routerTransitionRight', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -258,7 +141,7 @@ export const fuseAnimations = [
                             transform: 'translateX(0)',
                             opacity  : 1
                         }),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
                             style({
                                 transform: 'translateX(100%)',
                                 opacity  : 0
@@ -266,7 +149,7 @@ export const fuseAnimations = [
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateX(-100%)'}),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
                             style({
                                 transform: 'translateX(0%)',
                                 opacity  : 1
@@ -277,9 +160,9 @@ export const fuseAnimations = [
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]),
+    ]);
 
-    trigger('routerTransitionUp', [
+    public static routerTransitionUp = trigger('routerTransitionUp', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -297,33 +180,35 @@ export const fuseAnimations = [
                     opacity  : 0
                 })
             ], {optional: true}),
-            group([
-                query('fuse-content > :leave', [
-                    style({
-                        transform: 'translateY(0)',
-                        opacity  : 1
-                    }),
-                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+            sequence([
+                group([
+                    query('fuse-content > :leave', [
                         style({
-                            transform: 'translateY(-100%)',
-                            opacity  : 0
-                        }))
-                ], {optional: true}),
-                query('fuse-content > :enter', [
-                    style({transform: 'translateY(100%)'}),
-                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                        style({
-                            transform: 'translateY(0%)',
+                            transform: 'translateY(0)',
                             opacity  : 1
-                        }))
-                ], {optional: true})
-            ]),
-            query('fuse-content > :leave', animateChild(), {optional: true}),
-            query('fuse-content > :enter', animateChild(), {optional: true})
+                        }),
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                            style({
+                                transform: 'translateY(-100%)',
+                                opacity  : 0
+                            }))
+                    ], {optional: true}),
+                    query('fuse-content > :enter', [
+                        style({transform: 'translateY(100%)'}),
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                            style({
+                                transform: 'translateY(0%)',
+                                opacity  : 1
+                            }))
+                    ], {optional: true})
+                ]),
+                query('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
+            ])
         ])
-    ]),
+    ]);
 
-    trigger('routerTransitionDown', [
+    public static routerTransitionDown = trigger('routerTransitionDown', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -348,7 +233,7 @@ export const fuseAnimations = [
                             transform: 'translateY(0)',
                             opacity  : 1
                         }),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
                             style({
                                 transform: 'translateY(100%)',
                                 opacity  : 0
@@ -356,7 +241,7 @@ export const fuseAnimations = [
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateY(-100%)'}),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
                             style({
                                 transform: 'translateY(0%)',
                                 opacity  : 1
@@ -367,11 +252,11 @@ export const fuseAnimations = [
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]),
+    ]);
 
-    trigger('routerTransitionFade', [
+    public static routerTransitionFade = trigger('routerTransitionFade', [
 
-        transition('* => *', group([
+        transition('* => *', [
 
             query('fuse-content > :enter, fuse-content > :leave ', [
                 style({
@@ -382,32 +267,33 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-
             query('fuse-content > :enter', [
                 style({
                     opacity: 0
                 })
             ], {optional: true}),
-            query('fuse-content > :leave', [
-                style({
-                    opacity: 1
-                }),
-                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                    style({
-                        opacity: 0
-                    }))
-            ], {optional: true}),
-            query('fuse-content > :enter', [
-                style({
-                    opacity: 0
-                }),
-                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+            // sequence([
+                query('fuse-content > :leave', [
                     style({
                         opacity: 1
-                    }))
-            ], {optional: true}),
+                    }),
+                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        style({
+                            opacity: 0
+                        }))
+                ], {optional: true}),
+                query('fuse-content > :enter', [
+                    style({
+                        opacity: 0
+                    }),
+                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        style({
+                            opacity: 1
+                        }))
+                ], {optional: true}),
+            // ]),
             query('fuse-content > :enter', animateChild(), {optional: true}),
             query('fuse-content > :leave', animateChild(), {optional: true})
-        ]))
-    ])
-];
+        ])
+    ]);
+}

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

@@ -1,6 +1,6 @@
-<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>
+<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>
 </div>

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

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

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

@@ -1,65 +0,0 @@
-/**
- * This class is based on the code in the following projects:
- *
- * - https://github.com/zenorocha/select
- * - https://github.com/zenorocha/clipboard.js/
- *
- * Both released under MIT license - © Zeno Rocha
- */
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class CopierService
-{
-
-    private textarea: HTMLTextAreaElement;
-
-    /** Copy the text value to the clipboard. */
-    copyText(text: string): boolean
-    {
-        this.createTextareaAndSelect(text);
-
-        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;
-        }
-    }
-}

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

@@ -9,7 +9,6 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        text-align: center;
 
         .time {
             display: flex;

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

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

src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html

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

src/app/core/components/highlight/highlight.component.scss

@@ -1,6 +0,0 @@
-:host {
-    display: block;
-    padding: 8px;
-    background: #263238;
-    cursor: text;
-}

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

@@ -1,102 +0,0 @@
-import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import * as Prism from 'prismjs/prism';
-import './prism-languages';
-
-@Component({
-    selector : 'fuse-highlight',
-    template : ' ',
-    styleUrls: ['./highlight.component.scss']
-})
-export class FuseHighlightComponent implements OnInit
-{
-    @ContentChild('source') source: ElementRef;
-    @Input('lang') lang: string;
-    @Input('path') path: string;
-
-    constructor(
-        private elementRef: ElementRef,
-        private http: HttpClient
-    )
-    {
-    }
-
-    ngOnInit()
-    {
-        // If there is no language defined, return...
-        if ( !this.lang )
-        {
-            return;
-        }
-
-        // If the path is defined...
-        if ( this.path )
-        {
-            // Get the source
-            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
-
-                // Highlight it
-                this.highlight(response);
-            });
-        }
-
-        // If the path is not defined and the source element exists...
-        if ( !this.path && this.source )
-        {
-            // Highlight it
-            this.highlight(this.source.nativeElement.value);
-        }
-    }
-
-    highlight(sourceCode)
-    {
-        // Split the source into lines
-        const sourceLines = sourceCode.split('\n');
-
-        // Remove the first and the last line of the source
-        // code if they are blank lines. This way, the html
-        // can be formatted properly while using fuse-highlight
-        // component
-        if ( !sourceLines[0].trim() )
-        {
-            sourceLines.shift();
-        }
-
-        if ( !sourceLines[sourceLines.length - 1].trim() )
-        {
-            sourceLines.pop();
-        }
-
-        // Find the first non-whitespace char index in
-        // the first line of the source code
-        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
-
-        // Generate the trimmed source
-        let source = '';
-
-        // Iterate through all the lines
-        sourceLines.forEach((line, index) => {
-
-            // Trim the beginning white space depending on the index
-            // and concat the source code
-            source = source + line.substr(indexOfFirstChar, line.length);
-
-            // If it's not the last line...
-            if ( index !== sourceLines.length - 1 )
-            {
-                // Add a line break at the end
-                source = source + '\n';
-            }
-        });
-
-        // Generate the highlighted code
-        const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
-
-        // Replace the innerHTML of the component with the highlighted code
-        this.elementRef.nativeElement.innerHTML =
-            '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
-
-    }
-}
-

src/app/core/components/highlight/prism-languages.ts

@@ -1,16 +0,0 @@
-import 'prismjs/prism';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-cpp';
-import 'prismjs/components/prism-csharp';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-diff';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-perl';
-import 'prismjs/components/prism-php';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-sass';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-typescript';

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

@@ -0,0 +1,58 @@
+import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import * as hljs from 'highlight.js';
+
+@Component({
+    selector : 'fuse-hljs',
+    template : ' ',
+    styleUrls: ['./hljs.component.scss']
+})
+export class FuseHljsComponent implements OnInit
+{
+    hljs: any;
+
+    @ContentChild('source') source: ElementRef;
+    @Input('lang') lang: string;
+
+    constructor(
+        private elementRef: ElementRef
+    )
+    {
+        this.hljs = hljs;
+    }
+
+    ngOnInit()
+    {
+        const originalSource = this.source.nativeElement.value;
+
+        if ( !originalSource || !this.lang )
+        {
+            return;
+        }
+
+        // Split the source into lines
+        const sourceLines = originalSource.split('\n');
+
+        // Find the first non-whitespace char index in
+        // the first line of the source code
+        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
+
+        // Generate the trimmed source
+        let source = '';
+
+        // Iterate through all the lines and trim the
+        // beginning white space depending on the index
+        sourceLines.forEach((line, index) => {
+
+            source = source + line.substr(indexOfFirstChar, line.length);
+
+            if ( index !== sourceLines.length - 1 )
+            {
+                source = source + '\n';
+            }
+        });
+
+        this.elementRef.nativeElement.innerHTML =
+            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
+    }
+}
+

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

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

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

@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MatColors } from '../../matColors';
-import { fuseAnimations } from '../../animations';
+import { Animations } from '../../animations';
 
 @Component({
     selector     : 'fuse-material-color-picker',
     templateUrl  : './material-color-picker.component.html',
     styleUrls    : ['./material-color-picker.component.scss'],
-    animations   : fuseAnimations,
+    animations   : [Animations.slideInLeft, Animations.slideInRight],
     encapsulation: ViewEncapsulation.None
 })
 export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
@@ -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 = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+                this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
             }
             else
             {

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

@@ -1,23 +0,0 @@
-<a class="nav-link" matRipple>
-    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
-    </span>
-    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-</a>
-
-<div class="children" [ngClass]="{'open': isOpen}">
-
-    <div class="{{fuseSettings.colorClasses.navbar}}">
-
-        <ng-container *ngFor="let item of item.children">
-            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
-        </ng-container>
-
-    </div>
-
-</div>

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

@@ -1,3 +0,0 @@
-:host {
-
-}

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

@@ -1,50 +0,0 @@
-import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { fuseAnimations } from '../../../../animations';
-import { FuseConfigService } from '../../../../services/config.service';
-import { Subscription } from 'rxjs/Subscription';
-
-@Component({
-    selector   : 'fuse-nav-horizontal-collapse',
-    templateUrl: './nav-horizontal-collapse.component.html',
-    styleUrls  : ['./nav-horizontal-collapse.component.scss'],
-    animations : fuseAnimations
-})
-export class FuseNavHorizontalCollapseComponent implements OnDestroy
-{
-    onSettingsChanged: Subscription;
-    fuseSettings: any;
-    isOpen = false;
-
-    @HostBinding('class') classes = 'nav-item nav-collapse';
-    @Input() item: any;
-
-    @HostListener('mouseenter')
-    open()
-    {
-        this.isOpen = true;
-    }
-
-    @HostListener('mouseleave')
-    close()
-    {
-        this.isOpen = false;
-    }
-
-    constructor(
-        private fuseConfig: FuseConfigService
-    )
-    {
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
-                .subscribe(
-                    (newSettings) => {
-                        this.fuseSettings = newSettings;
-                    }
-                );
-    }
-
-    ngOnDestroy()
-    {
-        this.onSettingsChanged.unsubscribe();
-    }
-}

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

@@ -1,18 +0,0 @@
-<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" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [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" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
-    </span>
-</span>

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

@@ -1,3 +0,0 @@
-:host {
-
-}

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

@@ -1,12 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-horizontal-item',
-    templateUrl: './nav-horizontal-item.component.html',
-    styleUrls  : ['./nav-horizontal-item.component.scss']
-})
-export class FuseNavHorizontalItemComponent
-{
-    @HostBinding('class') classes = 'nav-item';
-    @Input() item: any;
-}

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

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

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

@@ -0,0 +1,147 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { FuseNavigationService } from '../navigation.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { Animations } from '../../../animations';
+
+@Component({
+    selector   : 'fuse-nav-collapse',
+    templateUrl: './nav-collapse.component.html',
+    styleUrls  : ['./nav-collapse.component.scss'],
+    animations : [Animations.slideInOut]
+})
+export class FuseNavCollapseComponent implements OnInit
+{
+    @Input() item: any;
+    @HostBinding('class') classes = 'nav-collapse nav-item';
+    @HostBinding('class.open') public isOpen = false;
+
+    constructor(private navigationService: FuseNavigationService, private router: Router)
+    {
+        /**
+         * When navigation changed
+         */
+        router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationEnd )
+                {
+                    /**
+                     * Check if the url is child of the collapse
+                     */
+                    if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
+                    {
+                        // console.log(this.item);
+                        this.expand();
+                    }
+                    else
+                    {
+                        this.collapse();
+                    }
+                }
+            }
+        );
+
+        /**
+         * Whenever a navigation collapse item toggled
+         */
+        this.navigationService.onNavCollapseToggled.subscribe(
+            (clickedItem) => {
+                if ( clickedItem.children )
+                {
+                    /**
+                     * if clicked collapse is child of this collapse
+                     * return
+                     */
+                    if ( this.item.children.indexOf(clickedItem) !== -1 )
+                    {
+                        return;
+                    }
+                    /**
+                     * If collapsed item is not related with this collapse
+                     * collapse
+                     */
+                    if ( this.item !== clickedItem )
+                    {
+                        this.collapse();
+                    }
+                }
+            }
+        );
+    }
+
+    /**
+     * Toggle Collapse
+     * @param ev
+     */
+    toggleOpen(ev)
+    {
+        ev.preventDefault();
+        this.isOpen = !this.isOpen;
+        this.navigationService.onNavCollapseToggled.emit(this.item);
+    }
+
+    /**
+     * Expand
+     */
+    expand()
+    {
+        if ( this.isOpen )
+        {
+            return;
+        }
+        this.isOpen = true;
+    }
+
+    /**
+     * Collapse
+     */
+    collapse()
+    {
+        if ( !this.isOpen )
+        {
+            return;
+        }
+        this.isOpen = false;
+    }
+
+    /**
+     * Checking the url is in children
+     * @param arr
+     * @param url
+     * @returns {any}
+     */
+    isUrlInChildren(arr, url)
+    {
+        if ( !arr.children )
+        {
+            return false;
+        }
+
+        for ( let i = 0; i < arr.children.length; i++ )
+        {
+            if ( arr.children[i].children )
+            {
+                if ( this.isUrlInChildren(arr.children[i], url) )
+                {
+                    return true;
+                }
+            }
+
+            if ( arr.children[i].url === url )
+            {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    public isCollapsed(): boolean
+    {
+        return this.isOpen;
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

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

@@ -0,0 +1,6 @@
+<a class="nav-link" md-ripple
+   [routerLink]="[item.url]" routerLinkActive="active">
+    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-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>

src/app/core/components/navigation/nav-item/nav-item.component.ts

@@ -1,11 +1,11 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-nav-vertical-item',
-    templateUrl: './nav-vertical-item.component.html',
-    styleUrls  : ['./nav-vertical-item.component.scss']
+    selector   : 'fuse-nav-item',
+    templateUrl: './nav-item.component.html',
+    styleUrls  : ['./nav-item.component.scss']
 })
-export class FuseNavVerticalItemComponent implements OnInit
+export class FuseNavItemComponent implements OnInit
 {
     @HostBinding('class') classes = 'nav-item';
     @Input() item: any;

src/app/core/components/navigation/nav-subheader/nav-subheader.component.html

@@ -0,0 +1 @@
+<span class="hint-text">{{ item.title }}</span>

src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss

@@ -0,0 +1,20 @@
+
+:host {
+
+    .folded:not(.folded-open) & {
+
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            min-width: 1.6rem;
+            border-top: 2px solid;
+            opacity: 0.2;
+        }
+
+        > span {
+            opacity: 0;
+            transition: opacity 200ms ease;
+        }
+    }
+}

src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts

@@ -0,0 +1,21 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-subheader',
+    templateUrl: './nav-subheader.component.html',
+    styleUrls  : ['./nav-subheader.component.scss']
+})
+export class FuseNavSubheaderComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-subheader';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

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

@@ -1,32 +1,11 @@
-<div id="main-navigation" class="nav"
-     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
+<div id="main-navigation" class="nav">
+    <ng-container *ngFor="let item of navigation">
 
-    <!-- Vertical Navigation Layout -->
-    <ng-container *ngIf="layout === 'vertical'">
+        <fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>
 
-        <ng-container *ngFor="let item of navigationModel">
+        <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
 
-            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
-            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
-
-        </ng-container>
+        <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
 
     </ng-container>
-    <!-- / Vertical Navigation Layout -->
-
-    <!-- Horizontal Navigation Layout -->
-    <ng-container *ngIf="layout === 'horizontal'">
-
-        <ng-container *ngFor="let item of navigationModel">
-
-            <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=='item'" [item]="item"></fuse-nav-horizontal-item>
-
-        </ng-container>
-
-    </ng-container>
-    <!-- / Horizontal Navigation Layout -->
-
 </div>

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

@@ -1,6 +1,5 @@
-import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { FuseNavigationService } from './navigation.service';
-import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector     : 'fuse-navigation',
@@ -8,25 +7,13 @@ import { Subscription } from 'rxjs/Subscription';
     styleUrls    : ['./navigation.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent implements OnDestroy
+export class FuseNavigationComponent
 {
-    navigationModel: any[];
-    navigationModelChangeSubscription: Subscription;
+    navigation: any[];
 
-    @Input('layout') layout = 'vertical';
-
-    constructor(private fuseNavigationService: FuseNavigationService)
+    constructor(private navigationService: FuseNavigationService)
     {
-        this.navigationModelChangeSubscription =
-            this.fuseNavigationService.onNavigationModelChange
-                .subscribe((navigationModel) => {
-                    this.navigationModel = navigationModel;
-                });
-    }
-
-    ngOnDestroy()
-    {
-        this.navigationModelChangeSubscription.unsubscribe();
+        this.navigation = navigationService.getNavigation();
     }
 
 }

src/app/core/components/navigation/navigation.model.ts

@@ -1,5 +0,0 @@
-export interface FuseNavigationModelInterface
-{
-    model: any[];
-}
-

src/app/core/components/navigation/navigation.module.ts

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
+import { FuseNavSubheaderComponent } from './nav-subheader/nav-subheader.component';
 import { FuseNavigationComponent } from './navigation.component';
-import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
-import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
-import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
-import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
-import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
+import { FuseNavItemComponent } from './nav-item/nav-item.component';
+import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.component';
 
 @NgModule({
     imports     : [
@@ -18,11 +16,9 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
     ],
     declarations: [
         FuseNavigationComponent,
-        FuseNavVerticalGroupComponent,
-        FuseNavVerticalItemComponent,
-        FuseNavVerticalCollapseComponent,
-        FuseNavHorizontalItemComponent,
-        FuseNavHorizontalCollapseComponent
+        FuseNavSubheaderComponent,
+        FuseNavItemComponent,
+        FuseNavCollapseComponent
     ]
 })
 export class FuseNavigationModule

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

@@ -1,149 +1,25 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { FuseNavigationModelInterface } from './navigation.model';
+import { FuseNavigation } from '../../../navigation.model';
 
 @Injectable()
 export class FuseNavigationService
 {
-    onNavCollapseToggle = new EventEmitter<any>();
     onNavCollapseToggled = new EventEmitter<any>();
-    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
-    navigationModel: FuseNavigationModelInterface;
+    navigation: any[];
     flatNavigation: any[] = [];
 
     constructor()
     {
+        this.navigation = new FuseNavigation().items;
     }
 
     /**
-     * Get navigation model
-     *
+     * Get navigation array
      * @returns {any[]}
      */
-    getNavigationModel()
+    getNavigation()
     {
-        return this.navigationModel.model;
-    }
-
-    /**
-     * Set the navigation model
-     *
-     * @param model
-     */
-    setNavigationModel(model)
-    {
-        this.navigationModel = model;
-        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;
-                }
-            }
-        }
+        return this.navigation;
     }
 
     /**
@@ -153,16 +29,9 @@ export class FuseNavigationService
      */
     getFlatNavigation(navigationItems?)
     {
-        // If navigation items not provided,
-        // that means we are running the function
-        // for the first time...
         if ( !navigationItems )
         {
-            // Reset the flat navigation
-            this.flatNavigation = [];
-
-            // Get the entire navigation model
-            navigationItems = this.navigationModel.model;
+            navigationItems = this.navigation;
         }
 
         for ( const navItem of navigationItems )
@@ -172,7 +41,7 @@ export class FuseNavigationService
                 continue;
             }
 
-            if ( navItem.type === 'item' )
+            if ( navItem.type === 'nav-item' )
             {
                 this.flatNavigation.push({
                     title: navItem.title,
@@ -184,12 +53,9 @@ export class FuseNavigationService
                 continue;
             }
 
-            if ( navItem.type === 'collapse' || navItem.type === 'group' )
+            if ( navItem.type === 'nav-collapse' )
             {
-                if ( navItem.children )
-                {
-                    this.getFlatNavigation(navItem.children);
-                }
+                this.getFlatNavigation(navItem.children);
             }
         }
 

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

@@ -1,17 +0,0 @@
-<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" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
-    </span>
-    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-</a>
-
-<div class="children" [@slideInOut]="isOpen">
-    <ng-container *ngFor="let item of item.children">
-        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
-        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
-        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-    </ng-container>
-</div>

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

@@ -1,193 +0,0 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { FuseNavigationService } from '../../navigation.service';
-import { NavigationEnd, Router } from '@angular/router';
-import { fuseAnimations } from '../../../../animations';
-
-@Component({
-    selector   : 'fuse-nav-vertical-collapse',
-    templateUrl: './nav-vertical-collapse.component.html',
-    styleUrls  : ['./nav-vertical-collapse.component.scss'],
-    animations : fuseAnimations
-})
-export class FuseNavVerticalCollapseComponent implements OnInit
-{
-    @Input() item: any;
-    @HostBinding('class') classes = 'nav-collapse nav-item';
-    @HostBinding('class.open') public isOpen = false;
-
-    constructor(
-        private navigationService: FuseNavigationService,
-        private router: Router
-    )
-    {
-        // Listen for route changes
-        router.events.subscribe(
-            (event) => {
-                if ( event instanceof NavigationEnd )
-                {
-                    // Check if the url can be found in
-                    // one of the children of this item
-                    if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
-                    {
-                        this.expand();
-                    }
-                    else
-                    {
-                        this.collapse();
-                    }
-                }
-            }
-        );
-
-        // Listen for collapsing of any navigation item
-        this.navigationService.onNavCollapseToggled
-            .subscribe(
-                (clickedItem) => {
-                    if ( clickedItem && clickedItem.children )
-                    {
-                        // Check if the clicked item is one
-                        // of the children of this item
-                        if ( this.isChildrenOf(this.item, clickedItem) )
-                        {
-                            return;
-                        }
-
-                        // Check if the url can be found in
-                        // one of the children of this item
-                        if ( this.isUrlInChildren(this.item, this.router.url) )
-                        {
-                            return;
-                        }
-
-                        // If the clicked item is not this item, collapse...
-                        if ( this.item !== clickedItem )
-                        {
-                            this.collapse();
-                        }
-                    }
-                }
-            );
-    }
-
-    ngOnInit()
-    {
-        // Check if the url can be found in
-        // one of the children of this item
-        if ( this.isUrlInChildren(this.item, this.router.url) )
-        {
-            this.expand();
-        }
-        else
-        {
-            this.collapse();
-        }
-    }
-
-    /**
-     * Toggle collapse
-     *
-     * @param ev
-     */
-    toggleOpen(ev)
-    {
-        ev.preventDefault();
-
-        this.isOpen = !this.isOpen;
-
-        // Navigation collapse toggled...
-        this.navigationService.onNavCollapseToggled.emit(this.item);
-        this.navigationService.onNavCollapseToggle.emit();
-    }
-
-    /**
-     * Expand the collapsable navigation
-     */
-    expand()
-    {
-        if ( this.isOpen )
-        {
-            return;
-        }
-
-        this.isOpen = true;
-        this.navigationService.onNavCollapseToggle.emit();
-    }
-
-    /**
-     * Collapse the collapsable navigation
-     */
-    collapse()
-    {
-        if ( !this.isOpen )
-        {
-            return;
-        }
-
-        this.isOpen = false;
-        this.navigationService.onNavCollapseToggle.emit();
-    }
-
-    /**
-     * Check if the given parent has the
-     * given item in one of its children
-     *
-     * @param parent
-     * @param item
-     * @return {any}
-     */
-    isChildrenOf(parent, item)
-    {
-        if ( !parent.children )
-        {
-            return false;
-        }
-
-        if ( parent.children.indexOf(item) !== -1 )
-        {
-            return true;
-        }
-
-        for ( const children of parent.children )
-        {
-            if ( children.children )
-            {
-                return this.isChildrenOf(children, item);
-            }
-        }
-    }
-
-    /**
-     * Check if the given url can be found
-     * in one of the given parent's children
-     *
-     * @param parent
-     * @param url
-     * @returns {any}
-     */
-    isUrlInChildren(parent, url)
-    {
-        if ( !parent.children )
-        {
-            return false;
-        }
-
-        for ( let i = 0; i < parent.children.length; i++ )
-        {
-            if ( parent.children[i].children )
-            {
-                if ( this.isUrlInChildren(parent.children[i], url) )
-                {
-                    return true;
-                }
-            }
-
-            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
-            {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-}

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

@@ -1,11 +0,0 @@
-<div class="group-title">
-    <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
-</div>
-
-<div class="group-items">
-    <ng-container *ngFor="let item of item.children">
-        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
-        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
-    </ng-container>
-</div>

src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss

@@ -1,23 +0,0 @@
-:host {
-
-    .folded:not(.folded-open) & {
-
-        > .group-title {
-            align-items: center;
-
-            > span {
-                opacity: 0;
-                transition: opacity 200ms ease;
-            }
-
-            &:before {
-                content: '';
-                display: block;
-                position: absolute;
-                min-width: 1.6rem;
-                border-top: 2px solid;
-                opacity: 0.2;
-            }
-        }
-    }
-}

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

@@ -1,21 +0,0 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-vertical-group',
-    templateUrl: './nav-vertical-group.component.html',
-    styleUrls  : ['./nav-vertical-group.component.scss']
-})
-export class FuseNavVerticalGroupComponent implements OnInit
-{
-    @HostBinding('class') classes = 'nav-group nav-item';
-    @Input() item: any;
-
-    constructor()
-    {
-    }
-
-    ngOnInit()
-    {
-    }
-
-}

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

@@ -1,18 +0,0 @@
-<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" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [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" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [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 mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+            <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
-                <mat-icon class="s-24">search</mat-icon>
+                <md-icon class="s-24">search</md-icon>
             </button>
             <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
+                <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
             </span>-->
         </label>
 
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
 
-        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
+        <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
                 aria-label="Collapse Search Bar">
-            <mat-icon class="s-24">close</mat-icon>
+            <md-icon class="s-24">close</md-icon>
         </button>
 
     </div>

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

@@ -3,14 +3,11 @@
 :host {
 
     .fuse-search-bar {
-        min-width: 64px;
         height: 64px;
         font-size: 13px;
-
-        @include media-breakpoint-down('sm') {
+        @include media-breakpoint-down('xs') {
             height: 56px;
         }
-
         .fuse-search-bar-expander,
         .fuse-search-bar-collapser {
             cursor: pointer;
@@ -19,8 +16,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
-
-            @include media-breakpoint-down('sm') {
+            @include media-breakpoint-down('xs') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
@@ -30,7 +26,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
-            @include media-breakpoint-down('sm') {
+            @include media-breakpoint-down('xs') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
@@ -74,4 +70,4 @@
             }
         }
     }
-}
+}

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

@@ -2,22 +2,22 @@
 
     <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
          fxHide fxShow.lt-md>
-        <button mat-icon-button (click)="showMobileShortcutsPanel()">
-            <mat-icon class="amber-600-fg">star</mat-icon>
+        <button md-icon-button (click)="showMobileShortcutsPanel()">
+            <md-icon class="amber-600-fg">star</md-icon>
         </button>
     </div>
 
     <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
 
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
 
             <div fxLayout="row" fxLayoutAlign="start center">
 
                 <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
                      *ngFor="let shortcutItem of shortcutItems">
 
-                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+                    <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+                        <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -25,64 +25,64 @@
 
                 </div>
 
-                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
-                        (menuOpened)="onMenuOpen()">
-                    <mat-icon class="amber-600-fg">star</mat-icon>
+                <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>
 
             </div>
 
             <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
-                <button mat-icon-button (click)="hideMobileShortcutsPanel()">
-                    <mat-icon>close</mat-icon>
+                <button md-icon-button (click)="hideMobileShortcutsPanel()">
+                    <md-icon>close</md-icon>
                 </button>
             </div>
 
         </div>
 
-        <mat-menu #addMenu="matMenu" class="w-240">
+        <md-menu #addMenu="mdMenu" class="w-240">
 
-            <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-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-divider></mat-divider>
-            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+            <md-divider></md-divider>
+            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
 
-                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
-                               (click)="toggleShortcut($event, shortcutItem)">
+                <md-list-item *ngFor="let shortcutItem of shortcutItems"
+                              (click)="toggleShortcut($event, shortcutItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+                        <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-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 matLine fxFlex>{{shortcutItem.title}}</p>
-                        <mat-icon class="ml-8">star</mat-icon>
+                        <p md-line fxFlex>{{shortcutItem.title}}</p>
+                        <md-icon class="ml-8">star</md-icon>
                     </div>
-                </mat-list-item>
-                <mat-list-item *ngIf="shortcutItems.length === 0">
+                </md-list-item>
+                <md-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
-                </mat-list-item>
-            </mat-nav-list>
+                </md-list-item>
+            </md-nav-list>
 
-            <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
-                <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
-                               (click)="toggleShortcut($event, navigationItem)">
+            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
+                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
+                              (click)="toggleShortcut($event, navigationItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
+                        <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-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 matLine fxFlex>{{navigationItem.title}}</p>
-                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+                        <p md-line fxFlex>{{navigationItem.title}}</p>
+                        <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
                     </div>
-                </mat-list-item>
-            </mat-nav-list>
-        </mat-menu>
+                </md-list-item>
+            </md-nav-list>
+        </md-menu>
 
     </div>
 

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

@@ -4,7 +4,6 @@ import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
 import { FuseMatchMedia } from '../../services/match-media.service';
 import { FuseConfigService } from '../../services/config.service';
-import { CookieService } from 'ngx-cookie-service';
 
 @Component({
     selector   : 'fuse-shortcuts',
@@ -30,8 +29,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private observableMedia: ObservableMedia,
         private fuseMatchMedia: FuseMatchMedia,
         private fuseNavigationService: FuseNavigationService,
-        private fuseConfig: FuseConfigService,
-        private cookieService: CookieService
+        private fuseConfig: FuseConfigService
     )
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
@@ -47,42 +45,33 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
-        const cookieExists = this.cookieService.check('FUSE2.shortcuts');
-
-        if ( cookieExists )
-        {
-            this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
-        }
-        else
-        {
-            // User's shortcut items
-            this.shortcutItems = [
-                {
-                    'title': 'Calendar',
-                    'type' : 'nav-item',
-                    'icon' : 'today',
-                    'url'  : '/apps/calendar'
-                },
-                {
-                    'title': 'Mail',
-                    'type' : 'nav-item',
-                    'icon' : 'email',
-                    'url'  : '/apps/mail'
-                },
-                {
-                    'title': 'Contacts',
-                    'type' : 'nav-item',
-                    'icon' : 'account_box',
-                    'url'  : '/apps/contacts'
-                },
-                {
-                    'title': 'To-Do',
-                    'type' : 'nav-item',
-                    'icon' : 'check_box',
-                    'url'  : '/apps/todo'
-                }
-            ];
-        }
+        // User's shortcut items
+        this.shortcutItems = [
+            {
+                'title': 'Calendar',
+                'type' : 'nav-item',
+                'icon' : 'today',
+                'url'  : '/apps/calendar'
+            },
+            {
+                'title': 'Mail',
+                'type' : 'nav-item',
+                'icon' : 'email',
+                'url'  : '/apps/mail'
+            },
+            {
+                'title': 'Contacts',
+                'type' : 'nav-item',
+                'icon' : 'account_box',
+                'url'  : '/apps/contacts'
+            },
+            {
+                'title': 'To-Do',
+                'type' : 'nav-item',
+                'icon' : 'check_box',
+                'url'  : '/apps/todo'
+            }
+        ];
 
         this.matchMediaSubscription =
             this.fuseMatchMedia.onMediaChange.subscribe(() => {
@@ -126,18 +115,12 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             if ( this.shortcutItems[i].url === itemToToggle.url )
             {
                 this.shortcutItems.splice(i, 1);
-
-                // Save to the cookies
-                this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
-
                 return;
             }
+
         }
 
         this.shortcutItems.push(itemToToggle);
-
-        // Save to the cookies
-        this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
     }
 
     isInShortcuts(navigationItem)
@@ -149,9 +132,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     onMenuOpen()
     {
-        setTimeout(() => {
-            this.searchInputField.nativeElement.focus();
-        });
+        this.searchInputField.nativeElement.focus();
     }
 
     showMobileShortcutsPanel()

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

@@ -1,105 +1,95 @@
-<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
-    <mat-icon>settings</mat-icon>
+<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
+    <md-icon>settings</md-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-z2 pb-16">
 
-<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
-
-    <button mat-icon-button class="close-button" (click)="closeBar()">
-        <mat-icon>close</mat-icon>
+    <button md-icon-button class="close-button" (click)="closeBar()">
+        <md-icon>close</md-icon>
     </button>
 
-    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
+    <md-list>
+        <h3 md-subheader>Navigation:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
+                <md-radio-button class="mr-8" value="left">Left</md-radio-button>
+                <md-radio-button class="mr-8" value="right">Right</md-radio-button>
+                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
 
-        <h3>Navigation:</h3>
-        <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 md-subheader>Toolbar:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()">
+                <md-radio-button class="mr-8" value="below">Below</md-radio-button>
+                <md-radio-button class="mr-8" value="above">Above</md-radio-button>
+                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
 
-        <h3>Navigation Fold (for vertical navigation):</h3>
-        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
-                          (change)="onSettingsChange()">
-            Folded
-        </mat-slide-toggle>
+        <h3 md-subheader>Footer:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()">
+                <md-radio-button class="mr-8" value="below">Below</md-radio-button>
+                <md-radio-button class="mr-8" value="above">Above</md-radio-button>
+                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
 
-        <h3 class="mt-24">Toolbar:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <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>
+        <md-divider></md-divider>
 
-        <h3 class="mt-24">Footer:</h3>
-        <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>
-        <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>
-
-        <mat-divider></mat-divider>
-
-        <h3>Colors:</h3>
-        <div class="colors">
+        <h3 md-subheader>Colors:</h3>
 
+        <md-list-item>
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4>Toolbar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
+        </md-list-item>
 
+        <md-list-item>
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4>Navigation Bar Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
+        </md-list-item>
 
+        <md-list-item>
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4>Footer Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
+        </md-list-item>
 
-        </div>
+        <md-divider></md-divider>
 
-        <mat-divider></mat-divider>
+        <h3 md-subheader>Animation:</h3>
 
-        <h3>Router Animation:</h3>
-        <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>
+        <md-list-item>
+            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+                <h4>Router Animation</h4>
+                <md-select [(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>
+            </div>
+        </md-list-item>
 
+    </md-list>
 </div>

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

@@ -14,69 +14,19 @@
     display: block;
     right: 0;
     top: 160px;
-    z-index: 998;
-
-    &.bar-closed .theme-options-panel {
-        display: none;
-    }
 
     .theme-options-panel {
         position: absolute;
         right: 0;
         top: 0;
-        width: 360px;
+        width: 320px;
         transform: translate3d(100%, 0, 0);
         z-index: 999;
-        max-height: calc(100vh - 200px);
-        padding: 24px;
-        overflow: auto;
-
-        @include media-breakpoint-down('xs') {
-            top: -120px;
-            max-height: calc(100vh - 100px);
-            width: 90vw;
-        }
 
         .close-button {
             position: absolute;
-            top: 8px;
-            right: 8px;
-        }
-
-        h3 {
-            font-size: 14px;
-            font-weight: 500;
-            color: rgba(0, 0, 0, 0.54);
-        }
-
-        .mat-divider {
-            display: block !important;
-            width: 100%;
-            margin: 24px 0 16px 0;
-        }
-
-        .colors {
-            display: block !important;
-            width: 100%;
-        }
-    }
-
-    .theme-options-panel-overlay {
-        position: fixed;
-        display: block;
-        background: rgba(0, 0, 0, 0);
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        z-index: 998;
-
-        @include media-breakpoint-down('sm') {
-            background: rgba(0, 0, 0, 0.37);
-        }
-
-        &.hidden {
-            display: none;
+            top: 0;
+            right: 0;
         }
     }
 
@@ -84,10 +34,6 @@
         font-size: 15px;
     }
 
-    .mat-divider {
-        margin: 16px;
-    }
-
     .open-button {
         position: absolute;
         top: 0;
@@ -103,7 +49,7 @@
         opacity: .75;
         z-index: 998;
 
-        mat-icon {
+        md-icon {
             animation: rotating 3s linear infinite;
         }
 

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

@@ -1,38 +1,28 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 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',
     templateUrl: './theme-options.component.html',
-    styleUrls  : ['./theme-options.component.scss'],
-    animations : fuseAnimations
+    styleUrls  : ['./theme-options.component.scss']
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
     @ViewChild('openButton') openButton;
     @ViewChild('panel') panel;
-    @ViewChild('overlay') overlay: ElementRef;
 
     public player: AnimationPlayer;
     fuseSettings: any;
 
     onSettingsChanged: Subscription;
 
-    @HostBinding('class.bar-closed') barClosed: boolean;
-
     constructor(
         private animationBuilder: AnimationBuilder,
-        private fuseConfig: FuseConfigService,
-        private navigationService: FuseNavigationService,
-        private renderer: Renderer2
+        private fuseConfig: FuseConfigService
     )
     {
-        this.barClosed = true;
-
         this.onSettingsChanged =
             this.fuseConfig.onSettingsChanged
                 .subscribe(
@@ -40,34 +30,10 @@ 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()
     {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
-        });
     }
 
     onSettingsChange()
@@ -83,25 +49,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     style({transform: 'translate3d(0,0,0)'}),
                     animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
                 ]).create(this.panel.nativeElement);
-
         this.player.play();
-
-        this.player.onDone(() => {
-            this.barClosed = true;
-        });
     }
 
     openBar()
     {
-        this.barClosed = false;
-
         this.player =
             this.animationBuilder
                 .build([
                     style({transform: 'translate3d(100%,0,0)'}),
                     animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
                 ]).create(this.panel.nativeElement);
-
         this.player.play();
     }
 

src/app/core/components/widget/widget.component.scss

@@ -62,23 +62,4 @@ fuse-widget {
             transform: rotateY(360deg);
         }
     }
-
-    .mat-form-field {
-
-        &.mat-form-field-type-mat-select {
-
-            .mat-input-wrapper {
-                padding: 16px 0;
-
-                .mat-input-infix {
-                    border: none;
-                    padding: 0;
-                }
-            }
-
-            .mat-input-underline {
-                display: none;
-            }
-        }
-    }
 }

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

@@ -27,9 +27,7 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
         setTimeout(() => {
 
             this.toggleButtons.forEach(flipButton => {
-                this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
+                this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
                     this.toggle();
                 });
             });

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);
-            }, 300);
+            }, 0);
             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

@@ -1,84 +0,0 @@
-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;
-
-    @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) )
-        {
-            this.isLockedOpen = true;
-            this.matSidenav.mode = 'side';
-            this.matSidenav.toggle(true);
-        }
-        else
-        {
-            this.isLockedOpen = false;
-            this.matSidenav.mode = 'over';
-            this.matSidenav.toggle(false);
-        }
-
-        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
-            if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
-            {
-                this.isLockedOpen = true;
-                this.matSidenav.mode = 'side';
-                this.matSidenav.toggle(true);
-            }
-            else
-            {
-                this.isLockedOpen = false;
-                this.matSidenav.mode = 'over';
-                this.matSidenav.toggle(false);
-            }
-        });
-    }
-
-    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-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,166 +0,0 @@
-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';
-
-@Directive({
-    selector: '[fusePerfectScrollbar]'
-})
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
-{
-    onSettingsChanged: Subscription;
-    isDisableCustomScrollbars = false;
-    isMobile = false;
-    isInitialized = true;
-    ps;
-
-    constructor(
-        public element: ElementRef,
-        private fuseConfig: FuseConfigService,
-        private platform: Platform
-    )
-    {
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
-                .subscribe(
-                    (settings) => {
-                        this.isDisableCustomScrollbars = !settings.customScrollbars;
-                    }
-                );
-
-        if ( this.platform.ANDROID || this.platform.IOS )
-        {
-            this.isMobile = true;
-        }
-    }
-
-    ngAfterViewInit()
-    {
-        if ( this.isMobile || this.isDisableCustomScrollbars )
-        {
-            this.isInitialized = false;
-            return;
-        }
-
-        // Initialize the perfect-scrollbar
-        this.ps = new PerfectScrollbar(this.element.nativeElement, {
-            wheelPropagation: true
-        });
-    }
-
-    ngOnDestroy()
-    {
-        if ( !this.isInitialized || !this.ps )
-        {
-            return;
-        }
-
-        this.onSettingsChanged.unsubscribe();
-
-        // Destroy the perfect-scrollbar
-        this.ps.destroy();
-    }
-
-    update()
-    {
-        if ( !this.isInitialized )
-        {
-            return;
-        }
-
-        // Update the perfect-scrollbar
-        this.ps.update();
-    }
-
-    destroy()
-    {
-        this.ngOnDestroy();
-    }
-
-    scrollToX(x: number, speed?: number)
-    {
-        this.animateScrolling('scrollLeft', x, speed);
-    }
-
-    scrollToY(y: number, speed?: number)
-    {
-        this.animateScrolling('scrollTop', y, speed);
-    }
-
-    scrollToTop(offset?: number, speed?: number)
-    {
-        this.animateScrolling('scrollTop', (offset || 0), speed);
-    }
-
-    scrollToLeft(offset?: number, speed?: number)
-    {
-        this.animateScrolling('scrollLeft', (offset || 0), speed);
-    }
-
-    scrollToRight(offset?: number, speed?: number)
-    {
-        const width = this.element.nativeElement.scrollWidth;
-
-        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
-    }
-
-    scrollToBottom(offset?: number, speed?: number)
-    {
-        const height = this.element.nativeElement.scrollHeight;
-
-        this.animateScrolling('scrollTop', height - (offset || 0), speed);
-    }
-
-    animateScrolling(target: string, value: number, speed?: number)
-    {
-        if ( !speed )
-        {
-            this.element.nativeElement[target] = value;
-
-            // PS has weird event sending order, this is a workaround for that
-            this.update();
-            this.update();
-        }
-        else if ( value !== this.element.nativeElement[target] )
-        {
-            let newValue = 0;
-            let scrollCount = 0;
-
-            let oldTimestamp = performance.now();
-            let oldValue = this.element.nativeElement[target];
-
-            const cosParameter = (oldValue - value) / 2;
-
-            const step = (newTimestamp) => {
-                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
-
-                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
-
-                // Only continue animation if scroll position has not changed
-                if ( this.element.nativeElement[target] === oldValue )
-                {
-                    if ( scrollCount >= Math.PI )
-                    {
-                        this.element.nativeElement[target] = value;
-
-                        // PS has weird event sending order, this is a workaround for that
-                        this.update();
-
-                        this.update();
-                    }
-                    else
-                    {
-                        this.element.nativeElement[target] = oldValue = newValue;
-
-                        oldTimestamp = newTimestamp;
-
-                        window.requestAnimationFrame(step);
-                    }
-                }
-            };
-
-            window.requestAnimationFrame(step);
-        }
-    }
-}

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

@@ -0,0 +1,93 @@
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } 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, AfterViewInit, 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) )
+        {
+            this.isLockedOpen = true;
+            this.mdSidenav.mode = 'side';
+            this.mdSidenav.open();
+        }
+        else
+        {
+            this.isLockedOpen = false;
+            this.mdSidenav.mode = 'over';
+            this.mdSidenav.close();
+        }
+
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
+            if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
+            {
+                this.isLockedOpen = true;
+                this.mdSidenav.mode = 'side';
+                this.mdSidenav.open();
+            }
+            else
+            {
+                this.isLockedOpen = false;
+                this.mdSidenav.mode = 'over';
+                this.mdSidenav.close();
+            }
+        });
+
+    }
+
+    ngAfterViewInit()
+    {
+        setTimeout(() => {
+            this.stopTransition = false;
+        }, 0);
+    }
+
+    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/directives/md-sidenav-helper/md-sidenav-helper.service.ts

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

src/app/core/fuseUtils.ts

@@ -1,5 +1,6 @@
 export class FuseUtils
 {
+
     public static filterArrayByString(mainArr, searchText)
     {
         if ( searchText === '' )
@@ -16,6 +17,7 @@ export class FuseUtils
 
     public static searchInObj(itemObj, searchText)
     {
+
         for ( const prop in itemObj )
         {
             if ( !itemObj.hasOwnProperty(prop) )
@@ -27,7 +29,7 @@ export class FuseUtils
 
             if ( typeof value === 'string' )
             {
-                if ( this.searchInString(value, searchText) )
+                if ( this.searchInSting(value, searchText) )
                 {
                     return true;
                 }
@@ -39,6 +41,7 @@ export class FuseUtils
                 {
                     return true;
                 }
+
             }
 
             if ( typeof value === 'object' )
@@ -57,7 +60,7 @@ export class FuseUtils
         {
             if ( typeof value === 'string' )
             {
-                if ( this.searchInString(value, searchText) )
+                if ( this.searchInSting(value, searchText) )
                 {
                     return true;
                 }
@@ -73,7 +76,7 @@ export class FuseUtils
         }
     }
 
-    public static searchInString(value, searchText)
+    public static searchInSting(value, searchText)
     {
         return value.toLowerCase().includes(searchText);
     }
@@ -82,33 +85,9 @@ export class FuseUtils
     {
         function S4()
         {
-            return Math.floor((1 + Math.random()) * 0x10000)
-                       .toString(16)
-                       .substring(1);
+            return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
         }
 
-        return S4() + S4();
-    }
-
-    public static toggleInArray(item, array)
-    {
-        if ( array.indexOf(item) === -1 )
-        {
-            array.push(item);
-        }
-        else
-        {
-            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
+        return (S4() + S4());
     }
 }

src/app/core/matColors.ts

@@ -681,7 +681,6 @@ const matColors = {
     }
 };
 
-// tslint:disable-next-line
 const matPresetColors = [
     '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64'
 ];

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

@@ -1,108 +1,106 @@
 import { NgModule } from '@angular/core';
 import {
-    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
+    MdAutocompleteModule,
+    MdButtonModule,
+    MdButtonToggleModule,
+    MdCheckboxModule,
+    MdToolbarModule,
+    MdTooltipModule,
+    MdCardModule,
+    MdChipsModule,
+    MdCoreModule,
+    MdDatepickerModule,
+    MdDialogModule,
+    MdExpansionModule,
+    MdGridListModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdMenuModule,
+    MdNativeDateModule,
+    MdPaginatorModule,
+    MdProgressBarModule,
+    MdProgressSpinnerModule,
+    MdRadioModule,
+    MdRippleModule,
+    MdSelectModule,
+    MdSidenavModule,
+    MdSliderModule,
+    MdSlideToggleModule,
+    MdSnackBarModule,
+    MdSortModule,
+    MdTableModule,
+    MdTabsModule
 } from '@angular/material';
-import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk';
 
 @NgModule({
     imports: [
-        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,
+        MdAutocompleteModule,
+        MdButtonModule,
+        MdButtonToggleModule,
+        MdCardModule,
+        MdCheckboxModule,
+        MdChipsModule,
+        MdCoreModule,
+        MdDatepickerModule,
+        MdDialogModule,
+        MdExpansionModule,
+        MdGridListModule,
+        MdIconModule,
+        MdInputModule,
+        MdListModule,
+        MdMenuModule,
+        MdNativeDateModule,
+        MdPaginatorModule,
+        MdProgressBarModule,
+        MdProgressSpinnerModule,
+        MdRadioModule,
+        MdRippleModule,
+        MdSelectModule,
+        MdSidenavModule,
+        MdSliderModule,
+        MdSlideToggleModule,
+        MdSnackBarModule,
+        MdSortModule,
+        MdTableModule,
+        MdTabsModule,
+        MdToolbarModule,
+        MdTooltipModule,
         CdkTableModule
     ],
     exports: [
-        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,
+        MdAutocompleteModule,
+        MdButtonModule,
+        MdButtonToggleModule,
+        MdCardModule,
+        MdCheckboxModule,
+        MdChipsModule,
+        MdCoreModule,
+        MdDatepickerModule,
+        MdDialogModule,
+        MdExpansionModule,
+        MdGridListModule,
+        MdIconModule,
+        MdInputModule,
+        MdListModule,
+        MdMenuModule,
+        MdNativeDateModule,
+        MdPaginatorModule,
+        MdProgressBarModule,
+        MdProgressSpinnerModule,
+        MdRadioModule,
+        MdRippleModule,
+        MdSelectModule,
+        MdSidenavModule,
+        MdSliderModule,
+        MdSlideToggleModule,
+        MdSnackBarModule,
+        MdSortModule,
+        MdTableModule,
+        MdTabsModule,
+        MdToolbarModule,
+        MdTooltipModule,
         CdkTableModule
     ]
 })

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

@@ -4,34 +4,31 @@ import { CommonModule } from '@angular/common';
 
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
-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 { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
+import { FuseNavigationService } from '../components/navigation/navigation.service';
 import { FuseMatchMedia } from '../services/match-media.service';
-import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseHighlightComponent } from '../components/highlight/highlight.component';
-import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { FuseNavbarService } from '../../main/navbar/navbar.service';
+import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
+import { FuseHljsComponent } from '../components/hljs/hljs.component';
 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 { FuseTranslationLoaderService } from '../services/translation-loader.service';
-import { CookieService } from 'ngx-cookie-service';
-import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
     declarations   : [
-        FuseMatSidenavHelperDirective,
-        FuseMatSidenavTogglerDirective,
+        FuseMdSidenavHelperDirective,
+        FuseMdSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
-        FuseHighlightComponent,
+        FuseHljsComponent,
         FuseIfOnDomDirective,
-        FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
     ],
     imports        : [
@@ -40,6 +37,7 @@ import { TranslateModule } from '@ngx-translate/core';
         CommonModule,
         FormsModule,
         FusePipesModule,
+        PerfectScrollbarModule,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
@@ -50,29 +48,27 @@ import { TranslateModule } from '@ngx-translate/core';
         MaterialModule,
         CommonModule,
         FormsModule,
-        FuseMatSidenavHelperDirective,
-        FuseMatSidenavTogglerDirective,
+        FuseMdSidenavHelperDirective,
+        FuseMdSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
-        FuseHighlightComponent,
-        FusePerfectScrollbarDirective,
+        FuseHljsComponent,
+        PerfectScrollbarModule,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
         NgxDatatableModule,
         FuseIfOnDomDirective,
-        FuseMaterialColorPickerComponent,
-        TranslateModule
+        FuseMaterialColorPickerComponent
     ],
     entryComponents: [
         FuseConfirmDialogComponent
     ],
     providers      : [
-        CookieService,
+        FuseNavigationService,
         FuseMatchMedia,
-        FuseNavbarVerticalService,
-        FuseMatSidenavHelperService,
-        FuseTranslationLoaderService
+        FuseNavbarService,
+        FuseMdSidenavHelperService
     ]
 })
 

src/app/core/pipes/getById.pipe.ts

@@ -1,9 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({
-    name: 'getById',
-    pure: false
-})
+@Pipe({name: 'getById'})
 export class GetByIdPipe implements PipeTransform
 {
     transform(value: any[], id: number, property: string): any

src/app/core/scss/core.scss

@@ -2,8 +2,8 @@
 @import '~@swimlane/ngx-datatable/release/index.css';
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
-// Perfect scrollbar
-@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+// Perfect Scrollbar
+@import "~perfect-scrollbar/src/css/main";
 // Fuse
 @import "fuse";
 
@@ -25,11 +25,9 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
-@import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";
-@import "partials/print";
 
 // Plugins
 @import "partials/plugins/plugins";

src/app/core/scss/partials/_angular-material-fix.scss

@@ -1,78 +1,6 @@
-// Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
     .mat-button-ripple {
         border-radius: 50%;
     }
 }
-
-// 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 !important;
-    height: 7px !important;
-}
-
-// Fix: "Input underlines has wrong color opacity value"
-.mat-form-field-underline {
-    background-color: rgba(0, 0, 0, 0.12);
-}
-
-// Fix: "Some idiots using table-cell and inline-table in mat-select"
-.mat-form-field {
-
-    &.mat-form-field-type-mat-select {
-
-        .mat-input-infix {
-            display: inline-flex;
-            width: auto;
-
-            .mat-select-trigger {
-                display: inline-flex;
-                align-items: center;
-                width: 100%;
-
-                .mat-select-value {
-                    display: flex;
-                    max-width: none;
-                    margin-right: 8px;
-                }
-
-                .mat-select-arrow-wrapper {
-                    display: inline-flex;
-                }
-            }
-        }
-    }
-}
-
-// Fix: "Stepper icons are broken due to Fuse's icon helpers"
-mat-horizontal-stepper,
-mat-vertical-stepper {
-
-    mat-step-header {
-
-        mat-icon {
-            height: 16px !important;
-            width: 16px !important;
-            min-width: 0 !important;
-            min-height: 0 !important;
-            color: rgba(255, 255, 255, 0.87) !important;
-        }
-    }
-}
-
-mat-vertical-stepper {
-    padding: 16px 0;
-}

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

@@ -1,56 +0,0 @@
-.fuse-card {
-    max-width: 320px;
-    min-width: 320px;
-    background: white;
-    border-radius: 2px;
-    @include mat-elevation(2);
-
-    &.variable-width {
-        min-width: 0;
-    }
-
-    // Buttons
-    .mat-button {
-        min-width: 0 !important;
-        padding: 0 8px !important;
-    }
-
-    // Button Toggle Group
-    .mat-button-toggle-group,
-    .mat-button-toggle-standalone {
-        box-shadow: none !important;
-    }
-
-    // Tabs
-    .mat-tab-labels {
-        justify-content: center;
-    }
-
-    .mat-tab-label {
-        min-width: 0 !important;
-    }
-
-    // Divider
-    .card-divider {
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
-        margin: 16px;
-
-        &.light {
-            border-top-color: rgba(255, 255, 255, 0.12);
-        }
-
-        &.full-width {
-            margin: 0;
-        }
-    }
-
-    // Expand Area
-    .card-expand-area {
-        overflow: hidden;
-
-        .card-expanded-content {
-            padding: 8px 16px 16px 16px;
-            line-height: 1.75;
-        }
-    }
-}

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

@@ -51,16 +51,13 @@ $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 {
             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,
@@ -112,60 +109,49 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 @mixin generateMaterialElementColors($contrastColor) {
 
     // If the contrast color is white...
-    $fuseForeground: (
-        base: white,
-        text: white,
-        hint-text: rgba(white, 0.5),
-        divider: rgba(white, 0.12),
-    );
+    $foreground: $mat-dark-theme-foreground;
 
     // If the contrast color is black...
     @if (rgba(black, 1) == rgba($contrastColor, 1)) {
-
-        $fuseForeground: (
-            base: black,
-            hint-text: rgba(black, 0.38),
-            divider: rgba(black, 0.12),
-        );
+        $foreground: $mat-light-theme-foreground;
     }
 
     // Native Input
     input[type="text"] {
-        color: map_get($fuseForeground, base);
+        color: mat-color($foreground, base);
     }
 
     // Input
     .mat-input-placeholder {
-        color: map_get($fuseForeground, hint-text);
+        color: mat-color($foreground, hint-text);
     }
 
     .mat-input-underline {
-        background-color: map_get($fuseForeground, divider);
+        background-color: mat-color($foreground, divider);
     }
 
     // Select
     .mat-select-trigger,
     .mat-select-arrow {
-        color: map_get($fuseForeground, hint-text);
+        color: mat-color($foreground, hint-text);
     }
 
     .mat-select-underline {
-        background-color: map_get($fuseForeground, divider);
+        background-color: mat-color($foreground, divider);
     }
 
     .mat-select-disabled .mat-select-value,
     .mat-select-arrow,
     .mat-select-trigger {
-        color: map_get($fuseForeground, hint-text);
+        color: mat-color($foreground, hint-text);
     }
 
-    .mat-select-content,
-    .mat-select-panel-done-animating {
-        background: map_get($background, card);
+    .mat-select-content, .mat-select-panel-done-animating {
+        background: mat-color($background, card);
     }
 
     .mat-select-value {
-        color: map_get($fuseForeground, text);
+        color: mat-color($foreground, text);
     }
 }
 
@@ -176,7 +162,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         background-color: $color !important;
     }
 
-    .mat-#{$colorName}#{$hue}-bg {
+    .md-#{$colorName}#{$hue}-bg {
         background-color: $color !important;
         color: $contrastColor !important;
 
@@ -187,11 +173,6 @@ $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 {
 
-    > mat-sidenav-container {
+    > md-sidenav-container {
         height: 100%;
     }
 }

src/app/core/scss/partials/_helpers.scss

@@ -1,59 +1,9 @@
-// ######################
-// POSITION HELPERS
-// ######################
-@each $breakpoint in map-keys($grid-breakpoints) {
-
-    @include media-breakpoint-up($breakpoint) {
-
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-        .position#{$infix}-relative {
-            position: relative;
-        }
-
-        .position#{$infix}-absolute {
-            position: absolute;
-        }
-
-        .position#{$infix}-static {
-            position: static;
-        }
-    }
-}
-
-// ####################################
-// ABSOLUTE POSITION ALIGNMENT HELPERS
-// ####################################
-@each $breakpoint in map-keys($grid-breakpoints) {
-
-    @include media-breakpoint-up($breakpoint) {
-
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-        .align#{$infix}-top {
-            top: 0;
-        }
-
-        .align#{$infix}-right {
-            right: 0;
-        }
-
-        .align#{$infix}-bottom {
-            bottom: 0;
-        }
-
-        .align#{$infix}-left {
-            left: 0;
-        }
-    }
-}
-
 // ######################
 // SIZE HELPERS
 // ######################
 @each $prop, $abbrev in (height: h, width: w) {
 
-    @for $index from 0 through 180 {
+    @for $index from 0 through 128 {
         $size: $index * 4;
         $length: #{$size}px;
 
@@ -78,6 +28,7 @@
 // ######################
 // SPACING HELPERS
 // ######################
+
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -132,45 +83,47 @@
             }
 
             @if ($abbrev == m) {
+                @for $index from 0 through 64 {
+                    $size: $index * 4;
+                    $length: #{$size}px;
 
-                // Some special margin utils for flex alignments
-                .m#{$infix}-auto {
-                    margin: auto !important;
-                }
+                    // Some special margin utils for flex alignments
+                    .m#{$infix}-auto {
+                        margin: auto !important;
+                    }
 
-                .mt#{$infix}-auto {
-                    margin-top: auto !important;
-                }
+                    .mt#{$infix}-auto {
+                        margin-top: auto !important;
+                    }
 
-                .mr#{$infix}-auto {
-                    margin-right: auto !important;
-                }
+                    .mr#{$infix}-auto {
+                        margin-right: auto !important;
+                    }
 
-                .mb#{$infix}-auto {
-                    margin-bottom: auto !important;
-                }
+                    .mb#{$infix}-auto {
+                        margin-bottom: auto !important;
+                    }
 
-                .ml#{$infix}-auto {
-                    margin-left: auto !important;
-                }
+                    .ml#{$infix}-auto {
+                        margin-left: auto !important;
+                    }
 
-                .mx#{$infix}-auto {
-                    margin-right: auto !important;
-                    margin-left: auto !important;
-                }
+                    .mx#{$infix}-auto {
+                        margin-right: auto !important;
+                        margin-left: auto !important;
+                    }
 
-                .my#{$infix}-auto {
-                    margin-top: auto !important;
-                    margin-bottom: auto !important;
+                    .my#{$infix}-auto {
+                        margin-top: auto !important;
+                        margin-bottom: auto !important;
+                    }
                 }
             }
         }
     }
 }
 
-// ######################
-// BORDER HELPERS
-// ######################
+// Border helpers
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 
 .border,
@@ -209,10 +162,3 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-top: $border-style;
     border-bottom: $border-style;
 }
-
-// ######################
-// BORDER RADIUS HELPERS
-// ######################
-.border-radius-100 {
-    border-radius: 100%;
-}

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

@@ -1,5 +1,5 @@
 i,
-mat-icon {
+md-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;
     }
-    mat-icon.status {
+    md-icon.status {
         position: absolute;
         top: 28px;
         left: 28px;
     }
 }
 
-mat-icon.status {
+md-icon.status {
     border-radius: 50%;
 
     &.online {
@@ -116,7 +116,7 @@ mat-icon.status {
         max-height: 48px;
         height: 48px;
 
-        mat-icon {
+        md-icon {
             margin: 0 16px 0 0;
         }
 
@@ -142,7 +142,7 @@ mat-icon.status {
         }
     }
 
-    mat-divider {
+    md-divider {
         margin: 8px 0;
     }
 }
@@ -196,7 +196,7 @@ mat-icon.status {
         background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
-        margin: 12px;
+        margin: 24px 24px 0 0;
         overflow: hidden;
 
         &.style-1 {
@@ -234,7 +234,7 @@ mat-icon.status {
                 }
             }
 
-            mat-divider {
+            md-divider {
                 margin: 16px 32px;
             }
 
@@ -411,6 +411,7 @@ table {
                     color: rgba(0, 0, 0, 0.54);
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                     white-space: nowrap;
+                    min-width: 120px;
 
                     &:first-child {
                         padding-left: 24px;

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

@@ -11,22 +11,6 @@
         white-space: nowrap;
     }
 
-    .nav-group {
-        display: block;
-
-        > .group-title {
-            position: relative;
-            display: flex;
-            align-items: center;
-            height: 48px;
-            font-weight: 500;
-            padding-left: 24px;
-            margin-top: 8px;
-            font-size: 12px;
-            white-space: nowrap;
-        }
-    }
-
     .nav-item {
 
         .nav-link {
@@ -47,20 +31,14 @@
             }
 
             .nav-link-badge {
-                display: flex;
-                align-items: center;
                 min-width: 20px;
                 height: 20px;
+                line-height: 20px;
                 padding: 0 7px;
                 font-size: 11px;
                 font-weight: 500;
                 border-radius: 20px;
                 transition: opacity 0.2s ease-in-out 0.1s;
-                margin-left: 8px;
-
-                + .collapse-arrow {
-                    margin-left: 8px;
-                }
             }
 
             &:hover {
@@ -110,9 +88,7 @@
 
                 > .nav-item {
 
-                    > .nav-link,
-                    &.nav-group > .group-title,
-                    &.nav-group > .group-items > .nav-item > .nav-link {
+                    > .nav-link {
                         padding-left: 56px;
                     }
 
@@ -120,9 +96,7 @@
 
                         > .nav-item {
 
-                            > .nav-link,
-                            &.nav-group > .group-title,
-                            &.nav-group > .group-items > .nav-item > .nav-link {
+                            > .nav-link {
                                 padding-left: 72px;
                             }
                         }
@@ -144,83 +118,4 @@
             }
         }
     }
-
-    > .nav-group {
-
-        > .group-items {
-
-            > .nav-collapse {
-                background: transparent;
-                transition: background 200ms ease-in-out;
-
-                &.open {
-                    background: rgba(0, 0, 0, 0.12);
-                }
-            }
-        }
-    }
-
-    &.vertical {
-
-        .nav-group {
-
-            .group-title {
-                text-transform: uppercase;
-            }
-        }
-    }
-
-    &.horizontal {
-        display: flex;
-        flex-direction: row;
-
-        .nav-item {
-
-            &.nav-collapse {
-                position: relative;
-
-                .children {
-                    display: none;
-                    position: absolute;
-                    top: 0;
-                    left: 100%;
-                    z-index: 999;
-                    min-width: 200px;
-                    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
-
-                    &.open {
-                        display: block;
-                    }
-
-                    .nav-link {
-                        padding-left: 24px !important;
-                    }
-                }
-            }
-        }
-
-        > .nav-item {
-
-            > .nav-link {
-                height: 56px;
-            }
-
-            &.nav-collapse {
-                position: relative;
-
-                > .nav-link {
-                    height: 56px;
-
-                    .collapse-arrow {
-                        display: none;
-                    }
-                }
-
-                > .children {
-                    top: 100%;
-                    left: 0;
-                }
-            }
-        }
-    }
 }

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 {
 
-                > mat-sidenav-container {
+                > md-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
 
-            > mat-sidenav-container {
+            > md-sidenav-container {
                 display: flex;
                 flex: 1;
                 background: none;
@@ -132,25 +132,27 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     min-width: 240px;
                     max-width: 240px;
                     height: auto;
-                    z-index: 4;
+                    z-index: 2;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
-                    &.mat-is-locked-open {
+                    &.md-is-locked-open {
+                        position: relative;
                         background: none;
                         box-shadow: none;
                     }
 
+                    &.md-stop-transition {
+
+                        ~ .mat-sidenav-content {
+                            transition: none;
+                        }
+                    }
+
                     .header {
                         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 {
@@ -159,8 +161,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     }
                 }
 
-                > .mat-sidenav-content,
-                > .mat-drawer-content {
+                > .mat-sidenav-content {
                     display: flex;
                     flex: 1;
                     height: auto;
@@ -181,12 +182,6 @@ $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 {
@@ -222,76 +217,20 @@ $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
-            > mat-sidenav-container {
+            > md-sidenav-container {
 
                 .sidenav {
 
-                    &.mat-is-locked-open {
+                    &.md-is-locked-open {
 
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
+                        ~ .mat-sidenav-content {
+                            margin-left: 0 !important;
 
                             .center {
                                 margin-left: 0;
@@ -306,15 +245,15 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.right-sidenav {
 
             // Sidenav
-            > mat-sidenav-container {
+            > md-sidenav-container {
 
                 .sidenav {
                     order: 999;
 
-                    &.mat-is-locked-open {
+                    &.md-is-locked-open {
 
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
+                        ~ .mat-sidenav-content {
+                            margin-right: 0 !important;
 
                             .center {
                                 margin-right: 0;
@@ -341,10 +280,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         }
 
         // Fullwidth
-        &.fullwidth {
-            overflow: auto;
-        }
-
         &.fullwidth,
         &.inner-sidenav {
             min-height: 100%;
@@ -363,13 +298,16 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > mat-sidenav-container {
+                > md-sidenav-container {
                     flex: 1 0 auto;
 
-                    > .mat-sidenav-content,
-                    > .mat-drawer-content {
+                    > .mat-sidenav-content {
                         flex: 1 0 auto;
                         max-height: none;
+
+                        > .center {
+                            overflow: hidden;
+                        }
                     }
                 }
             }
@@ -377,7 +315,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Inner Sidenav
             &.inner-sidenav {
 
-                > mat-sidenav-container {
+                > md-sidenav-container {
                     flex: 1;
 
                     .sidenav {
@@ -387,8 +325,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         }
                     }
 
-                    > .mat-sidenav-content,
-                    > .mat-drawer-content {
+                    > .mat-sidenav-content {
                         display: flex;
                         height: auto;
 
@@ -406,7 +343,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 }
             }
 
-            > mat-sidenav-container {
+            > md-sidenav-container {
                 display: flex;
                 flex-direction: column;
                 flex: 1;
@@ -421,7 +358,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     z-index: 51;
                     @include mat-elevation(7);
 
-                    &.mat-is-locked-open {
+                    &.md-is-locked-open {
                         width: 220px;
                         min-width: 220px;
                         max-width: 220px;
@@ -429,13 +366,19 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         background: transparent;
                     }
 
+                    &.md-stop-transition {
+
+                        ~ .mat-sidenav-content {
+                            transition: none;
+                        }
+                    }
+
                     .sidenav-content {
                         height: 100%;
                     }
                 }
 
-                > .mat-sidenav-content,
-                > .mat-drawer-content {
+                > .mat-sidenav-content {
                     display: flex;
                     flex: 1;
                     height: auto;
@@ -507,7 +450,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > mat-sidenav-container {
+                > md-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
@@ -516,6 +459,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.simple {
 
             &.fullwidth {
+                overflow: visible;
 
                 > .content {
                     flex: 1 0 auto;
@@ -525,12 +469,15 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > mat-sidenav-container {
+                > md-sidenav-container {
                     flex: 1 0 auto !important;
 
-                    > .mat-sidenav-content,
-                    > .mat-drawer-content {
+                    > .mat-sidenav-content {
                         flex: 1 0 auto;
+
+                        > .center {
+                            overflow: hidden;
+                        }
                     }
                 }
             }
@@ -550,10 +497,9 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > mat-sidenav-container {
+                > md-sidenav-container {
 
-                    > .mat-sidenav-content,
-                    > .mat-drawer-content {
+                    > .mat-sidenav-content {
 
                         .center {
                             margin: 0 16px;

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

@@ -1,65 +0,0 @@
-/*----------------------------------------------------------------*/
-/*  Print
-/*----------------------------------------------------------------*/
-
-@media all {
-
-    /* Never show page breaks in normal view */
-    .page-break-after,
-    .page-break-before {
-        display: none;
-    }
-
-}
-
-@media print {
-
-    /* html and body tweaks */
-    html, body {
-        height: auto !important;
-        overflow: initial !important;
-    }
-
-    /* Page breaks */
-    .page-break-after {
-        display: block;
-        page-break-after: always;
-        position: relative;
-    }
-
-    .page-break-before {
-        display: block;
-        page-break-before: always;
-        position: relative;
-    }
-
-    /* General styles */
-    fuse-root {
-
-        fuse-navbar-vertical,
-        fuse-navbar-horizontal,
-        fuse-toolbar,
-        fuse-footer,
-        fuse-quick-panel,
-        fuse-theme-options,
-        .ps > .ps__rail-x,
-        .ps > .ps__rail-y {
-            display: none !important;
-        }
-
-        .ps {
-            overflow: visible !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(mat-input-container) {
+*:not(md-input-container) {
 
     > input {
         border: none;
@@ -55,7 +55,7 @@ html, body {
     }
 }
 
-*:not(mat-input-container) {
+*:not(md-input-container) {
 
     > input[type="button"],
     > button,

src/app/core/scss/partials/_scrollbars.scss

@@ -1,23 +1,20 @@
-body:not(.is-mobile) {
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background-color: rgba(0, 0, 0, 0);
+}
 
-    ::-webkit-scrollbar {
-        width: 12px;
-        height: 12px;
-        background-color: rgba(0, 0, 0, 0);
-    }
+::-webkit-scrollbar:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+}
 
-    ::-webkit-scrollbar:hover {
-        background-color: rgba(0, 0, 0, 0.12);
-    }
+::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
+    border-radius: 24px;
+}
 
-    ::-webkit-scrollbar-thumb {
-        border: 2px solid transparent;
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-        border-radius: 24px;
-    }
-
-    ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 24px;
-    }
+::-webkit-scrollbar-thumb:active {
+    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
+    border-radius: 24px;
 }

src/app/core/scss/partials/_typography.scss

@@ -229,22 +229,6 @@ strong {
     }
 }
 
-.line-height-1 {
-    line-height: 1;
-}
-
-.line-height-1\.25 {
-    line-height: 1.25;
-}
-
-.line-height-1\.50 {
-    line-height: 1.5;
-}
-
-.line-height-1\.75 {
-    line-height: 1.75;
-}
-
 // Boxed text
 .text-boxed {
     border-radius: 2px;

src/app/core/scss/partials/plugins/_highlight.scss

@@ -0,0 +1,124 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+hljs,
+[hljs] {
+    display: block;
+    overflow-x: auto;
+    //    padding: 0.5em;
+    color: #333;
+    background: #F8F8F8;
+    -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.diff .hljs-header {
+    color: #998;
+    font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+    color: #333;
+    font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+    color: #008080;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-doctag,
+.tex .hljs-formula {
+    color: #D14;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+    color: #900;
+    font-weight: bold;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+    font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+    color: #458;
+    font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rule .hljs-property,
+.django .hljs-tag .hljs-keyword {
+    color: #000080;
+    font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body,
+.hljs-name {
+    color: #008080;
+}
+
+.hljs-regexp {
+    color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+    color: #990073;
+}
+
+.hljs-built_in {
+    color: #0086B3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+    color: #999;
+    font-weight: bold;
+}
+
+.hljs-deletion {
+    background: #FDD;
+}
+
+.hljs-addition {
+    background: #DFD;
+}
+
+.diff .hljs-change {
+    background: #0086B3;
+}
+
+.hljs-chunk {
+    color: #AAA;
+}

src/app/core/scss/partials/plugins/_ng-pick-datetime.scss

@@ -1,360 +0,0 @@
-/*@font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?81091010');
-  src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
-  url('../font/fontello.woff2?81091010') format('woff2'),
-  url('../font/fontello.woff?81091010') format('woff'),
-  url('../font/fontello.ttf?81091010') format('truetype'),
-  url('../font/fontello.svg?81091010#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}*/
-
-owl-date-time {
-
-    [class^="icon-"]:before, [class*=" icon-"]:before {
-        font-family: "Material Icons";
-        font-style: normal;
-        font-weight: normal;
-        speak: none;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        /* For safety - reset parent styles, that can break glyph codes*/
-        font-variant: normal;
-        text-transform: none;
-
-        /* Font smoothing. That was taken from TWBS */
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-
-    .icon-cancel:before {
-        content: 'close';
-    }
-
-    .icon-up-open:before {
-        content: 'keyboard_arrow_up';
-    }
-
-    .icon-down-open:before {
-        content: 'keyboard_arrow_down';
-    }
-
-    .icon-left-open:before {
-        content: 'chevron_left';
-    }
-
-    .icon-right-open:before {
-        content: 'chevron_right';
-    }
-
-    $white: #FFFFFF;
-    $black: #000000;
-    $grey: #DDDDDD;
-    $blue: #0070BA;
-
-    .owl-widget,
-    .owl-widget * {
-        box-sizing: border-box;
-    }
-
-    .owl-widget {
-        font-size: 1em;
-    }
-
-    .owl-state-focus {
-
-    }
-
-    .owl-corner-all {
-        border-radius: 2px;
-    }
-
-    .owl-corner-top {
-        border-top-left-radius: 2px;
-        border-top-right-radius: 2px;
-    }
-
-    .owl-state-default {
-        background: #FFFFFF;
-        color: rgba(0, 0, 0, 0.87);
-    }
-
-    .owl-dateTime-inputWrapper {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
-
-        .owl-dateTime-input {
-            background: none !important;
-            padding: 0 !important;
-            cursor: pointer;
-
-            .owl-inputtext {
-                margin: 0;
-                padding: 8px;
-                background: none !important;
-                color: rgba(0, 0, 0, 0.87);
-            }
-        }
-
-        .owl-dateTime-cancel {
-            position: relative !important;
-            right: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            font-size: 16px !important;
-            width: 16px !important;
-            height: 16px !important;
-            min-width: 16px !important;
-            min-height: 16px !important;
-            line-height: 16px !important;
-            color: rgba(0, 0, 0, 0.54) !important;
-        }
-    }
-
-    .owl-dateTime {
-        position: relative;
-        width: 140px;
-
-        &.owl-dateTime-inline {
-            width: auto;
-
-            .owl-dateTime-dialog {
-                position: relative;
-                z-index: auto;
-            }
-        }
-    }
-
-    .owl-dateTime-dialog {
-        width: 256px;
-        user-select: none;
-        z-index: 99999;
-        top: 24px !important;
-        right: 0 !important;
-        left: auto !important;
-        @include mat-elevation(4);
-    }
-
-    .owl-dateTime-dialogHeader {
-        height: 2.5em;
-        padding: .25em;
-        background-color: rgba(0, 0, 0, .1);
-        overflow-y: auto;
-    }
-
-    .owl-calendar-wrapper {
-        padding: 16px !important;
-    }
-
-    .owl-calendar-control {
-
-        .owl-calendar-controlNav {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .nav-prev,
-            .nav-next {
-                display: flex;
-
-                &:before {
-                    font-family: "Material Icons";
-                    position: relative !important;
-                    right: 0 !important;
-                    top: 0 !important;
-                    transform: none !important;
-                    font-size: 20px !important;
-                    width: 20px !important;
-                    height: 20px !important;
-                    min-width: 20px !important;
-                    min-height: 20px !important;
-                    line-height: 20px !important;
-                    content: "chevron_left";
-                    color: rgba(0, 0, 0, 0.54);
-                }
-            }
-
-            .nav-next:before {
-                content: "chevron_right";
-            }
-        }
-
-        .owl-calendar-controlContent {
-
-            .month-control,
-            .year-control {
-                font-size: 14px;
-                font-weight: 500;
-                cursor: pointer;
-            }
-
-            .month-control {
-                margin-right: 8px;
-            }
-
-            .year-control {
-            }
-        }
-    }
-
-    .owl-calendar {
-
-        table {
-            border-spacing: 0 !important;
-        }
-
-        tbody td {
-
-            &.owl-calendar-selected {
-                background-color: $blue;
-                color: $white;
-            }
-
-            &.owl-calendar-invalid {
-                color: #ACACAC;
-            }
-
-            &.owl-calendar-outFocus {
-                color: $grey;
-            }
-
-            &.owl-calendar-hidden {
-                visibility: hidden;
-            }
-
-            &:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
-                background-color: lighten($blue, 50%);
-                color: $black;
-            }
-        }
-    }
-
-    .owl-years,
-    .owl-months {
-
-        td.owl-year,
-        td.owl-month {
-            padding: 0;
-            font-size: 16px;
-            width: 72px;
-            height: 48px;
-            line-height: 48px;
-            cursor: pointer;
-        }
-    }
-
-    .owl-calendar-yearArrow {
-        width: 24px !important;
-        height: 24px !important;
-
-        &.left {
-            left: -16px !important;
-        }
-
-        &.right {
-            right: -16px !important;
-        }
-    }
-
-    .owl-weekdays {
-
-        th.owl-weekday {
-            height: 32px;
-            line-height: 32px;
-            text-align: center;
-            font-size: 12px;
-            padding: 0;
-            color: rgba(0, 0, 0, 0.37);
-        }
-    }
-
-    .owl-days {
-
-        td.owl-day {
-            height: 32px;
-            width: 32px;
-            line-height: 32px;
-            cursor: pointer;
-            border-radius: 100%;
-            padding: 0;
-
-            &.owl-day-today:before {
-                content: '';
-                display: block;
-                position: absolute;
-                right: 2px;
-                top: 2px;
-                border-top: .5em solid lighten($blue, 20%);
-                border-left: .5em solid transparent;
-            }
-        }
-    }
-
-    .owl-timer-wrapper {
-        height: 88px;
-        padding: 8px !important;
-        background-color: rgba(0, 0, 0, 0.06);
-
-        .owl-timer-input {
-            background: none;
-            width: 100% !important;
-            text-align: center;
-        }
-
-        .owl-timer-text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 40%;
-            font-size: 20px;
-        }
-
-        .owl-meridian-btn {
-            font-size: .8em;
-            color: $blue;
-            background-image: none;
-            background-color: transparent;
-            border-color: $blue;
-
-            &:hover {
-                color: $white;
-                background-color: $blue;
-                border-color: $blue;
-            }
-        }
-    }
-
-    .owl-timer-divider {
-        display: inline-block;
-        position: absolute;
-        width: 8px;
-        height: 100%;
-        left: -2px;
-
-        .owl-timer-dot {
-            display: block;
-            background: rgba(0, 0, 0, 0.37);
-            width: 3px;
-            height: 3px;
-            position: absolute;
-            left: 50%;
-            border-radius: 100%;
-            transform: translateX(-50%);
-
-            &.dot-top {
-                top: 40%;
-            }
-
-            &.dot-bottom {
-                bottom: 40%;
-            }
-        }
-    }
-}

src/app/core/scss/partials/plugins/_ngx-color-picker.scss

@@ -3,21 +3,20 @@
 .color-picker {
     height: auto !important;
     border: none !important;
-
     @include mat-elevation(4);
 
     .preset-area {
-        padding: 0 0 16px 16px !important;
+        //padding: 4px 15px;
+        padding: 0 0 12px 12px !important;
         height: 140px;
         overflow-y: auto;
         overflow-x: hidden;
-
         > hr {
             display: none;
         }
-
         .preset-label {
             display: none;
+
         }
 
         .preset-color {
@@ -26,8 +25,7 @@
             margin: 0 !important;
             border: none !important;
             border-radius: 0 !important;
-
-            &:nth-child(14n+1) {
+            &:nth-child(14n+3) {
                 clear: both;
             }
         }

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

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

src/app/core/scss/partials/plugins/_perfect-scrollbar.scss

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

src/app/core/scss/partials/plugins/_plugins.scss

@@ -1,4 +1,4 @@
-@import "prism";
+@import "highlight";
 @import "perfect-scrollbar";
 @import "ngx-datatable";
 @import "ngx-color-picker";

src/app/core/scss/partials/plugins/_prism.scss

@@ -1,269 +0,0 @@
-// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
-
-$base00: #263238;
-$base01: #2C393F;
-$base02: #62727A;
-$base03: #707880;
-$base04: #C9CCD3;
-$base05: #CDD3DE;
-$base06: #D5DBE5;
-$base07: #FFFFFF;
-$base08: #EC5F67;
-$base09: #EA9560;
-$base0A: #FFCC00;
-$base0B: #8BD649;
-$base0C: #80CBC4;
-$base0D: #89DDFF;
-$base0E: #82AAFF;
-$base0F: #EC5F67;
-
-$red: $base08;
-$orange: $base09;
-$yellow: $base0A;
-$green: $base0B;
-$cyan: $base0C;
-$blue: $base0D;
-$violet: $base0E;
-$magenta: $base0F;
-
-$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
-$code-font-size: 14px;
-$code-line-height: 1.6;
-$code-background: $base00;
-$code-color: $base05;
-$code-color-fade: $base05;
-// $code-text-shadow: none; 
-$code-color-comment: $base02;
-$code-color-keyword: $base0B;
-$code-color-value: $base0C;
-$code-color-attr-name: $base09;
-$code-color-string: $base0C;
-$code-color-name: $base0A;
-$code-color-number: $base09;
-$code-color-variable: $base0D;
-$code-color-selector: $base0E;
-$code-color-property: $base0A;
-$code-color-important: $base08;
-$code-color-tag: $base0D;
-$code-color-atrule: $base0C;
-
-// @import "../partials/prism"; 
-/**
- * Prism base code highlighter theme using Sass 
- *
- * @author @MoOx
- * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
- * slightly adapted by me, Bram de Haan
- */
-
-// prism selector
-$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
-$code-selector-block: "pre[class*=\"language-\"]";
-$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
-
-// generic stuff
-$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
-$code-font-size: 14px !default;
-$code-line-height: 1.6 !default;
-
-$code-tab-size: 4 !default;
-$code-hyphens: none !default;
-
-$code-block-padding: 12px !default;
-$code-inline-padding: 2px 6px !default;
-$code-border-radius: 0 !default;
-
-$code-border: none !default;
-$code-background: #2A2A2A !default;
-$code-color: #FFF !default;
-$code-color-fade: #BEBEC5 !default;
-// $code-text-shadow: 0 1px 0 #000 !default;
-$code-box-shadow: none !default;
-$code-color-property: #B58900 !default;
-$code-color-important: #CB4B16 !default;
-$code-color-tag: #268BD2 !default;
-$code-color-atrule: #2AA198 !default;
-$code-color-attr-name: #B65611 !default;
-
-// $code-linenums-padding:		7px !default;
-// $code-linenums-width: 			40px !default;
-// $code-linenums-background:		#444 !default;
-// $code-linenums-border-color:	#555 !default;
-// $code-linenums-border-width:	1px !default;
-
-@if $code-selector != null {
-    #{$code-selector} {
-        -moz-tab-size: $code-tab-size;
-        -o-tab-size: $code-tab-size;
-        tab-size: $code-tab-size;
-
-        -webkit-hyphens: $code-hyphens;
-        -moz-hyphens: $code-hyphens;
-        -ms-hyphens: $code-hyphens;
-        hyphens: $code-hyphens;
-
-        // whitespace management
-        white-space: pre; // fallback
-        white-space: pre-wrap;
-        word-break: break-all;
-        word-wrap: break-word;
-
-        font-family: $code-font-family;
-        font-size: $code-font-size;
-        line-height: $code-line-height;
-
-        color: $code-color;
-        // text-shadow: $code-text-shadow;
-        background: $code-background;
-    }
-}
-
-%code-background {
-    border-radius: $code-border-radius;
-    border: $code-border;
-    box-shadow: $code-box-shadow;
-}
-
-@if $code-selector-block != null {
-    #{$code-selector-block} {
-        @extend %code-background;
-        padding: $code-block-padding;
-    }
-}
-
-@if $code-selector-inline != null {
-    #{$code-selector-inline} {
-        @extend %code-background;
-        padding: $code-inline-padding;
-    }
-}
-
-// pre[class*="language-"],
-// :not(pre) > code[class*="language-"] {
-// 	background: $code-background;
-// }
-
-// prism tokens
-// 
-$code-color-comment: null !default;
-$code-color-keyword: null !default;
-$code-color-value: null !default;
-$code-color-string: null !default;
-$code-color-name: null !default;
-$code-color-number: null !default;
-$code-color-variable: null !default;
-$code-color-selector: null !default;
-$code-color-punctuation: $code-color-fade !default;
-
-#{$code-selector} {
-    .namespace {
-        opacity: .7;
-    }
-
-    .token {
-        &.comment,
-        &.prolog,
-        &.doctype,
-        &.cdata {
-            color: $code-color-comment;
-        }
-
-        &.null,
-        &.operator,
-        &.boolean,
-        &.number {
-            color: $code-color-number;
-        }
-
-        &.string {
-            color: $code-color-string;
-        }
-        &.attr-name {
-            color: $code-color-attr-name;
-        }
-
-        &.entity,
-        &.url,
-        .language-css &.string,
-        .style &.string {
-            color: $code-color-string;
-        }
-
-        &.selector {
-            color: $code-color-selector;
-        }
-
-        &.attr-value,
-        &.keyword,
-        &.control,
-        &.directive,
-        &.unit {
-            color: $code-color-keyword;
-        }
-        &.important {
-            color: $code-color-important;
-        }
-        &.atrule {
-            color: $code-color-atrule;
-        }
-
-        &.regex,
-        &.statement {
-            color: $code-color-value;
-        }
-
-        &.placeholder,
-        &.variable {
-            color: $code-color-variable;
-        }
-
-        &.property,
-        &.tag {
-            // font-style: italic;
-        }
-
-        &.property {
-            color: $code-color-property;
-        }
-        &.tag {
-            color: $code-color-tag;
-        }
-
-        &.important,
-        &.statement {
-            font-weight: bold;
-        }
-
-        // todo ?
-        // &.mixin
-        // &.gradient
-        // &.abslength
-        // &.easing
-        // &.time
-        // &.angle
-        // &.fontfamily
-
-        // ruby/vim https://github.com/LeaVerou/prism/pull/18
-        // &.inst-var
-        // &.builtin
-        // &.const
-        // &.symbol
-        //
-        // php https://github.com/LeaVerou/prism/pull/20
-        // &.deliminator
-        // &.function
-
-        &.punctuation {
-            color: $code-color-punctuation;
-        }
-
-        &.entity {
-            cursor: help;
-        }
-
-        // for dev :)
-        &.debug {
-            color: red
-        }
-    }
-}

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { NavigationStart, Router } from '@angular/router';
-import { Platform } from '@angular/cdk/platform';
+import { Platform } from '@angular/cdk';
 
 @Injectable()
 export class FuseConfigService
@@ -12,7 +12,6 @@ export class FuseConfigService
 
     /**
      * @param router
-     * @param platform
      */
     constructor(
         private router: Router,
@@ -22,19 +21,17 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation      : 'left', // 'right', 'left', 'top', 'none'
-                navigationFolded: false, // true, false
-                toolbar         : 'below', // 'above', 'below', 'none'
-                footer          : 'below', // 'above', 'below', 'none'
-                mode            : 'fullwidth' // 'boxed', 'fullwidth'
+                navigation: 'left', // 'right', 'left', 'top', none
+                toolbar   : 'below', // 'above', 'below', none
+                footer    : 'none' // 'above', 'below', none
             },
             colorClasses    : {
-                toolbar: 'mat-white-500-bg',
-                navbar : 'mat-fuse-dark-700-bg',
-                footer : 'mat-fuse-dark-900-bg'
+                toolbar: 'md-white-500-bg',
+                navbar : 'md-fuse-dark-500-bg',
+                footer : 'md-fuse-dark-800-bg'
             },
             customScrollbars: true,
-            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
+            routerAnimation : 'fadeIn'
         };
 
         /**
@@ -45,7 +42,6 @@ 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
@@ -60,6 +56,7 @@ export class FuseConfigService
 
         // Create the behavior subject
         this.onSettingsChanged = new BehaviorSubject(this.settings);
+
     }
 
     /**
@@ -68,10 +65,7 @@ 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

@@ -1,27 +0,0 @@
-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/fuse-fake-db/academy.ts

@@ -1,773 +0,0 @@
-export class AcademyFakeDb
-{
-    public static courses = [
-        {
-            'id'      : '15459251a6d6b397565',
-            'title'   : 'Basics of Angular',
-            'slug'    : 'basics-of-angular',
-            'category': 'web',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154588a0864d2881124',
-            'title'   : 'Basics of TypeScript',
-            'slug'    : 'basics-of-typeScript',
-            'category': 'web',
-            'length'  : 60,
-            'updated' : 'Nov 01, 2017'
-        },
-        {
-            'id'      : '15453ba60d3baa5daaf',
-            'title'   : 'Android N: Quick Settings',
-            'slug'    : 'android-n-quick-settings',
-            'category': 'android',
-            'length'  : 120,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '15453a06c08fb021776',
-            'title'   : 'Keep Sensitive Data Safe and Private',
-            'slug'    : 'keep-sensitive-data-safe-and-private',
-            'category': 'android',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '15427f4c1b7f3953234',
-            'title'   : 'Building a gRPC Service with Java',
-            'slug'    : 'building-a-grpc-service-with-java',
-            'category': 'cloud',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1542d75d929a603125',
-            'title'   : 'Build a PWA Using Workbox',
-            'slug'    : 'build-a-pwa-using-workbox',
-            'category': 'web',
-            'length'  : 120,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1543ee3a5b43e0f9f45',
-            'title'   : 'Build an App for the Google Assistant with Firebase and Dialogflow',
-            'slug'    : 'build-an-app-for-the-google-assistant-with-firebase-and-dialogflow',
-            'category': 'firebase',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1543cc4515df3146112',
-            'title'   : 'Cloud Functions for Firebase',
-            'slug'    : 'cloud-functions-for-firebase',
-            'category': 'firebase',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154398a4770d7aaf9a2',
-            'title'   : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
-            'slug'    : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
-            'category': 'cloud',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '15438351f87dcd68567',
-            'title'   : 'Building Beautiful UIs with Flutter',
-            'your'    : 'building-beautiful-uis-with-flutter',
-            'category': 'web',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1544e43dcdae6ebf876',
-            'title'   : 'Cloud Firestore',
-            'slug'    : 'cloud-firestore',
-            'category': 'firebase',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1541ca7af66da284177',
-            'title'   : 'Customize Network Topology with Subnetworks',
-            'slug'    : 'customize-network-topology-with-subnetworks',
-            'category': 'web',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154297167e781781745',
-            'title'   : 'Looking at Campaign Finance with BigQuery',
-            'slug'    : 'looking-at-campaign-finance-with-bigquery',
-            'category': 'cloud',
-            'length'  : 60,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154537435d5b32bf11a',
-            'title'   : 'Firebase Android',
-            'slug'    : 'firebase-android',
-            'category': 'android',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154204e45a59b168453',
-            'title'   : 'Simulating a Thread Network Using OpenThread',
-            'slug'    : 'simulating-a-thread-network-using-openthread',
-            'category': 'web',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1541dd1e05dfc439216',
-            'title'   : 'Your First Progressive Web App',
-            'slug'    : 'your-first-progressive-web-app',
-            'category': 'web',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1532dfc67e704e48515',
-            'title'   : 'Launch Cloud Datalab',
-            'slug'    : 'launch-cloud-datalab',
-            'category': 'cloud',
-            'length'  : 60,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1542e43dfaae6ebf226',
-            'title'   : 'Personalize Your iOS App with Firebase User Management',
-            'slug'    : 'personalize-your-ios-app-with-firebase-user-management',
-            'category': 'firebase',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        }
-    ];
-
-    public static categories = [
-        {
-            'id'   : 0,
-            'value': 'web',
-            'label': 'Web'
-        },
-        {
-            'id'   : 1,
-            'value': 'firebase',
-            'label': 'Firebase'
-        },
-        {
-            'id'   : 2,
-            'value': 'cloud',
-            'label': 'Cloud'
-        },
-        {
-            'id'   : 3,
-            'value': 'android',
-            'label': 'Android'
-        }
-    ];
-
-    private static demoSteps = [
-        {
-            'title'  : 'Introduction',
-            'content': '<h1>Step 1 - Introduction</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Get the sample code',
-            'content': '<h1>Step 2 - Get the sample code</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Create a Firebase project and Set up your app',
-            'content': '<h1>Step 3 - Create a Firebase project and Set up your app</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Install the Firebase Command Line Interface',
-            'content': '<h1>Step 4 - Install the Firebase Command Line Interface</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Deploy and run the web app',
-            'content': '<h1>Step 5 - Deploy and run the web app</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'The Functions Directory',
-            'content': '<h1>Step 6 - The Functions Directory</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Import the Cloud Functions and Firebase Admin modules',
-            'content': '<h1>Step 7 - Import the Cloud Functions and Firebase Admin modules</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Welcome New Users',
-            'content': '<h1>Step 8 - Welcome New Users</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Images moderation',
-            'content': '<h1>Step 9 - Images moderation</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'New Message Notifications',
-            'content': '<h1>Step 10 - New Message Notifications</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Congratulations!',
-            'content': '<h1>Step 11 - Congratulations!</h1>' +
-            '<br>' +
-            'You\'ve built a full-fidelity, offline-capable progressive web app by leveraging the power of reusable Web Components and Firebase. Why bother with a native app when you know how to do all that?!'
-        }
-    ];
-
-    public static course = [
-        {
-            'id'         : '15459251a6d6b397565',
-            'title'      : 'Basics of Angular',
-            'slug'       : 'basics-of-angular',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154588a0864d2881124',
-            'title'      : 'Basics of TypeScript',
-            'slug'       : 'basics-of-typeScript',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 60,
-            'totalSteps' : 11,
-            'updated'    : 'Nov 01, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15453ba60d3baa5daaf',
-            'title'      : 'Android N: Quick Settings',
-            'slug'       : 'android-n-quick-settings',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'android',
-            'length'     : 120,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15453a06c08fb021776',
-            'title'      : 'Keep Sensitive Data Safe and Private',
-            'slug'       : 'keep-sensitive-data-safe-and-private',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'android',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15427f4c1b7f3953234',
-            'title'      : 'Building a gRPC Service with Java',
-            'slug'       : 'building-a-grpc-service-with-java',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1542d75d929a603125',
-            'title'      : 'Build a PWA Using Workbox',
-            'slug'       : 'build-a-pwa-using-workbox',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 120,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1543ee3a5b43e0f9f45',
-            'title'      : 'Build an App for the Google Assistant with Firebase and Dialogflow',
-            'slug'       : 'build-an-app-for-the-google-assistant-with-firebase-and-dialogflow',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1543cc4515df3146112',
-            'title'      : 'Cloud Functions for Firebase',
-            'slug'       : 'cloud-functions-for-firebase',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154398a4770d7aaf9a2',
-            'title'      : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
-            'slug'       : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15438351f87dcd68567',
-            'title'      : 'Building Beautiful UIs with Flutter',
-            'your'       : 'building-beautiful-uis-with-flutter',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1544e43dcdae6ebf876',
-            'title'      : 'Cloud Firestore',
-            'slug'       : 'cloud-firestore',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1541ca7af66da284177',
-            'title'      : 'Customize Network Topology with Subnetworks',
-            'slug'       : 'customize-network-topology-with-subnetworks',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154297167e781781745',
-            'title'      : 'Looking at Campaign Finance with BigQuery',
-            'slug'       : 'looking-at-campaign-finance-with-bigquery',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 60,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154537435d5b32bf11a',
-            'title'      : 'Firebase Android',
-            'slug'       : 'firebase-android',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'android',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154204e45a59b168453',
-            'title'      : 'Simulating a Thread Network Using OpenThread',
-            'slug'       : 'simulating-a-thread-network-using-openthread',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1541dd1e05dfc439216',
-            'title'      : 'Your First Progressive Web App',
-            'slug'       : 'your-first-progressive-web-app',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1532dfc67e704e48515',
-            'title'      : 'Launch Cloud Datalab',
-            'slug'       : 'launch-cloud-datalab',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 60,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1542e43dfaae6ebf226',
-            'title'      : 'Personalize Your iOS App with Firebase User Management',
-            'slug'       : 'personalize-your-ios-app-with-firebase-user-management',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        }
-    ];
-
-}

src/app/fuse-fake-db/calendar.ts

@@ -1,97 +0,0 @@
-import {
-    startOfDay,
-    endOfDay,
-    subDays,
-    addDays,
-    endOfMonth,
-    isSameDay,
-    isSameMonth,
-    addHours
-} from 'date-fns';
-
-export class CalendarFakeDb
-{
-
-    public static data = [
-        {
-            id  : 'events',
-            data: [
-                {
-                    start    : subDays(startOfDay(new Date()), 1),
-                    end      : addDays(new Date(), 1),
-                    title    : 'A 3 day event',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#ad2121',
-                        secondary: '#FAE3E3'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                },
-                {
-                    start    : startOfDay(new Date()),
-                    title    : 'An event with no end date',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#e3bc08',
-                        secondary: '#FDF1BA'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                },
-                {
-                    start    : subDays(endOfMonth(new Date()), 3),
-                    end      : addDays(endOfMonth(new Date()), 3),
-                    title    : 'A long event that spans 2 months',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#1e90ff',
-                        secondary: '#D1E8FF'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                },
-                {
-                    start    : addHours(startOfDay(new Date()), 2),
-                    end      : new Date(),
-                    title    : 'A draggable and resizable event',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#e3bc08',
-                        secondary: '#FDF1BA'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                }
-            ]
-        }
-    ];
-}

src/app/fuse-fake-db/chat.ts

@@ -1,325 +0,0 @@
-export class ChatFakeDb
-{
-    public static contacts = [
-        {
-            'id'    : '5725a680b3249760ea21de52',
-            'name'  : 'Alice Freeman',
-            'avatar': 'assets/images/avatars/alice.jpg',
-            'status': 'online',
-            'mood'  : 'I never sign anything until I pretend to read it first..'
-        },
-        {
-            'id'    : '5725a680606588342058356d',
-            'name'  : 'Arnold',
-            'avatar': 'assets/images/avatars/Arnold.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Looks like Andrew Jackson\'s been tossed to the back of the bus.'
-        },
-        {
-            'id'    : '5725a68009e20d0a9e9acf2a',
-            'name'  : 'Barrera',
-            'avatar': 'assets/images/avatars/Barrera.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Love is going to bed early.Marriage is going to sleep early.',
-            'unread': null
-        },
-        {
-            'id'    : '5725a6809fdd915739187ed5',
-            'name'  : 'Blair',
-            'avatar': 'assets/images/avatars/Blair.jpg',
-            'status': 'offline',
-            'mood'  : 'I would be unstoppable. If i could just get started.',
-            'unread': 3
-        },
-        {
-            'id'    : '5725a68007920cf75051da64',
-            'name'  : 'Boyle',
-            'avatar': 'assets/images/avatars/Boyle.jpg',
-            'status': 'offline',
-            'mood'  : '\'GOOD MORNING COFFEE\'....Meet your maker!!!!'
-        },
-        {
-            'id'    : '5725a68031fdbb1db2c1af47',
-            'name'  : 'Christy',
-            'avatar': 'assets/images/avatars/Christy.jpg',
-            'status': 'offline',
-            'mood'  : 'We always hold hands. If I let go, she shops.'
-        },
-        {
-            'id'    : '5725a680bc670af746c435e2',
-            'name'  : 'Copeland',
-            'avatar': 'assets/images/avatars/Copeland.jpg',
-            'status': 'online',
-            'mood'  : 'I get enough exercise just pushing my luck.'
-        },
-        {
-            'id'    : '5725a680e7eb988a58ddf303',
-            'name'  : 'Estes',
-            'avatar': 'assets/images/avatars/Estes.jpg',
-            'status': 'away',
-            'mood'  : 'What comes after the man bun hairstyle? The he-hive!'
-        },
-        {
-            'id'    : '5725a680dcb077889f758961',
-            'name'  : 'Harper',
-            'avatar': 'assets/images/avatars/Harper.jpg',
-            'status': 'offline',
-            'mood'  : 'Always try to be modest and be proud of it!'
-        },
-        {
-            'id'    : '5725a6806acf030f9341e925',
-            'name'  : 'Helen',
-            'avatar': 'assets/images/avatars/Helen.jpg',
-            'status': 'away',
-            'mood'  : 'Why are there stitch marks on zombies? Who\'s giving them medical attention?'
-        },
-        {
-            'id'    : '5725a680ae1ae9a3c960d487',
-            'name'  : 'Henderson',
-            'avatar': 'assets/images/avatars/Henderson.jpg',
-            'status': 'offline',
-            'mood'  : 'I can\'t decide if people who wear pajamas in public have given up on life or are living it to the fullest.'
-        },
-        {
-            'id'    : '5725a680b8d240c011dd224b',
-            'name'  : 'Josefina',
-            'avatar': 'assets/images/avatars/Josefina.jpg',
-            'status': 'online',
-            'mood'  : 'The fastest way to being happy is to make other people happy. You go first'
-        },
-        {
-            'id'    : '5725a68034cb3968e1f79eac',
-            'name'  : 'Katina',
-            'avatar': 'assets/images/avatars/Katina.jpg',
-            'status': 'away',
-            'mood'  : 'If I was a rat,,, I wouldn\'t give anyone my ass.'
-        },
-        {
-            'id'    : '5725a6801146cce777df2a08',
-            'name'  : 'Lily',
-            'avatar': 'assets/images/avatars/Lily.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'A zip line but from the sofa to the fridge'
-        },
-        {
-            'id'    : '5725a6808a178bfd034d6ecf',
-            'name'  : 'Mai',
-            'avatar': 'assets/images/avatars/Mai.jpg',
-            'status': 'away',
-            'mood'  : 'If a girl tells you she has a nipple ring, the only correct response is \'I don\'t believe you.\''
-        },
-        {
-            'id'    : '5725a680653c265f5c79b5a9',
-            'name'  : 'Nancy',
-            'avatar': 'assets/images/avatars/Nancy.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Prison counts as a gated community, right?'
-        },
-        {
-            'id'    : '5725a680bbcec3cc32a8488a',
-            'name'  : 'Nora',
-            'avatar': 'assets/images/avatars/Nora.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'I never date left handed women. Righty tighty, lefty loosey.'
-        },
-        {
-            'id'    : '5725a6803d87f1b77e17b62b',
-            'name'  : 'Odessa',
-            'avatar': 'assets/images/avatars/Odessa.jpg',
-            'status': 'away',
-            'mood'  : 'A day without sunshine is like, night.'
-        },
-        {
-            'id'    : '5725a680e87cb319bd9bd673',
-            'name'  : 'Reyna',
-            'avatar': 'assets/images/avatars/Reyna.jpg',
-            'status': 'offline',
-            'mood'  : 'I can\'t wait for summer in Canada...'
-        },
-        {
-            'id'    : '5725a6802d10e277a0f35775',
-            'name'  : 'Shauna',
-            'avatar': 'assets/images/avatars/Shauna.jpg',
-            'status': 'online',
-            'mood'  : 'My take home pay doesn’t ven take me home.',
-            'unread': null
-        },
-        {
-            'id'    : '5725a680aef1e5cf26dd3d1f',
-            'name'  : 'Shepard',
-            'avatar': 'assets/images/avatars/Shepard.jpg',
-            'status': 'online',
-            'mood'  : 'I don\'t speak Spanish, but I\'m pretty sure \'Dora\' means \'annoying\''
-        },
-        {
-            'id'    : '5725a680cd7efa56a45aea5d',
-            'name'  : 'Tillman',
-            'avatar': 'assets/images/avatars/Tillman.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : ''
-        },
-        {
-            'id'    : '5725a680fb65c91a82cb35e2',
-            'name'  : 'Trevino',
-            'avatar': 'assets/images/avatars/Trevino.jpg',
-            'status': 'away',
-            'mood'  : 'Apparently, a rat and a plastic tube does not count as a DIY abortion kit.'
-        },
-        {
-            'id'    : '5725a68018c663044be49cbf',
-            'name'  : 'Tyson',
-            'avatar': 'assets/images/avatars/Tyson.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'I\'m wondering why life keeps teaching me lessons I have no desire to learn...'
-        },
-        {
-            'id'    : '5725a6809413bf8a0a5272b1',
-            'name'  : 'Velazquez',
-            'avatar': 'assets/images/avatars/Velazquez.jpg',
-            'status': 'online',
-            'mood'  : 'Modulation in all things.'
-        }
-    ];
-
-    public static chats = [
-        {
-            'id'    : '1725a680b3249760ea21de52',
-            'dialog': [
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
-                    'time'   : '2017-03-22T08:54:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
-                    'time'   : '2017-03-22T08:55:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:00:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:02:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:05:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:15:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:20:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:22:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:25:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:27:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:33:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:35:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:45:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T10:00:28.299Z'
-                }
-            ]
-        },
-        {
-            'id'    : '2725a680b8d240c011dd2243',
-            'dialog': [
-                {
-                    'who'    : '5725a680b8d240c011dd224b',
-                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
-                    'time'   : '2017-04-22T01:00:00.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
-                    'time'   : '2017-04-22T01:05:00.299Z'
-                },
-                {
-                    'who'    : '5725a680b8d240c011dd224b',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-04-22T01:10:00.299Z'
-                }
-            ]
-        },
-        {
-            'id'    : '3725a6809413bf8a0a5272b4',
-            'dialog': [
-                {
-                    'who'    : '5725a6809413bf8a0a5272b1',
-                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
-                    'time'   : '2017-04-22T02:10:00.299Z'
-                }
-            ]
-        }
-    ];
-
-    public static user = [
-        {
-            'id'      : '5725a6802d10e277a0f35724',
-            'name'    : 'John Doe',
-            'avatar'  : 'assets/images/avatars/profile.jpg',
-            'status'  : 'online',
-            'mood'    : 'it\'s a status....not your diary...',
-            'chatList': [
-                {
-                    'id'             : '1725a680b3249760ea21de52',
-                    'contactId'      : '5725a680b3249760ea21de52',
-                    'name'           : 'Alice Freeman',
-                    'unread'         : 4,
-                    'lastMessageTime': '2017-06-12T02:10:18.931Z'
-                },
-                {
-                    'id'             : '2725a680b8d240c011dd2243',
-                    'contactId'      : '5725a680b8d240c011dd224b',
-                    'name'           : 'Josefina',
-                    'unread'         : null,
-                    'lastMessageTime': '2017-02-18T10:30:18.931Z'
-                },
-                {
-                    'id'             : '3725a6809413bf8a0a5272b4',
-                    'contactId'      : '5725a6809413bf8a0a5272b1',
-                    'name'           : 'Velazquez',
-                    'unread'         : 2,
-                    'lastMessageTime': '2017-03-18T12:30:18.931Z'
-                }
-            ]
-        }
-    ];
-
-}

src/app/fuse-fake-db/contacts.ts

@@ -1,411 +0,0 @@
-export class ContactsFakeDb
-{
-    public static contacts = [
-        {
-            'id'      : '5725a680b3249760ea21de52',
-            'name'    : 'Abbott',
-            'lastName': 'Keitch',
-            'avatar'  : 'assets/images/avatars/Abbott.jpg',
-            'nickname': 'Royalguard',
-            'company' : 'Saois',
-            'jobTitle': 'Digital Archivist',
-            'email'   : 'abbott@withinpixels.com',
-            'phone'   : '+1-202-555-0175',
-            'address' : '933 8th Street Stamford, CT 06902',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680606588342058356d',
-            'name'    : 'Arnold',
-            'lastName': 'Matlock',
-            'avatar'  : 'assets/images/avatars/Arnold.jpg',
-            'nickname': 'Wanderer',
-            'company' : 'Laotcone',
-            'jobTitle': 'Graphic Artist',
-            'email'   : 'arnold@withinpixels.com',
-            'phone'   : '+1-202-555-0141',
-            'address' : '906 Valley Road Michigan City, IN 46360',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a68009e20d0a9e9acf2a',
-            'name'    : 'Barrera',
-            'lastName': 'Bradbury',
-            'avatar'  : 'assets/images/avatars/Barrera.jpg',
-            'nickname': 'Jackal',
-            'company' : 'Unizim',
-            'jobTitle': 'Graphic Designer',
-            'email'   : 'barrera@withinpixels.com',
-            'phone'   : '+1-202-555-0196',
-            'address' : '183 River Street Passaic, NJ 07055',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6809fdd915739187ed5',
-            'name'    : 'Blair',
-            'lastName': 'Strangeway',
-            'avatar'  : 'assets/images/avatars/Blair.jpg',
-            'nickname': 'Knight',
-            'company' : 'Conedubdax',
-            'jobTitle': 'Visual Designer',
-            'email'   : 'blair@withinpixels.com',
-            'phone'   : '+1-202-555-0118',
-            'address' : '143 Jones Street Eau Claire, WI 54701',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a68007920cf75051da64',
-            'name'    : 'Boyle',
-            'lastName': 'Winters',
-            'avatar'  : 'assets/images/avatars/Boyle.jpg',
-            'nickname': 'Jester',
-            'company' : 'Newo',
-            'jobTitle': 'Catalogue Illustrator',
-            'email'   : 'boyle@withinpixels.com',
-            'phone'   : '+1-202-555-0177',
-            'address' : '218 Pearl Street Brandon, FL 33510',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a68031fdbb1db2c1af47',
-            'name'    : 'Christy',
-            'lastName': 'Camacho',
-            'avatar'  : 'assets/images/avatars/Christy.jpg',
-            'nickname': 'Mist',
-            'company' : 'uniway',
-            'jobTitle': '3D Animator',
-            'email'   : 'christy@withinpixels.com',
-            'phone'   : '+1-202-555-0136',
-            'address' : '329 Bridge Street Desoto, TX 75115',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680bc670af746c435e2',
-            'name'    : 'Copeland',
-            'lastName': 'Redcliff',
-            'avatar'  : 'assets/images/avatars/Copeland.jpg',
-            'nickname': 'Cloudlaw',
-            'company' : 'Tempron',
-            'jobTitle': 'Multimedia Artist',
-            'email'   : 'copeland@withinpixels.com',
-            'phone'   : '+1-202-555-0107',
-            'address' : '956 6th Avenue North Bergen, NJ 0704',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680e7eb988a58ddf303',
-            'name'    : 'Estes',
-            'lastName': 'Stevens',
-            'avatar'  : 'assets/images/avatars/Estes.jpg',
-            'nickname': 'Roamer',
-            'company' : 'nam-dex',
-            'jobTitle': 'Special Effects Artist',
-            'email'   : 'estes@withinpixels.com',
-            'phone'   : '+1-202-555-0113',
-            'address' : '664 York Street Cambridge, MA 02138',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680dcb077889f758961',
-            'name'    : 'Harper',
-            'lastName': 'MacGuffin',
-            'avatar'  : 'assets/images/avatars/Harper.jpg',
-            'nickname': 'Tempest',
-            'company' : 'runcane',
-            'jobTitle': 'Application Developer',
-            'email'   : 'harper@withinpixels.com',
-            'phone'   : '+1-202-555-0173',
-            'address' : '738 Route 11 Cornelius, NC 28031',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6806acf030f9341e925',
-            'name'    : 'Helen',
-            'lastName': 'Sheridan',
-            'avatar'  : 'assets/images/avatars/Helen.jpg',
-            'nickname': 'Magicbattler',
-            'company' : 'Subhow',
-            'jobTitle': 'Content Developer',
-            'email'   : 'helen@withinpixels.com',
-            'phone'   : '+1-202-555-0163',
-            'address' : '194 Washington Avenue Saint Petersburg, FL 33702',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680ae1ae9a3c960d487',
-            'name'    : 'Henderson',
-            'lastName': 'Cambias',
-            'avatar'  : 'assets/images/avatars/Henderson.jpg',
-            'nickname': 'Blizzard',
-            'company' : 'Howcom',
-            'jobTitle': 'Web Designer',
-            'email'   : 'henderson@withinpixels.com',
-            'phone'   : '+1-202-555-0151',
-            'address' : '686 Roosevelt Avenue Oviedo, FL 32765',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680b8d240c011dd224b',
-            'name'    : 'Josefina',
-            'lastName': 'Lakefield',
-            'avatar'  : 'assets/images/avatars/Josefina.jpg',
-            'nickname': 'Violet',
-            'company' : 'Gecko',
-            'jobTitle': 'Web Developer',
-            'email'   : 'josefina@withinpixels.com',
-            'phone'   : '+1-202-555-0160',
-            'address' : '202 Hartford Road Lynchburg, VA 24502',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a68034cb3968e1f79eac',
-            'name'    : 'Katina',
-            'lastName': 'Bletchley',
-            'avatar'  : 'assets/images/avatars/Katina.jpg',
-            'nickname': 'Rose',
-            'company' : 'Lexicom',
-            'jobTitle': 'Software Designer',
-            'email'   : 'katina@withinpixels.com',
-            'phone'   : '+1-202-555-0186',
-            'address' : '219 Woodland Road Valrico, FL 33594',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6801146cce777df2a08',
-            'name'    : 'Lily',
-            'lastName': 'Peasegood',
-            'avatar'  : 'assets/images/avatars/Lily.jpg',
-            'nickname': 'Star',
-            'company' : 'zooflex',
-            'jobTitle': 'Software Specialist',
-            'email'   : 'lily@withinpixels.com',
-            'phone'   : '+1-202-555-0115',
-            'address' : '305 Willow Drive Superior, WI 54880',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6808a178bfd034d6ecf',
-            'name'    : 'Mai',
-            'lastName': 'Nox',
-            'avatar'  : 'assets/images/avatars/Mai.jpg',
-            'nickname': 'Violetmage',
-            'company' : 'quadzone',
-            'jobTitle': 'Software Engineer',
-            'email'   : 'mai@withinpixels.com',
-            'phone'   : '+1-202-555-0199',
-            'address' : '148 Heather Lane Mcminnville, TN 37110',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680653c265f5c79b5a9',
-            'name'    : 'Nancy',
-            'lastName': 'Jaggers',
-            'avatar'  : 'assets/images/avatars/Nancy.jpg',
-            'nickname': 'Silverwarden',
-            'company' : 'Opetamnix',
-            'jobTitle': 'Software Architect',
-            'email'   : 'nancy@withinpixels.com',
-            'phone'   : '+1-202-555-0120',
-            'address' : '345 Laurel Lane Union City, NJ 07087',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680bbcec3cc32a8488a',
-            'name'    : 'Nora',
-            'lastName': 'Franklin',
-            'avatar'  : 'assets/images/avatars/Nora.jpg',
-            'nickname': 'Katanachanter',
-            'company' : 'Saoway',
-            'jobTitle': 'Database Coordinator',
-            'email'   : 'nora@withinpixels.com',
-            'phone'   : '+1-202-555-0172',
-            'address' : '572 Rose Street Summerfield, FL 34491',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6803d87f1b77e17b62b',
-            'name'    : 'Odessa',
-            'lastName': 'Goodman',
-            'avatar'  : 'assets/images/avatars/Odessa.jpg',
-            'nickname': 'Rose',
-            'company' : 'transace',
-            'jobTitle': 'Database Administration Manager',
-            'email'   : 'odessa@withinpixels.com',
-            'phone'   : '+1-202-555-0190',
-            'address' : '527 Jefferson Court Conyers, GA 30012',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680e87cb319bd9bd673',
-            'name'    : 'Reyna',
-            'lastName': 'Preece',
-            'avatar'  : 'assets/images/avatars/Reyna.jpg',
-            'nickname': 'Holydawn',
-            'company' : 'Dingex',
-            'jobTitle': 'Data Processing Planner',
-            'email'   : 'reyna@withinpixels.com',
-            'phone'   : '+1-202-555-0116',
-            'address' : '297 Strawberry Lane Faribault, MN 55021',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6802d10e277a0f35775',
-            'name'    : 'Shauna',
-            'lastName': 'Atherton',
-            'avatar'  : 'assets/images/avatars/Shauna.jpg',
-            'nickname': 'Faunasoul',
-            'company' : 'Vivaflex',
-            'jobTitle': 'Art Director',
-            'email'   : 'shauna@withinpixels.com',
-            'phone'   : '+1-202-555-0159',
-            'address' : '928 Canterbury Court Pittsburgh, PA 15206',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680aef1e5cf26dd3d1f',
-            'name'    : 'Shepard',
-            'lastName': 'Rosco',
-            'avatar'  : 'assets/images/avatars/Shepard.jpg',
-            'nickname': 'Fireking',
-            'company' : 'Goldenla',
-            'jobTitle': 'Magazine Designer',
-            'email'   : 'shepard@withinpixels.com',
-            'phone'   : '+1-202-555-0173',
-            'address' : '904 Ridge Road Pickerington, OH 43147',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680cd7efa56a45aea5d',
-            'name'    : 'Tillman',
-            'lastName': 'Lee',
-            'avatar'  : 'assets/images/avatars/Tillman.jpg',
-            'nickname': 'Gust',
-            'company' : 'K-techno',
-            'jobTitle': 'News Photographer',
-            'email'   : 'tillman@withinpixels.com',
-            'phone'   : '+1-202-555-0183',
-            'address' : '447 Charles Street Dorchester, MA 02125',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a680fb65c91a82cb35e2',
-            'name'    : 'Trevino',
-            'lastName': 'Bush',
-            'avatar'  : 'assets/images/avatars/Trevino.jpg',
-            'nickname': 'Wolf',
-            'company' : 'Dalthex',
-            'jobTitle': 'Photojournalist',
-            'email'   : 'trevino@withinpixels.com',
-            'phone'   : '+1-202-555-0138',
-            'address' : '84 Valley View Road Norman, OK 73072',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a68018c663044be49cbf',
-            'name'    : 'Tyson',
-            'lastName': 'Marshall',
-            'avatar'  : 'assets/images/avatars/Tyson.jpg',
-            'nickname': 'Honordread',
-            'company' : 'Geocon',
-            'jobTitle': 'Manuscript Editor',
-            'email'   : 'tyson@withinpixels.com',
-            'phone'   : '+1-202-555-0146',
-            'address' : '204 Clark Street Monsey, NY 10952',
-            'birthday': null,
-            'notes'   : ''
-        },
-        {
-            'id'      : '5725a6809413bf8a0a5272b1',
-            'name'    : 'Velazquez',
-            'lastName': 'Smethley',
-            'avatar'  : 'assets/images/avatars/Velazquez.jpg',
-            'nickname': 'Strifedream',
-            'company' : 'ranex',
-            'jobTitle': 'Publications Editor',
-            'email'   : 'velezquez@withinpixels.com',
-            'phone'   : '+1-202-555-0146',
-            'address' : '261 Cleveland Street Riverside, NJ 08075',
-            'birthday': null,
-            'notes'   : ''
-        }
-    ];
-
-    public static user = [
-        {
-            'id'              : '5725a6802d10e277a0f35724',
-            'name'            : 'John Doe',
-            'avatar'          : 'assets/images/avatars/profile.jpg',
-            'starred'         : [
-                '5725a680ae1ae9a3c960d487',
-                '5725a6801146cce777df2a08',
-                '5725a680bbcec3cc32a8488a',
-                '5725a680bc670af746c435e2',
-                '5725a68009e20d0a9e9acf2a'
-            ],
-            'frequentContacts': [
-                '5725a6809fdd915739187ed5',
-                '5725a68031fdbb1db2c1af47',
-                '5725a680606588342058356d',
-                '5725a680e7eb988a58ddf303',
-                '5725a6806acf030f9341e925',
-                '5725a68034cb3968e1f79eac',
-                '5725a6801146cce777df2a08',
-                '5725a680653c265f5c79b5a9'
-            ],
-            'groups'          : [
-                {
-                    'id'        : '5725a6802d10e277a0f35739',
-                    'name'      : 'Friends',
-                    'contactIds': [
-                        '5725a680bbcec3cc32a8488a',
-                        '5725a680e87cb319bd9bd673',
-                        '5725a6802d10e277a0f35775'
-                    ]
-                },
-                {
-                    'id'        : '5725a6802d10e277a0f35749',
-                    'name'      : 'Clients',
-                    'contactIds': [
-                        '5725a680cd7efa56a45aea5d',
-                        '5725a68018c663044be49cbf',
-                        '5725a6809413bf8a0a5272b1',
-                        '5725a6803d87f1b77e17b62b'
-                    ]
-                },
-                {
-                    'id'        : '5725a6802d10e277a0f35329',
-                    'name'      : 'Recent Workers',
-                    'contactIds': [
-                        '5725a680bbcec3cc32a8488a',
-                        '5725a680653c265f5c79b5a9',
-                        '5725a6808a178bfd034d6ecf',
-                        '5725a6801146cce777df2a08'
-                    ]
-                }
-            ]
-        }
-    ];
-}