Added missing variables that prevents skeleton from building as it is

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

.angular-cli.json

@@ -25,6 +25,7 @@
             "environmentSource": "environments/environment.ts",
             "environments": {
                 "dev": "environments/environment.ts",
+                "hmr": "environments/environment.hmr.ts",
                 "prod": "environments/environment.prod.ts"
             }
         }
@@ -36,13 +37,16 @@
     },
     "lint": [
         {
-            "project": "src/tsconfig.app.json"
+            "project": "src/tsconfig.app.json",
+            "exclude": "**/node_modules/**"
         },
         {
-            "project": "src/tsconfig.spec.json"
+            "project": "src/tsconfig.spec.json",
+            "exclude": "**/node_modules/**"
         },
         {
-            "project": "e2e/tsconfig.e2e.json"
+            "project": "e2e/tsconfig.e2e.json",
+            "exclude": "**/node_modules/**"
         }
     ],
     "test": {

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.3.
+Material Design Admin Template with Angular 5+ and Angular Material 2
 
 ## Development server
 
@@ -22,7 +22,3 @@ 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,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

karma.conf.js

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

package.json

@@ -1,69 +1,72 @@
 {
   "name": "fuse2",
-  "version": "1.0.2",
+  "version": "1.2.1",
   "license": "",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "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-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "4.3.6",
-    "@angular/cdk": "2.0.0-beta.10",
-    "@angular/common": "4.3.6",
-    "@angular/compiler": "4.3.6",
-    "@angular/core": "4.3.6",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.3.6",
-    "@angular/http": "4.3.6",
-    "@angular/material": "2.0.0-beta.10",
-    "@angular/platform-browser": "4.3.6",
-    "@angular/platform-browser-dynamic": "4.3.6",
-    "@angular/router": "4.3.6",
-    "@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",
+    "@agm/core": "1.0.0-beta.2",
+    "@angular/animations": "5.0.1",
+    "@angular/cdk": "5.0.0-rc0",
+    "@angular/common": "5.0.1",
+    "@angular/compiler": "5.0.1",
+    "@angular/core": "5.0.1",
+    "@angular/flex-layout": "2.0.0-beta.10",
+    "@angular/forms": "5.0.1",
+    "@angular/http": "5.0.1",
+    "@angular/material": "5.0.0-rc0",
+    "@angular/platform-browser": "5.0.1",
+    "@angular/platform-browser-dynamic": "5.0.1",
+    "@angular/router": "5.0.1",
+    "@ngx-translate/core": "8.0.0",
+    "@swimlane/ngx-charts": "6.1.0",
+    "@swimlane/ngx-datatable": "11.0.3",
+    "@withinpixels/ngx-dnd": "3.1.0",
+    "angular-calendar": "0.21.3",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
-    "d3": "4.10.0",
+    "core-js": "2.5.1",
+    "d3": "4.11.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
-    "moment": "2.18.1",
-    "ngx-color-picker": "4.3.1",
-    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.5.6",
-    "rxjs": "5.4.3",
+    "moment": "2.19.2",
+    "ngx-color-picker": "4.4.0",
+    "ngx-cookie-service": "1.0.9",
+    "perfect-scrollbar": "1.0.3",
+    "rxjs": "5.5.2",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "^1.3.2",
-    "@angular/compiler-cli": "4.3.6",
-    "@angular/language-service": "4.3.6",
-    "@ngtools/webpack": "^1.6.2",
-    "@types/jasmine": "^2.5.54",
-    "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.88",
-    "codelyzer": "~3.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "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"
+    "@angular/cli": "1.5.0",
+    "@angular/compiler-cli": "5.0.1",
+    "@angular/language-service": "5.0.1",
+    "@angularclass/hmr": "2.1.3",
+    "@types/jasmine": "2.5.54",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "6.0.90",
+    "codelyzer": "3.2.2",
+    "jasmine-core": "2.6.4",
+    "jasmine-spec-reporter": "4.1.1",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.1.2",
+    "ts-node": "3.2.2",
+    "tslint": "5.7.0",
+    "typescript": "2.4.2"
   }
 }

protractor.conf.js

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

src/app/app.component.ts

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

src/app/app.module.ts

@@ -4,50 +4,20 @@ 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 { ProjectModule } from './main/content/apps/dashboards/project/project.module';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
-import { PagesModule } from './main/content/pages/pages.module';
-import { UIModule } from './main/content/ui/ui.module';
-import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
-import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
-import { ServicesModule } from './main/content/services/services.module';
+import { FuseNavigationService } from './core/components/navigation/navigation.service';
+import { FuseSampleModule } from './main/content/sample/sample.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 const appRoutes: Routes = [
-    {
-        path        : 'apps/mail',
-        loadChildren: './main/content/apps/mail/mail.module#FuseMailModule'
-    },
-    {
-        path        : 'apps/chat',
-        loadChildren: './main/content/apps/chat/chat.module#FuseChatModule'
-    },
-    {
-        path        : 'apps/calendar',
-        loadChildren: './main/content/apps/calendar/calendar.module#FuseCalendarModule'
-    },
-    {
-        path        : 'apps/todo',
-        loadChildren: './main/content/apps/todo/todo.module#FuseTodoModule'
-    },
-    {
-        path        : 'apps/file-manager',
-        loadChildren: './main/content/apps/file-manager/file-manager.module#FuseFileManagerModule'
-    },
-    {
-        path        : 'apps/contacts',
-        loadChildren: './main/content/apps/contacts/contacts.module#FuseContactsModule'
-    },
     {
         path      : '**',
-        redirectTo: 'apps/dashboards/project'
+        redirectTo: 'sample'
     }
 ];
 
@@ -62,24 +32,14 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
-
-        InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}),
-
-        PerfectScrollbarModule.forRoot(),
-
+        TranslateModule.forRoot(),
         FuseMainModule,
-
-        ProjectModule,
-
-        PagesModule,
-        UIModule,
-        ServicesModule,
-        ComponentsModule,
-        ComponentsThirdPartyModule
+        FuseSampleModule
     ],
     providers   : [
         FuseSplashScreenService,
-        FuseConfigService
+        FuseConfigService,
+        FuseNavigationService
     ],
     bootstrap   : [
         AppComponent

src/app/core/animations.ts

@@ -1,10 +1,69 @@
-import { sequence, trigger, stagger, animate, style, group, query, transition, keyframes, animateChild, state } from '@angular/animations';
+import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
 
-// const query = (s, a, o = {optional: true}) => q(s, a, o);
+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'
+    }
+});
 
-export class Animations
-{
-    public static slideInOut = trigger('slideInOut', [
+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', [
         state('0', style({
             height : '0px',
             display: 'none'
@@ -15,9 +74,9 @@ export class Animations
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
-    ]);
+    ]),
 
-    public static slideInLeft = trigger('slideInLeft', [
+    trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
             display  : 'none'
@@ -28,9 +87,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static slideInRight = trigger('slideInRight', [
+    trigger('slideInRight', [
         state('void', style({
             transform: 'translateX(100%)',
             display  : 'none'
@@ -41,9 +100,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static slideInTop = trigger('slideInTop', [
+    trigger('slideInTop', [
         state('void', style({
             transform: 'translateY(-100%)',
             display  : 'none'
@@ -54,9 +113,9 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static slideInBottom = trigger('slideInBottom', [
+    trigger('slideInBottom', [
         state('void',
             style({
                 transform: 'translateY(100%)',
@@ -68,9 +127,20 @@ export class Animations
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
-    ]);
+    ]),
 
-    public static routerTransitionLeft = trigger('routerTransitionLeft', [
+    trigger('expandCollapse', [
+        state('void', style({
+            height: '0px'
+        })),
+        state('*', style({
+            height: '*'
+        })),
+        transition('void => *', animate('300ms ease-out')),
+        transition('* => void', animate('300ms ease-in'))
+    ]),
+
+    trigger('routerTransitionLeft', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -95,7 +165,7 @@ export class Animations
                             transform: 'translateX(0)',
                             opacity  : 1
                         }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(-100%)',
                                 opacity  : 0
@@ -103,7 +173,7 @@ export class Animations
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateX(100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(0%)',
                                 opacity  : 1
@@ -114,9 +184,9 @@ export class Animations
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]);
+    ]),
 
-    public static routerTransitionRight = trigger('routerTransitionRight', [
+    trigger('routerTransitionRight', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -141,7 +211,7 @@ export class Animations
                             transform: 'translateX(0)',
                             opacity  : 1
                         }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(100%)',
                                 opacity  : 0
@@ -149,7 +219,7 @@ export class Animations
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateX(-100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateX(0%)',
                                 opacity  : 1
@@ -160,9 +230,9 @@ export class Animations
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]);
+    ]),
 
-    public static routerTransitionUp = trigger('routerTransitionUp', [
+    trigger('routerTransitionUp', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -180,35 +250,33 @@ export class Animations
                     opacity  : 0
                 })
             ], {optional: true}),
-            sequence([
-                group([
-                    query('fuse-content > :leave', [
+            group([
+                query('fuse-content > :leave', [
+                    style({
+                        transform: 'translateY(0)',
+                        opacity  : 1
+                    }),
+                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                         style({
-                            transform: 'translateY(0)',
+                            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%)',
                             opacity  : 1
-                        }),
-                        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})
-            ])
+                        }))
+                ], {optional: true})
+            ]),
+            query('fuse-content > :leave', animateChild(), {optional: true}),
+            query('fuse-content > :enter', animateChild(), {optional: true})
         ])
-    ]);
+    ]),
 
-    public static routerTransitionDown = trigger('routerTransitionDown', [
+    trigger('routerTransitionDown', [
 
         transition('* => *', [
             query('fuse-content > :enter, fuse-content > :leave', [
@@ -233,7 +301,7 @@ export class Animations
                             transform: 'translateY(0)',
                             opacity  : 1
                         }),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateY(100%)',
                                 opacity  : 0
@@ -241,7 +309,7 @@ export class Animations
                     ], {optional: true}),
                     query('fuse-content > :enter', [
                         style({transform: 'translateY(-100%)'}),
-                        animate('400ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
+                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
                                 transform: 'translateY(0%)',
                                 opacity  : 1
@@ -252,11 +320,11 @@ export class Animations
                 query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
-    ]);
+    ]),
 
-    public static routerTransitionFade = trigger('routerTransitionFade', [
+    trigger('routerTransitionFade', [
 
-        transition('* => *', [
+        transition('* => *', group([
 
             query('fuse-content > :enter, fuse-content > :leave ', [
                 style({
@@ -267,33 +335,32 @@ export class Animations
                     right   : 0
                 })
             ], {optional: true}),
+
             query('fuse-content > :enter', [
                 style({
                     opacity: 0
                 })
             ], {optional: true}),
-            // sequence([
-                query('fuse-content > :leave', [
-                    style({
-                        opacity: 1
-                    }),
-                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                        style({
-                            opacity: 0
-                        }))
-                ], {optional: true}),
-                query('fuse-content > :enter', [
+            query('fuse-content > :leave', [
+                style({
+                    opacity: 1
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                     style({
                         opacity: 0
-                    }),
-                    animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)',
-                        style({
-                            opacity: 1
-                        }))
-                ], {optional: true}),
-            // ]),
+                    }))
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    opacity: 0
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    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 md-dialog-title>Confirm</h1>
-<div md-dialog-content>{{confirmMessage}}</div>
-<div md-dialog-actions class="pt-24">
-    <button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
-    <button md-button (click)="dialogRef.close(false)">Cancel</button>
+<h1 matDialogTitle>Confirm</h1>
+<div mat-dialog-content>{{confirmMessage}}</div>
+<div mat-dialog-actions class="pt-24">
+    <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
+    <button mat-button (click)="dialogRef.close(false)">Cancel</button>
 </div>

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

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

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

@@ -0,0 +1,65 @@
+/**
+ * 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.ts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+<a class="nav-link" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <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 +1,3 @@
 :host {
 
-}
+}

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,18 @@
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

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

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

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

@@ -0,0 +1,12 @@
+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

@@ -1,11 +0,0 @@
-<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

@@ -1,147 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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-subheader/nav-subheader.component.html

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

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

@@ -1,20 +0,0 @@
-
-: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

@@ -1,21 +0,0 @@
-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,11 +1,32 @@
-<div id="main-navigation" class="nav">
-    <ng-container *ngFor="let item of navigation">
+<div id="main-navigation" class="nav"
+     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
 
-        <fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>
+    <!-- Vertical Navigation Layout -->
+    <ng-container *ngIf="layout === 'vertical'">
 
-        <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
+        <ng-container *ngFor="let item of navigationModel">
 
-        <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
+            <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>
 
     </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,5 +1,6 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { FuseNavigationService } from './navigation.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector     : 'fuse-navigation',
@@ -7,13 +8,25 @@ import { FuseNavigationService } from './navigation.service';
     styleUrls    : ['./navigation.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent
+export class FuseNavigationComponent implements OnDestroy
 {
-    navigation: any[];
+    navigationModel: any[];
+    navigationModelChangeSubscription: Subscription;
 
-    constructor(private navigationService: FuseNavigationService)
+    @Input('layout') layout = 'vertical';
+
+    constructor(private fuseNavigationService: FuseNavigationService)
     {
-        this.navigation = navigationService.getNavigation();
+        this.navigationModelChangeSubscription =
+            this.fuseNavigationService.onNavigationModelChange
+                .subscribe((navigationModel) => {
+                    this.navigationModel = navigationModel;
+                });
+    }
+
+    ngOnDestroy()
+    {
+        this.navigationModelChangeSubscription.unsubscribe();
     }
 
 }

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

@@ -1,10 +1,12 @@
 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 { FuseNavItemComponent } from './nav-item/nav-item.component';
-import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.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';
 
 @NgModule({
     imports     : [
@@ -16,9 +18,11 @@ import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.component'
     ],
     declarations: [
         FuseNavigationComponent,
-        FuseNavSubheaderComponent,
-        FuseNavItemComponent,
-        FuseNavCollapseComponent
+        FuseNavVerticalGroupComponent,
+        FuseNavVerticalItemComponent,
+        FuseNavVerticalCollapseComponent,
+        FuseNavHorizontalItemComponent,
+        FuseNavHorizontalCollapseComponent
     ]
 })
 export class FuseNavigationModule

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

@@ -1,25 +1,151 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { FuseNavigation } from '../../../navigation.model';
+import { NavigationModel } from '../../../navigation.model';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Injectable()
 export class FuseNavigationService
 {
+    onNavCollapseToggle = new EventEmitter<any>();
     onNavCollapseToggled = new EventEmitter<any>();
-    navigation: any[];
+    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
+    navigationModel: NavigationModel;
     flatNavigation: any[] = [];
 
     constructor()
     {
-        this.navigation = new FuseNavigation().items;
+        this.navigationModel = new NavigationModel();
+        this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
     /**
-     * Get navigation array
+     * Get navigation model
+     *
      * @returns {any[]}
      */
-    getNavigation()
+    getNavigationModel()
     {
-        return this.navigation;
+        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;
+                }
+            }
+        }
     }
 
     /**
@@ -31,7 +157,7 @@ export class FuseNavigationService
     {
         if ( !navigationItems )
         {
-            navigationItems = this.navigation;
+            navigationItems = this.navigationModel.model;
         }
 
         for ( const navItem of navigationItems )
@@ -41,7 +167,7 @@ export class FuseNavigationService
                 continue;
             }
 
-            if ( navItem.type === 'nav-item' )
+            if ( navItem.type === 'item' )
             {
                 this.flatNavigation.push({
                     title: navItem.title,
@@ -53,7 +179,7 @@ export class FuseNavigationService
                 continue;
             }
 
-            if ( navItem.type === 'nav-collapse' )
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
             {
                 this.getFlatNavigation(navItem.children);
             }

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

@@ -0,0 +1,12 @@
+<a class="nav-link" matRipple (click)="toggleOpen($event)">
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <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

@@ -0,0 +1,182 @@
+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();
+                        }
+                    }
+                }
+            );
+    }
+
+    /**
+     * 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;
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

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

@@ -0,0 +1,10 @@
+<div class="group-title">
+    <span class="hint-text">{{ 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

@@ -0,0 +1,23 @@
+: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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,18 @@
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

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

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

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

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

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

@@ -3,11 +3,14 @@
 :host {
 
     .fuse-search-bar {
+        min-width: 64px;
         height: 64px;
         font-size: 13px;
-        @include media-breakpoint-down('xs') {
+
+        @include media-breakpoint-down('sm') {
             height: 56px;
         }
+
         .fuse-search-bar-expander,
         .fuse-search-bar-collapser {
             cursor: pointer;
@@ -16,7 +19,8 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
-            @include media-breakpoint-down('xs') {
+
+            @include media-breakpoint-down('sm') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
@@ -26,7 +30,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
-            @include media-breakpoint-down('xs') {
+            @include media-breakpoint-down('sm') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
@@ -70,4 +74,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 md-icon-button (click)="showMobileShortcutsPanel()">
-            <md-icon class="amber-600-fg">star</md-icon>
+        <button mat-icon-button (click)="showMobileShortcutsPanel()">
+            <mat-icon class="amber-600-fg">star</mat-icon>
         </button>
     </div>
 
     <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
 
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex>
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 
             <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 md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -25,64 +25,64 @@
 
                 </div>
 
-                <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
-                        (onMenuOpen)="onMenuOpen()">
-                    <md-icon class="amber-600-fg">star</md-icon>
+                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
+                        (menuOpened)="onMenuOpen()">
+                    <mat-icon class="amber-600-fg">star</mat-icon>
                 </button>
 
             </div>
 
             <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
-                <button md-icon-button (click)="hideMobileShortcutsPanel()">
-                    <md-icon>close</md-icon>
+                <button mat-icon-button (click)="hideMobileShortcutsPanel()">
+                    <mat-icon>close</mat-icon>
                 </button>
             </div>
 
         </div>
 
-        <md-menu #addMenu="mdMenu" class="w-240">
+        <mat-menu #addMenu="matMenu" class="w-240">
 
-            <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
-                <input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
-            </md-input-container>
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+                <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
+            </mat-form-field>
 
-            <md-divider></md-divider>
-            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
+            <mat-divider></mat-divider>
+            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
-                <md-list-item *ngFor="let shortcutItem of shortcutItems"
-                              (click)="toggleShortcut($event, shortcutItem)">
+                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
+                               (click)="toggleShortcut($event, shortcutItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{shortcutItem.title}}</p>
-                        <md-icon class="ml-8">star</md-icon>
+                        <p matLine fxFlex>{{shortcutItem.title}}</p>
+                        <mat-icon class="ml-8">star</mat-icon>
                     </div>
-                </md-list-item>
-                <md-list-item *ngIf="shortcutItems.length === 0">
+                </mat-list-item>
+                <mat-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
-                </md-list-item>
-            </md-nav-list>
+                </mat-list-item>
+            </mat-nav-list>
 
-            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
-                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
-                              (click)="toggleShortcut($event, navigationItem)">
+            <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+                <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
+                               (click)="toggleShortcut($event, navigationItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                             {{navigationItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{navigationItem.title}}</p>
-                        <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
+                        <p matLine fxFlex>{{navigationItem.title}}</p>
+                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
                     </div>
-                </md-list-item>
-            </md-nav-list>
-        </md-menu>
+                </mat-list-item>
+            </mat-nav-list>
+        </mat-menu>
 
     </div>
 

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

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

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

@@ -1,95 +1,105 @@
-<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
-    <md-icon>settings</md-icon>
+<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
+    <mat-icon>settings</mat-icon>
 </button>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 pb-16">
+<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-    <button md-icon-button class="close-button" (click)="closeBar()">
-        <md-icon>close</md-icon>
+<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-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>
+    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
-        <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:</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>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>Navigation Fold (for vertical navigation):</h3>
+        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+                          (change)="onSettingsChange()">
+            Folded
+        </mat-slide-toggle>
 
-        <md-divider></md-divider>
+        <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>
 
-        <h3 md-subheader>Colors:</h3>
+        <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">
 
-        <md-list-item>
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4>Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">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>Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">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>Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
+                <h4 class="mr-8">Footer Color</h4>
+                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer"
+                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
-        </md-list-item>
 
-        <md-divider></md-divider>
+        </div>
 
-        <h3 md-subheader>Animation:</h3>
+        <mat-divider></mat-divider>
 
-        <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>
+        <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>
 </div>

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

@@ -14,19 +14,69 @@
     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: 320px;
+        width: 360px;
         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: 0;
-            right: 0;
+            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;
         }
     }
 
@@ -34,6 +84,10 @@
         font-size: 15px;
     }
 
+    .mat-divider {
+        margin: 16px;
+    }
+
     .open-button {
         position: absolute;
         top: 0;
@@ -49,7 +103,7 @@
         opacity: .75;
         z-index: 998;
 
-        md-icon {
+        mat-icon {
             animation: rotating 3s linear infinite;
         }
 

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

@@ -1,28 +1,38 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, 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']
+    styleUrls  : ['./theme-options.component.scss'],
+    animations : fuseAnimations
 })
 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 fuseConfig: FuseConfigService,
+        private navigationService: FuseNavigationService,
+        private renderer: Renderer2
     )
     {
+        this.barClosed = true;
+
         this.onSettingsChanged =
             this.fuseConfig.onSettingsChanged
                 .subscribe(
@@ -30,10 +40,34 @@ 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()
@@ -49,17 +83,25 @@ 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/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);
-            }, 0);
+            }, 300);
             this.isCreated = true;
         }
         else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )

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

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

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

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

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

@@ -0,0 +1,169 @@
+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 OnInit, AfterViewInit, OnDestroy
+{
+    onSettingsChanged: Subscription;
+    isDisableCustomScrollbars = false;
+    isMobile = false;
+    isInitialized = true;
+    ps;
+
+    constructor(
+        private 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;
+        }
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+    ngAfterViewInit()
+    {
+        if ( this.isMobile || this.isDisableCustomScrollbars )
+        {
+            this.isInitialized = false;
+            return;
+        }
+
+        // Initialize the perfect-scrollbar
+        this.ps = new PerfectScrollbar(this.element.nativeElement);
+    }
+
+    ngOnDestroy()
+    {
+        if ( !this.isInitialized )
+        {
+            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

@@ -1,97 +0,0 @@
-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';
-            setTimeout(() => {
-                this.mdSidenav.open();
-            });
-        }
-        else
-        {
-            this.isLockedOpen = false;
-            this.mdSidenav.mode = 'over';
-            setTimeout(() => {
-                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/fuseUtils.ts

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

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

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

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

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

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

@@ -1,6 +1,9 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-@Pipe({name: 'getById'})
+@Pipe({
+    name: 'getById',
+    pure: false
+})
 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/src/css/main";
+// Perfect scrollbar
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
 // Fuse
 @import "fuse";
 
@@ -25,6 +25,7 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+@import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";

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

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

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

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

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

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

src/app/core/scss/partials/_global.scss

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

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

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

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

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

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

@@ -11,6 +11,22 @@
         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 {
@@ -88,7 +104,9 @@
 
                 > .nav-item {
 
-                    > .nav-link {
+                    > .nav-link,
+                    &.nav-group > .group-title,
+                    &.nav-group > .group-items > .nav-item > .nav-link {
                         padding-left: 56px;
                     }
 
@@ -96,7 +114,9 @@
 
                         > .nav-item {
 
-                            > .nav-link {
+                            > .nav-link,
+                            &.nav-group > .group-title,
+                            &.nav-group > .group-items > .nav-item > .nav-link {
                                 padding-left: 72px;
                             }
                         }
@@ -118,4 +138,83 @@
             }
         }
     }
+
+    > .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 {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex: 1;
                 background: none;
@@ -132,28 +132,25 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     min-width: 240px;
                     max-width: 240px;
                     height: auto;
-                    z-index: 2;
+                    z-index: 4;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
-                        position: relative;
+                    &.mat-is-locked-open {
                         background: none;
                         box-shadow: none;
                     }
 
-                    &.md-stop-transition {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-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 {
@@ -184,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                             height: $carded-header-height-without-toolbar;
                             min-height: $carded-header-height-without-toolbar;
                             max-height: $carded-header-height-without-toolbar;
+
+                            @include media-breakpoint-down('sm') {
+                                height: $carded-header-height-without-toolbar-sm;
+                                min-height: $carded-header-height-without-toolbar-sm;
+                                max-height: $carded-header-height-without-toolbar-sm;
+                            }
                         }
 
                         .content-card {
@@ -219,21 +222,76 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     }
                 }
             }
+
+            // Tabbed
+            &.tabbed {
+
+                > mat-sidenav-container {
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        width: calc(100% - 240px);
+
+                        .center {
+                            width: calc(100% - 32px);
+
+                            @include media-breakpoint-down('md') {
+                                width: calc(100% - 64px);
+                            }
+
+                            .header {
+                                flex: 1;
+                            }
+
+                            .content-card {
+
+                                .content {
+
+                                    .mat-tab-group {
+                                        overflow: hidden;
+
+                                        .mat-tab-header {
+
+                                            .mat-tab-label {
+                                                height: 64px;
+                                            }
+                                        }
+
+                                        .mat-tab-body {
+                                            overflow: hidden;
+
+                                            .mat-tab-body-content {
+                                                overflow: hidden;
+
+                                                .tab-content {
+                                                    position: relative;
+                                                    width: 100%;
+                                                    height: 100%;
+                                                    overflow: auto;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
 
         // Left sidenav
         &.left-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
-                            margin-left: 0 !important;
 
                             .center {
                                 margin-left: 0;
@@ -248,16 +306,15 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.right-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
                     order: 999;
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
-                            margin-right: 0 !important;
 
                             .center {
                                 margin-right: 0;
@@ -284,6 +341,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         }
 
         // Fullwidth
+        &.fullwidth {
+            overflow: auto;
+        }
+
         &.fullwidth,
         &.inner-sidenav {
             min-height: 100%;
@@ -302,17 +363,13 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
 
                     > .mat-sidenav-content,
                     > .mat-drawer-content {
                         flex: 1 0 auto;
                         max-height: none;
-
-                        > .center {
-                            overflow: hidden;
-                        }
                     }
                 }
             }
@@ -320,7 +377,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Inner Sidenav
             &.inner-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1;
 
                     .sidenav {
@@ -349,7 +406,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex-direction: column;
                 flex: 1;
@@ -364,7 +421,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     z-index: 51;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         width: 220px;
                         min-width: 220px;
                         max-width: 220px;
@@ -372,14 +429,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         background: transparent;
                     }
 
-                    &.md-stop-transition {
-
-                        ~ .mat-sidenav-content,
-                        ~ .mat-drawer-content {
-                            transition: none;
-                        }
-                    }
-
                     .sidenav-content {
                         height: 100%;
                     }
@@ -458,7 +507,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
@@ -467,7 +516,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.simple {
 
             &.fullwidth {
-                overflow: visible;
 
                 > .content {
                     flex: 1 0 auto;
@@ -477,16 +525,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto !important;
 
                     > .mat-sidenav-content,
                     > .mat-drawer-content {
                         flex: 1 0 auto;
-
-                        > .center {
-                            overflow: hidden;
-                        }
                     }
                 }
             }
@@ -506,7 +550,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
 
                     > .mat-sidenav-content,
                     > .mat-drawer-content {

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

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

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

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

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

@@ -1,20 +1,23 @@
-::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-    background-color: rgba(0, 0, 0, 0);
-}
+body:not(.is-mobile) {
 
-::-webkit-scrollbar:hover {
-    background-color: rgba(0, 0, 0, 0.12);
-}
+    ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+        background-color: rgba(0, 0, 0, 0);
+    }
 
-::-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:hover {
+        background-color: rgba(0, 0, 0, 0.12);
+    }
 
-::-webkit-scrollbar-thumb:active {
-    box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-    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;
+    }
 }

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

@@ -0,0 +1,360 @@
+/*@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-datatable.scss

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

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

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

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

@@ -22,17 +22,19 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation: 'left', // 'right', 'left', 'top', none
-                toolbar   : 'below', // 'above', 'below', none
-                footer    : 'none' // 'above', 'below', none
+                navigation      : 'left', // 'right', 'left', 'top', 'none'
+                navigationFolded: false, // true, false
+                toolbar         : 'below', // 'above', 'below', 'none'
+                footer          : 'below', // 'above', 'below', 'none'
+                mode            : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
-                toolbar: 'md-white-500-bg',
-                navbar : 'md-fuse-dark-500-bg',
-                footer : 'md-fuse-dark-800-bg'
+                toolbar: 'mat-white-500-bg',
+                navbar : 'mat-fuse-dark-700-bg',
+                footer : 'mat-fuse-dark-900-bg'
             },
             customScrollbars: true,
-            routerAnimation : 'fadeIn'
+            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
         };
 
         /**
@@ -43,6 +45,7 @@ export class FuseConfigService
             this.defaultSettings.customScrollbars = false;
         }
 
+        // Set the settings from the default settings
         this.settings = Object.assign({}, this.defaultSettings);
 
         // Reload the default settings on every navigation start
@@ -57,7 +60,6 @@ export class FuseConfigService
 
         // Create the behavior subject
         this.onSettingsChanged = new BehaviorSubject(this.settings);
-
     }
 
     /**
@@ -66,7 +68,10 @@ export class FuseConfigService
      */
     setSettings(settings)
     {
+        // Set the settings from the given object
         this.settings = Object.assign({}, this.settings, settings);
+
+        // Trigger the event
         this.onSettingsChanged.next(this.settings);
     }
 }

src/app/core/services/translation-loader.service.ts

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

src/app/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'
-                    ]
-                }
-            ]
-        }
-    ];
-}

src/app/fuse-fake-db/file-manager.ts

@@ -1,146 +0,0 @@
-export class FileManagerFakeDb
-{
-    public static files = [
-        {
-            'name'     : 'Work Documents',
-            'type'     : 'folder',
-            'owner'    : 'me',
-            'size'     : '',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true
-        },
-        {
-            'name'     : 'Public Documents',
-            'type'     : 'folder',
-            'owner'    : 'public',
-            'size'     : '',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true
-        },
-        {
-            'name'     : 'Private Documents',
-            'type'     : 'folder',
-            'owner'    : 'me',
-            'size'     : '',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true
-        },
-        {
-            'name'     : 'Ongoing projects',
-            'type'     : 'document',
-            'owner'    : 'Emily Bennett',
-            'size'     : '1.2 Mb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'Shopping list',
-            'type'     : 'document',
-            'owner'    : 'Emily Bennett',
-            'size'     : '980 Kb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'Invoices',
-            'type'     : 'spreadsheet',
-            'owner'    : 'Emily Bennett',
-            'size'     : '750 Kb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'Crash logs',
-            'type'     : 'document',
-            'owner'    : 'Emily Bennett',
-            'size'     : '980 Mb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'System logs',
-            'type'     : 'document',
-            'owner'    : 'Emily Bennett',
-            'size'     : '52 Kb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'Prices',
-            'type'     : 'spreadsheet',
-            'owner'    : 'Emily Bennett',
-            'size'     : '27 Mb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'Anabelle Manual',
-            'type'     : 'document',
-            'owner'    : 'Emily Bennett',
-            'size'     : '1.1 Kb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        },
-        {
-            'name'     : 'Steam summer sale budget',
-            'type'     : 'spreadsheet',
-            'owner'    : 'Emily Bennett',
-            'size'     : '505 Kb',
-            'modified' : 'July 8, 2017',
-            'opened'   : 'July 8, 2017',
-            'created'  : 'July 8, 2017',
-            'extention': '',
-            'location' : 'My Files > Documents',
-            'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
-        }
-    ];
-
-}

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

@@ -1,48 +0,0 @@
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-import { MailFakeDb } from './mail';
-import { ChatFakeDb } from './chat';
-import { CalendarFakeDb } from './calendar';
-import { TodoFakeDb } from './todo';
-import { ProfileFakeDb } from './profile';
-import { ContactsFakeDb } from './contacts';
-import { InvoiceFakeDb } from './invoice';
-import { FileManagerFakeDb } from './file-manager';
-import { SearchFakeDb } from './search';
-import { QuickPanelFakeDb } from './quick-panel';
-import { IconsFakeDb } from './icons';
-import { ProjectsDashboardDb } from './projects-dashboard';
-
-export class FuseFakeDbService implements InMemoryDbService
-{
-    createDb()
-    {
-        return {
-            'mail-mails'                 : MailFakeDb.mails,
-            'mail-folders'               : MailFakeDb.folders,
-            'mail-filters'               : MailFakeDb.filters,
-            'mail-labels'                : MailFakeDb.labels,
-            'chat-contacts'              : ChatFakeDb.contacts,
-            'chat-chats'                 : ChatFakeDb.chats,
-            'chat-user'                  : ChatFakeDb.user,
-            'calendar'                   : CalendarFakeDb.data,
-            'todo-todos'                 : TodoFakeDb.todos,
-            'todo-filters'               : TodoFakeDb.filters,
-            'todo-tags'                  : TodoFakeDb.tags,
-            'profile-timeline'           : ProfileFakeDb.timeline,
-            'profile-photos-videos'      : ProfileFakeDb.photosVideos,
-            'profile-about'              : ProfileFakeDb.about,
-            'contacts-contacts'          : ContactsFakeDb.contacts,
-            'contacts-user'              : ContactsFakeDb.user,
-            'invoice'                    : InvoiceFakeDb.invoice,
-            'file-manager'               : FileManagerFakeDb.files,
-            'search-classic'             : SearchFakeDb.classic,
-            'search-table'               : SearchFakeDb.table,
-            'quick-panel-notes'          : QuickPanelFakeDb.notes,
-            'quick-panel-events'         : QuickPanelFakeDb.events,
-            'icons'                      : IconsFakeDb.icons,
-            'projects-dashboard-projects': ProjectsDashboardDb.projects,
-            'projects-dashboard-widgets' : ProjectsDashboardDb.widgets
-        };
-    }
-}

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

@@ -1,938 +0,0 @@
-export class IconsFakeDb
-{
-    public static icons = [
-        '3d_rotation',
-        'ac_unit',
-        'access_alarm',
-        'access_alarms',
-        'access_time',
-        'accessibility',
-        'accessible',
-        'account_balance',
-        'account_balance_wallet',
-        'account_box',
-        'account_circle',
-        'adb',
-        'add',
-        'add_a_photo',
-        'add_alarm',
-        'add_alert',
-        'add_box',
-        'add_circle',
-        'add_circle_outline',
-        'add_location',
-        'add_shopping_cart',
-        'add_to_photos',
-        'add_to_queue',
-        'adjust',
-        'airline_seat_flat',
-        'airline_seat_flat_angled',
-        'airline_seat_individual_suite',
-        'airline_seat_legroom_extra',
-        'airline_seat_legroom_normal',
-        'airline_seat_legroom_reduced',
-        'airline_seat_recline_extra',
-        'airline_seat_recline_normal',
-        'airplanemode_active',
-        'airplanemode_inactive',
-        'airplay',
-        'airport_shuttle',
-        'alarm',
-        'alarm_add',
-        'alarm_off',
-        'alarm_on',
-        'album',
-        'all_inclusive',
-        'all_out',
-        'android',
-        'announcement',
-        'apps',
-        'archive',
-        'arrow_back',
-        'arrow_downward',
-        'arrow_drop_down',
-        'arrow_drop_down_circle',
-        'arrow_drop_up',
-        'arrow_forward',
-        'arrow_upward',
-        'art_track',
-        'aspect_ratio',
-        'assessment',
-        'assignment',
-        'assignment_ind',
-        'assignment_late',
-        'assignment_return',
-        'assignment_returned',
-        'assignment_turned_in',
-        'assistant',
-        'assistant_photo',
-        'attach_file',
-        'attach_money',
-        'attachment',
-        'audiotrack',
-        'autorenew',
-        'av_timer',
-        'backspace',
-        'backup',
-        'battery_alert',
-        'battery_charging_full',
-        'battery_full',
-        'battery_std',
-        'battery_unknown',
-        'beach_access',
-        'beenhere',
-        'block',
-        'bluetooth',
-        'bluetooth_audio',
-        'bluetooth_connected',
-        'bluetooth_disabled',
-        'bluetooth_searching',
-        'blur_circular',
-        'blur_linear',
-        'blur_off',
-        'blur_on',
-        'book',
-        'bookmark',
-        'bookmark_border',
-        'border_all',
-        'border_bottom',
-        'border_clear',
-        'border_color',
-        'border_horizontal',
-        'border_inner',
-        'border_left',
-        'border_outer',
-        'border_right',
-        'border_style',
-        'border_top',
-        'border_vertical',
-        'branding_watermark',
-        'brightness_1',
-        'brightness_2',
-        'brightness_3',
-        'brightness_4',
-        'brightness_5',
-        'brightness_6',
-        'brightness_7',
-        'brightness_auto',
-        'brightness_high',
-        'brightness_low',
-        'brightness_medium',
-        'broken_image',
-        'brush',
-        'bubble_chart',
-        'bug_report',
-        'build',
-        'burst_mode',
-        'business',
-        'business_center',
-        'cached',
-        'cake',
-        'call',
-        'call_end',
-        'call_made',
-        'call_merge',
-        'call_missed',
-        'call_missed_outgoing',
-        'call_received',
-        'call_split',
-        'call_to_action',
-        'camera',
-        'camera_alt',
-        'camera_enhance',
-        'camera_front',
-        'camera_rear',
-        'camera_roll',
-        'cancel',
-        'card_giftcard',
-        'card_membership',
-        'card_travel',
-        'casino',
-        'cast',
-        'cast_connected',
-        'center_focus_strong',
-        'center_focus_weak',
-        'change_history',
-        'chat',
-        'chat_bubble',
-        'chat_bubble_outline',
-        'check',
-        'check_box',
-        'check_box_outline_blank',
-        'check_circle',
-        'chevron_left',
-        'chevron_right',
-        'child_care',
-        'child_friendly',
-        'chrome_reader_mode',
-        'class',
-        'clear',
-        'clear_all',
-        'close',
-        'closed_caption',
-        'cloud',
-        'cloud_circle',
-        'cloud_done',
-        'cloud_download',
-        'cloud_off',
-        'cloud_queue',
-        'cloud_upload',
-        'code',
-        'collections',
-        'collections_bookmark',
-        'color_lens',
-        'colorize',
-        'comment',
-        'compare',
-        'compare_arrows',
-        'computer',
-        'confirmation_number',
-        'contact_mail',
-        'contact_phone',
-        'contacts',
-        'content_copy',
-        'content_cut',
-        'content_paste',
-        'control_point',
-        'control_point_duplicate',
-        'copyright',
-        'create',
-        'create_new_folder',
-        'credit_card',
-        'crop',
-        'crop_16_9',
-        'crop_3_2',
-        'crop_5_4',
-        'crop_7_5',
-        'crop_din',
-        'crop_free',
-        'crop_landscape',
-        'crop_original',
-        'crop_portrait',
-        'crop_rotate',
-        'crop_square',
-        'dashboard',
-        'data_usage',
-        'date_range',
-        'dehaze',
-        'delete',
-        'delete_forever',
-        'delete_sweep',
-        'description',
-        'desktop_mac',
-        'desktop_windows',
-        'details',
-        'developer_board',
-        'developer_mode',
-        'device_hub',
-        'devices',
-        'devices_other',
-        'dialer_sip',
-        'dialpad',
-        'directions',
-        'directions_bike',
-        'directions_boat',
-        'directions_bus',
-        'directions_car',
-        'directions_railway',
-        'directions_run',
-        'directions_subway',
-        'directions_transit',
-        'directions_walk',
-        'disc_full',
-        'dns',
-        'do_not_disturb',
-        'do_not_disturb_alt',
-        'do_not_disturb_off',
-        'do_not_disturb_on',
-        'dock',
-        'domain',
-        'done',
-        'done_all',
-        'donut_large',
-        'donut_small',
-        'drafts',
-        'drag_handle',
-        'drive_eta',
-        'dvr',
-        'edit',
-        'edit_location',
-        'eject',
-        'email',
-        'enhanced_encryption',
-        'equalizer',
-        'error',
-        'error_outline',
-        'euro_symbol',
-        'ev_station',
-        'event',
-        'event_available',
-        'event_busy',
-        'event_note',
-        'event_seat',
-        'exit_to_app',
-        'expand_less',
-        'expand_more',
-        'explicit',
-        'explore',
-        'exposure',
-        'exposure_neg_1',
-        'exposure_neg_2',
-        'exposure_plus_1',
-        'exposure_plus_2',
-        'exposure_zero',
-        'extension',
-        'face',
-        'fast_forward',
-        'fast_rewind',
-        'favorite',
-        'favorite_border',
-        'featured_play_list',
-        'featured_video',
-        'feedback',
-        'fiber_dvr',
-        'fiber_manual_record',
-        'fiber_new',
-        'fiber_pin',
-        'fiber_smart_record',
-        'file_download',
-        'file_upload',
-        'filter',
-        'filter_1',
-        'filter_2',
-        'filter_3',
-        'filter_4',
-        'filter_5',
-        'filter_6',
-        'filter_7',
-        'filter_8',
-        'filter_9',
-        'filter_9_plus',
-        'filter_b_and_w',
-        'filter_center_focus',
-        'filter_drama',
-        'filter_frames',
-        'filter_hdr',
-        'filter_list',
-        'filter_none',
-        'filter_tilt_shift',
-        'filter_vintage',
-        'find_in_page',
-        'find_replace',
-        'fingerprint',
-        'first_page',
-        'fitness_center',
-        'flag',
-        'flare',
-        'flash_auto',
-        'flash_off',
-        'flash_on',
-        'flight',
-        'flight_land',
-        'flight_takeoff',
-        'flip',
-        'flip_to_back',
-        'flip_to_front',
-        'folder',
-        'folder_open',
-        'folder_shared',
-        'folder_special',
-        'font_download',
-        'format_align_center',
-        'format_align_justify',
-        'format_align_left',
-        'format_align_right',
-        'format_bold',
-        'format_clear',
-        'format_color_fill',
-        'format_color_reset',
-        'format_color_text',
-        'format_indent_decrease',
-        'format_indent_increase',
-        'format_italic',
-        'format_line_spacing',
-        'format_list_bulleted',
-        'format_list_numbered',
-        'format_paint',
-        'format_quote',
-        'format_shapes',
-        'format_size',
-        'format_strikethrough',
-        'format_textdirection_l_to_r',
-        'format_textdirection_r_to_l',
-        'format_underlined',
-        'forum',
-        'forward',
-        'forward_10',
-        'forward_30',
-        'forward_5',
-        'free_breakfast',
-        'fullscreen',
-        'fullscreen_exit',
-        'functions',
-        'g_translate',
-        'gamepad',
-        'games',
-        'gavel',
-        'gesture',
-        'get_app',
-        'gif',
-        'golf_course',
-        'gps_fixed',
-        'gps_not_fixed',
-        'gps_off',
-        'grade',
-        'gradient',
-        'grain',
-        'graphic_eq',
-        'grid_off',
-        'grid_on',
-        'group',
-        'group_add',
-        'group_work',
-        'hd',
-        'hdr_off',
-        'hdr_on',
-        'hdr_strong',
-        'hdr_weak',
-        'headset',
-        'headset_mic',
-        'healing',
-        'hearing',
-        'help',
-        'help_outline',
-        'high_quality',
-        'highlight',
-        'highlight_off',
-        'history',
-        'home',
-        'hot_tub',
-        'hotel',
-        'hourglass_empty',
-        'hourglass_full',
-        'http',
-        'https',
-        'image',
-        'image_aspect_ratio',
-        'import_contacts',
-        'import_export',
-        'important_devices',
-        'inbox',
-        'indeterminate_check_box',
-        'info',
-        'info_outline',
-        'input',
-        'insert_chart',
-        'insert_comment',
-        'insert_drive_file',
-        'insert_emoticon',
-        'insert_invitation',
-        'insert_link',
-        'insert_photo',
-        'invert_colors',
-        'invert_colors_off',
-        'iso',
-        'keyboard',
-        'keyboard_arrow_down',
-        'keyboard_arrow_left',
-        'keyboard_arrow_right',
-        'keyboard_arrow_up',
-        'keyboard_backspace',
-        'keyboard_capslock',
-        'keyboard_hide',
-        'keyboard_return',
-        'keyboard_tab',
-        'keyboard_voice',
-        'kitchen',
-        'label',
-        'label_outline',
-        'landscape',
-        'language',
-        'laptop',
-        'laptop_chromebook',
-        'laptop_mac',
-        'laptop_windows',
-        'last_page',
-        'launch',
-        'layers',
-        'layers_clear',
-        'leak_add',
-        'leak_remove',
-        'lens',
-        'library_add',
-        'library_books',
-        'library_music',
-        'lightbulb_outline',
-        'line_style',
-        'line_weight',
-        'linear_scale',
-        'link',
-        'linked_camera',
-        'list',
-        'live_help',
-        'live_tv',
-        'local_activity',
-        'local_airport',
-        'local_atm',
-        'local_bar',
-        'local_cafe',
-        'local_car_wash',
-        'local_convenience_store',
-        'local_dining',
-        'local_drink',
-        'local_florist',
-        'local_gas_station',
-        'local_grocery_store',
-        'local_hospital',
-        'local_hotel',
-        'local_laundry_service',
-        'local_library',
-        'local_mall',
-        'local_movies',
-        'local_offer',
-        'local_parking',
-        'local_pharmacy',
-        'local_phone',
-        'local_pizza',
-        'local_play',
-        'local_post_office',
-        'local_printshop',
-        'local_see',
-        'local_shipping',
-        'local_taxi',
-        'location_city',
-        'location_disabled',
-        'location_off',
-        'location_on',
-        'location_searching',
-        'lock',
-        'lock_open',
-        'lock_outline',
-        'looks',
-        'looks_3',
-        'looks_4',
-        'looks_5',
-        'looks_6',
-        'looks_one',
-        'looks_two',
-        'loop',
-        'loupe',
-        'low_priority',
-        'loyalty',
-        'mail',
-        'mail_outline',
-        'map',
-        'markunread',
-        'markunread_mailbox',
-        'memory',
-        'menu',
-        'merge_type',
-        'message',
-        'mic',
-        'mic_none',
-        'mic_off',
-        'mms',
-        'mode_comment',
-        'mode_edit',
-        'monetization_on',
-        'money_off',
-        'monochrome_photos',
-        'mood',
-        'mood_bad',
-        'more',
-        'more_horiz',
-        'more_vert',
-        'motorcycle',
-        'mouse',
-        'move_to_inbox',
-        'movie',
-        'movie_creation',
-        'movie_filter',
-        'multiline_chart',
-        'music_note',
-        'music_video',
-        'my_location',
-        'nature',
-        'nature_people',
-        'navigate_before',
-        'navigate_next',
-        'navigation',
-        'near_me',
-        'network_cell',
-        'network_check',
-        'network_locked',
-        'network_wifi',
-        'new_releases',
-        'next_week',
-        'nfc',
-        'no_encryption',
-        'no_sim',
-        'not_interested',
-        'note',
-        'note_add',
-        'notifications',
-        'notifications_active',
-        'notifications_none',
-        'notifications_off',
-        'notifications_paused',
-        'offline_pin',
-        'ondemand_video',
-        'opacity',
-        'open_in_browser',
-        'open_in_new',
-        'open_with',
-        'pages',
-        'pageview',
-        'palette',
-        'pan_tool',
-        'panorama',
-        'panorama_fish_eye',
-        'panorama_horizontal',
-        'panorama_vertical',
-        'panorama_wide_angle',
-        'party_mode',
-        'pause',
-        'pause_circle_filled',
-        'pause_circle_outline',
-        'payment',
-        'people',
-        'people_outline',
-        'perm_camera_mic',
-        'perm_contact_calendar',
-        'perm_data_setting',
-        'perm_device_information',
-        'perm_identity',
-        'perm_media',
-        'perm_phone_msg',
-        'perm_scan_wifi',
-        'person',
-        'person_add',
-        'person_outline',
-        'person_pin',
-        'person_pin_circle',
-        'personal_video',
-        'pets',
-        'phone',
-        'phone_android',
-        'phone_bluetooth_speaker',
-        'phone_forwarded',
-        'phone_in_talk',
-        'phone_iphone',
-        'phone_locked',
-        'phone_missed',
-        'phone_paused',
-        'phonelink',
-        'phonelink_erase',
-        'phonelink_lock',
-        'phonelink_off',
-        'phonelink_ring',
-        'phonelink_setup',
-        'photo',
-        'photo_album',
-        'photo_camera',
-        'photo_filter',
-        'photo_library',
-        'photo_size_select_actual',
-        'photo_size_select_large',
-        'photo_size_select_small',
-        'picture_as_pdf',
-        'picture_in_picture',
-        'picture_in_picture_alt',
-        'pie_chart',
-        'pie_chart_outlined',
-        'pin_drop',
-        'place',
-        'play_arrow',
-        'play_circle_filled',
-        'play_circle_outline',
-        'play_for_work',
-        'playlist_add',
-        'playlist_add_check',
-        'playlist_play',
-        'plus_one',
-        'poll',
-        'polymer',
-        'pool',
-        'portable_wifi_off',
-        'portrait',
-        'power',
-        'power_input',
-        'power_settings_new',
-        'pregnant_woman',
-        'present_to_all',
-        'print',
-        'priority_high',
-        'public',
-        'publish',
-        'query_builder',
-        'question_answer',
-        'queue',
-        'queue_music',
-        'queue_play_next',
-        'radio',
-        'radio_button_checked',
-        'radio_button_unchecked',
-        'rate_review',
-        'receipt',
-        'recent_actors',
-        'record_voice_over',
-        'redeem',
-        'redo',
-        'refresh',
-        'remove',
-        'remove_circle',
-        'remove_circle_outline',
-        'remove_from_queue',
-        'remove_red_eye',
-        'remove_shopping_cart',
-        'reorder',
-        'repeat',
-        'repeat_one',
-        'replay',
-        'replay_10',
-        'replay_30',
-        'replay_5',
-        'reply',
-        'reply_all',
-        'report',
-        'report_problem',
-        'restaurant',
-        'restaurant_menu',
-        'restore',
-        'restore_page',
-        'ring_volume',
-        'room',
-        'room_service',
-        'rotate_90_degrees_ccw',
-        'rotate_left',
-        'rotate_right',
-        'rounded_corner',
-        'router',
-        'rowing',
-        'rss_feed',
-        'rv_hookup',
-        'satellite',
-        'save',
-        'scanner',
-        'schedule',
-        'school',
-        'screen_lock_landscape',
-        'screen_lock_portrait',
-        'screen_lock_rotation',
-        'screen_rotation',
-        'screen_share',
-        'sd_card',
-        'sd_storage',
-        'search',
-        'security',
-        'select_all',
-        'send',
-        'sentiment_dissatisfied',
-        'sentiment_neutral',
-        'sentiment_satisfied',
-        'sentiment_very_dissatisfied',
-        'sentiment_very_satisfied',
-        'settings',
-        'settings_applications',
-        'settings_backup_restore',
-        'settings_bluetooth',
-        'settings_brightness',
-        'settings_cell',
-        'settings_ethernet',
-        'settings_input_antenna',
-        'settings_input_component',
-        'settings_input_composite',
-        'settings_input_hdmi',
-        'settings_input_svideo',
-        'settings_overscan',
-        'settings_phone',
-        'settings_power',
-        'settings_remote',
-        'settings_system_daydream',
-        'settings_voice',
-        'share',
-        'shop',
-        'shop_two',
-        'shopping_basket',
-        'shopping_cart',
-        'short_text',
-        'show_chart',
-        'shuffle',
-        'signal_cellular_4_bar',
-        'signal_cellular_connected_no_internet_4_bar',
-        'signal_cellular_no_sim',
-        'signal_cellular_null',
-        'signal_cellular_off',
-        'signal_wifi_4_bar',
-        'signal_wifi_4_bar_lock',
-        'signal_wifi_off',
-        'sim_card',
-        'sim_card_alert',
-        'skip_next',
-        'skip_previous',
-        'slideshow',
-        'slow_motion_video',
-        'smartphone',
-        'smoke_free',
-        'smoking_rooms',
-        'sms',
-        'sms_failed',
-        'snooze',
-        'sort',
-        'sort_by_alpha',
-        'spa',
-        'space_bar',
-        'speaker',
-        'speaker_group',
-        'speaker_notes',
-        'speaker_notes_off',
-        'speaker_phone',
-        'spellcheck',
-        'star',
-        'star_border',
-        'star_half',
-        'stars',
-        'stay_current_landscape',
-        'stay_current_portrait',
-        'stay_primary_landscape',
-        'stay_primary_portrait',
-        'stop',
-        'stop_screen_share',
-        'storage',
-        'store',
-        'store_mall_directory',
-        'straighten',
-        'streetview',
-        'strikethrough_s',
-        'style',
-        'subdirectory_arrow_left',
-        'subdirectory_arrow_right',
-        'subject',
-        'subscriptions',
-        'subtitles',
-        'subway',
-        'supervisor_account',
-        'surround_sound',
-        'swap_calls',
-        'swap_horiz',
-        'swap_vert',
-        'swap_vertical_circle',
-        'switch_camera',
-        'switch_video',
-        'sync',
-        'sync_disabled',
-        'sync_problem',
-        'system_update',
-        'system_update_alt',
-        'tab',
-        'tab_unselected',
-        'tablet',
-        'tablet_android',
-        'tablet_mac',
-        'tag_faces',
-        'tap_and_play',
-        'terrain',
-        'text_fields',
-        'text_format',
-        'textsms',
-        'texture',
-        'theaters',
-        'thumb_down',
-        'thumb_up',
-        'thumbs_up_down',
-        'time_to_leave',
-        'timelapse',
-        'timeline',
-        'timer',
-        'timer_10',
-        'timer_3',
-        'timer_off',
-        'title',
-        'toc',
-        'today',
-        'toll',
-        'tonality',
-        'touch_app',
-        'toys',
-        'track_changes',
-        'traffic',
-        'train',
-        'tram',
-        'transfer_within_a_station',
-        'transform',
-        'translate',
-        'trending_down',
-        'trending_flat',
-        'trending_up',
-        'tune',
-        'turned_in',
-        'turned_in_not',
-        'tv',
-        'unarchive',
-        'undo',
-        'unfold_less',
-        'unfold_more',
-        'update',
-        'usb',
-        'verified_user',
-        'vertical_align_bottom',
-        'vertical_align_center',
-        'vertical_align_top',
-        'vibration',
-        'video_call',
-        'video_label',
-        'video_library',
-        'videocam',
-        'videocam_off',
-        'videogame_asset',
-        'view_agenda',
-        'view_array',
-        'view_carousel',
-        'view_column',
-        'view_comfy',
-        'view_compact',
-        'view_day',
-        'view_headline',
-        'view_list',
-        'view_module',
-        'view_quilt',
-        'view_stream',
-        'view_week',
-        'vignette',
-        'visibility',
-        'visibility_off',
-        'voice_chat',
-        'voicemail',
-        'volume_down',
-        'volume_mute',
-        'volume_off',
-        'volume_up',
-        'vpn_key',
-        'vpn_lock',
-        'wallpaper',
-        'warning',
-        'watch',
-        'watch_later',
-        'wb_auto',
-        'wb_cloudy',
-        'wb_incandescent',
-        'wb_iridescent',
-        'wb_sunny',
-        'wc',
-        'web',
-        'web_asset',
-        'weekend',
-        'whatshot',
-        'widgets',
-        'wifi',
-        'wifi_lock',
-        'wifi_tethering',
-        'work',
-        'wrap_text',
-        'youtube_searched_for',
-        'zoom_in',
-        'zoom_out',
-        'zoom_out_map'
-    ];
-
-}

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

@@ -1,59 +0,0 @@
-export class InvoiceFakeDb
-{
-    public static invoice = {
-        'from'    : {
-            'title'  : 'Fuse Inc.',
-            'address': '2810 Country Club Road Cranford, NJ 07016',
-            'phone'  : '+66 123 455 87',
-            'email'  : 'hello@fuseinc.com',
-            'website': 'www.fuseinc.com'
-        },
-        'client'  : {
-            'title'  : 'John Doe',
-            'address': '9301 Wood Street Philadelphia, PA 19111',
-            'phone'  : '+55 552 455 87',
-            'email'  : 'johndoe@mail.com'
-        },
-        'number'  : 'P9-0004',
-        'date'    : 'Jul 19, 2015',
-        'dueDate' : 'Aug 24, 2015',
-        'services': [
-            {
-                'title'    : 'Prototype & Design',
-                'detail'   : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus accumsan, quam sed eleifend imperdiet.',
-                'unit'     : 'Hour',
-                'unitPrice': '12.00',
-                'quantity' : '240',
-                'total'    : '2880'
-            },
-            {
-                'title'    : 'Coding',
-                'detail'   : 'Vestibulum ligula sem, rutrum et libero id, porta vehicula metus. Cras dapibus neque sit amet laoreet vestibulum.',
-                'unit'     : 'Hour',
-                'unitPrice': '10.50',
-                'quantity' : '350',
-                'total'    : '3675'
-            },
-            {
-                'title'    : 'Testing',
-                'detail'   : 'Pellentesque luctus efficitur neque in finibus. Integer ut nunc in augue maximus porttitor id id nulla. In vitae erat.',
-                'unit'     : 'Hour',
-                'unitPrice': '4.00',
-                'quantity' : '50',
-                'total'    : '200'
-            },
-            {
-                'title'    : 'Documentation & Training',
-                'detail'   : 'Pellentesque luctus efficitur neque in finibus. Integer ut nunc in augue maximus porttitor id id nulla. In vitae erat.',
-                'unit'     : 'Hour',
-                'unitPrice': '6.50',
-                'quantity' : '260',
-                'total'    : '1690'
-            }
-        ],
-        'subtotal': '8445',
-        'tax'     : '675.60',
-        'discount': '120.60',
-        'total'   : '9000'
-    };
-}

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

@@ -1,481 +0,0 @@
-export class MailFakeDb
-{
-    public static mails = [
-        {
-            'id'            : '15459251a6d6b397565',
-            'from'          : {
-                'name'  : 'Alice Freeman',
-                'avatar': 'assets/images/avatars/alice.jpg',
-                'email' : 'alicefreeman@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '28 Jun',
-            'read'          : false,
-            'starred'       : false,
-            'important'     : true,
-            'hasAttachments': true,
-            'attachments'   : [
-                {
-                    'type'    : 'image',
-                    'fileName': 'flowers',
-                    'preview' : 'assets/images/etc/flowers-thumb.jpg',
-                    'url'     : '',
-                    'size'    : '1.1Mb'
-                },
-                {
-                    'type'    : 'image',
-                    'fileName': 'snow',
-                    'preview' : 'assets/images/etc/snow-thumb.jpg',
-                    'url'     : '',
-                    'size'    : '380kb'
-                },
-                {
-                    'type'    : 'image',
-                    'fileName': 'sunrise',
-                    'preview' : 'assets/images/etc/sunrise-thumb.jpg',
-                    'url'     : 'assets/images/etc/early-sunrise.jpg',
-                    'size'    : '17Mb'
-                }
-            ],
-            'labels'        : [
-                1
-            ],
-            'folder'        : 0
-        },
-        {
-            'id'            : '154588a0864d2881124',
-            'from'          : {
-                'name'  : 'Lawrence Collins',
-                'avatar': 'assets/images/avatars/vincent.jpg',
-                'email' : 'lawrencecollins@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '28 Jun',
-            'read'          : false,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '15453ba60d3baa5daaf',
-            'from'          : {
-                'name'  : 'Judith Burton',
-                'avatar': 'assets/images/avatars/joyce.jpg',
-                'email' : 'judithburton@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '28 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [
-                3,
-                2
-            ],
-            'folder'        : 0
-        },
-        {
-            'id'            : '15453a06c08fb021776',
-            'from'          : {
-                'name'  : 'Danielle Obrien',
-                'avatar': 'assets/images/avatars/danielle.jpg',
-                'email' : 'danielleobrien@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '28 Jun',
-            'read'          : true,
-            'starred'       : true,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [
-                1,
-                3
-            ],
-            'folder'        : 0
-        },
-        {
-            'id'            : '154537435d5b32bf11a',
-            'from'          : {
-                'name'  : 'Brian Flores',
-                'avatar': '',
-                'email' : 'brianflores@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '26 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '1544e43dcdae6ebf876',
-            'from'          : {
-                'name'  : 'Charles Kim',
-                'avatar': 'assets/images/avatars/garry.jpg',
-                'email' : 'charleskim@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '18 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : true,
-            'hasAttachments': false,
-            'labels'        : [
-                2
-            ],
-            'folder'        : 0
-        },
-        {
-            'id'            : '1543ee3a5b43e0f9f45',
-            'from'          : {
-                'name'  : 'Patricia White',
-                'avatar': '',
-                'email' : 'patriciawhite@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '15 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '1543cc4515df3146112',
-            'from'          : {
-                'name'  : 'Juan Carpenter',
-                'avatar': 'assets/images/avatars/james.jpg',
-                'email' : 'juancarpenter@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '11 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '154398a4770d7aaf9a2',
-            'from'          : {
-                'name'  : 'Maria Gilbert',
-                'avatar': 'assets/images/avatars/danielle.jpg',
-                'email' : 'mariagilbert@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '5 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '15438351f87dcd68567',
-            'from'          : {
-                'name'  : 'Tammy Brooks',
-                'avatar': '',
-                'email' : 'tammybrooks@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p>',
-            'time'          : '1 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '1542d75d929a603125',
-            'from'          : {
-                'name'  : 'Kathy Price',
-                'avatar': '',
-                'email' : 'kathyprice@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
-            'time'          : '1 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '1541ca7af66da284177',
-            'from'          : {
-                'name'  : 'Alan Coleman',
-                'avatar': '',
-                'email' : 'alancoleman@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
-            'time'          : '28 June',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '154297167e781781745',
-            'from'          : {
-                'name'  : 'Thomas Silva',
-                'avatar': '',
-                'email' : 'thomassilva@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
-            'time'          : '16 Jun',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 0
-        },
-        {
-            'id'            : '15427f4c1b7f3953234',
-            'from'          : {
-                'name'  : 'Jessica Robertson',
-                'avatar': '',
-                'email' : 'jessicarobertson@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
-            'time'          : '19 May',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 3
-        },
-        {
-            'id'            : '154204e45a59b168453',
-            'from'          : {
-                'name'  : 'John Palmer',
-                'avatar': '',
-                'email' : 'johnpalmer@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
-            'time'          : '8 May',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 3
-        },
-        {
-            'id'            : '1541dd1e05dfc439216',
-            'from'          : {
-                'name'  : 'David Butler',
-                'avatar': '',
-                'email' : 'davidbutler@creapond.com'
-            },
-            'to'            : [
-                {
-                    'name' : 'me',
-                    'email': 'johndoe@creapond.com'
-                }
-            ],
-            'subject'       : 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'message'       : '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem diam, pulvinar id nisl non, ultrices maximus nibh. Suspendisse ut justo velit. Nullam ac ultrices risus, quis auctor orci. Vestibulum volutpat nisi et neque porta ullamcorper. Maecenas porttitor porta erat ac suscipit. Sed cursus leo ut elementum fringilla. Maecenas semper viverra erat, vel ullamcorper dui efficitur in. Vestibulum placerat imperdiet tellus, et tincidunt eros posuere eget. Proin sit amet facilisis libero. Nulla eget est ut erat aliquet rhoncus. Quisque ac urna vitae dui hendrerit sollicitudin vel id sem. </p><p> In eget ante sapien. Quisque consequat velit non ante finibus, vel placerat erat ultricies. Aliquam bibendum justo erat, ultrices vehicula dolor elementum a. Mauris eu nisl feugiat ligula molestie eleifend. Aliquam efficitur venenatis velit ac porta. Vivamus vitae pulvinar tellus. Donec odio enim, auctor eget nibh mattis, ultricies dignissim lacus. Phasellus non tincidunt dui. Nulla eu arcu lorem. </p><p> Donec non hendrerit augue, lobortis sollicitudin odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis sit amet euismod enim, eget vestibulum justo. Fusce a placerat lectus, eget feugiat purus. Cras risus ante, faucibus eget justo commodo, volutpat tempor ante. Donec sit amet leo venenatis, gravida quam sit amet, blandit dui. In quam ante, elementum ut faucibus nec, tristique vitae dui. Praesent vel erat at enim placerat luctus vel ut ipsum. In congue tempor mi, non ornare lectus condimentum at. Aenean libero diam, finibus eget sapien et, tristique fermentum lorem. </p> ',
-            'time'          : '7 May',
-            'read'          : true,
-            'starred'       : false,
-            'important'     : false,
-            'hasAttachments': false,
-            'labels'        : [],
-            'folder'        : 3
-        }
-    ];
-
-    public static folders = [
-        {
-            'id'    : 0,
-            'handle': 'inbox',
-            'title' : 'Inbox',
-            'icon'  : 'inbox'
-        },
-        {
-            'id'    : 1,
-            'handle': 'sent',
-            'title' : 'Sent',
-            'icon'  : 'send'
-        },
-        {
-            'id'    : 2,
-            'handle': 'drafts',
-            'title' : 'Drafts',
-            'icon'  : 'email_open'
-        },
-        {
-            'id'    : 3,
-            'handle': 'spam',
-            'title' : 'Spam',
-            'icon'  : 'error'
-        },
-        {
-            'id'    : 4,
-            'handle': 'trash',
-            'title' : 'Trash',
-            'icon'  : 'delete'
-        }
-    ];
-
-    public static filters = [
-        {
-            'id'    : 0,
-            'handle': 'starred',
-            'title' : 'Starred',
-            'icon'  : 'star'
-        },
-        {
-            'id'    : 1,
-            'handle': 'important',
-            'title' : 'Important',
-            'icon'  : 'label'
-        }
-    ];
-
-    public static labels = [
-        {
-            'id'    : 0,
-            'handle': 'note',
-            'title' : 'Note',
-            'color' : '#7cb342'
-        },
-        {
-            'id'    : 1,
-            'handle': 'paypal',
-            'title' : 'Paypal',
-            'color' : '#d84315'
-        },
-        {
-            'id'    : 2,
-            'handle': 'invoice',
-            'title' : 'Invoice',
-            'color' : '#607d8b'
-        },
-        {
-            'id'    : 3,
-            'handle': 'amazon',
-            'title' : 'Amazon',
-            'color' : '#03a9f4'
-        }
-    ];
-}

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

@@ -1,360 +0,0 @@
-export class ProfileFakeDb
-{
-    public static timeline = {
-        activities: [
-            {
-                'user'   : {
-                    'name'  : 'Alice Freeman',
-                    'avatar': 'assets/images/avatars/alice.jpg'
-                },
-                'message': 'started following you.',
-                'time'   : '13 mins. ago'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Andrew Green',
-                    'avatar': 'assets/images/avatars/andrew.jpg'
-                },
-                'message': 'sent you a message.',
-                'time'   : 'June 10,2015'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Garry Newman',
-                    'avatar': 'assets/images/avatars/garry.jpg'
-                },
-                'message': 'shared a public post with your group.',
-                'time'   : 'June 9,2015'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Carl Henderson',
-                    'avatar': 'assets/images/avatars/carl.jpg'
-                },
-                'message': 'wants to play Fallout Shelter with you.',
-                'time'   : 'June 8,2015'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Jane Dean',
-                    'avatar': 'assets/images/avatars/jane.jpg'
-                },
-                'message': 'started following you.',
-                'time'   : 'June 7,2015'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Juan Carpenter',
-                    'avatar': 'assets/images/avatars/james.jpg'
-                },
-                'message': 'sent you a message.',
-                'time'   : 'June 6,2015'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Judith Burton',
-                    'avatar': 'assets/images/avatars/joyce.jpg'
-                },
-                'message': 'shared a photo with you.',
-                'time'   : 'June 5,2015'
-            },
-            {
-                'user'   : {
-                    'name'  : 'Vincent Munoz',
-                    'avatar': 'assets/images/avatars/vincent.jpg'
-                },
-                'message': 'shared a photo with you.',
-                'time'   : 'June 4,2015'
-            }
-        ],
-        posts     : [
-            {
-                'user'    : {
-                    'name'  : 'Garry Newman',
-                    'avatar': 'assets/images/avatars/garry.jpg'
-                },
-                'message' : 'Remember the place we were talking about the other night? Found it!',
-                'time'    : '32 minutes ago',
-                'type'    : 'post',
-                'like'    : 5,
-                'share'   : 21,
-                'media'   : {
-                    'type'   : 'image',
-                    'preview': 'assets/images/etc/early-sunrise.jpg'
-                },
-                'comments': [
-                    {
-                        'user'   : {
-                            'name'  : 'Alice Freeman',
-                            'avatar': 'assets/images/avatars/alice.jpg'
-                        },
-                        'time'   : 'June 10, 2015',
-                        'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
-                    }
-                ]
-            },
-            {
-                'user'    : {
-                    'name'  : 'Andrew Green',
-                    'avatar': 'assets/images/avatars/andrew.jpg'
-                },
-                'message' : 'Hey, man! Check this, it’s pretty awesome!',
-                'time'    : 'June 12, 2015',
-                'type'    : 'article',
-                'like'    : 98,
-                'share'   : 6,
-                'article' : {
-                    'title'   : 'The Fallout 4 Pip-Boy Edition Is Back In Stock Now',
-                    'subtitle': 'Kotaku',
-                    'excerpt' : 'The Fallout 4 Pip-Boy edition is back in stock at Gamestop, for all 3 platforms. Additionally, Walmart also has it in stock for the PS4 and Xbox One as of this writing, as does Best Buy.',
-                    'media'   : {
-                        'type'   : 'image',
-                        'preview': 'assets/images/etc/fallout.jpg'
-                    }
-                },
-                'comments': [
-                    {
-                        'user'   : {
-                            'name'  : 'Alice Freeman',
-                            'avatar': 'assets/images/avatars/alice.jpg'
-                        },
-                        'time'   : 'June 10, 2015',
-                        'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
-                    }
-                ]
-            },
-            {
-                'user'   : {
-                    'name'  : 'Carl Henderson',
-                    'avatar': 'assets/images/avatars/carl.jpg'
-                },
-                'message': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat. Aenean lorem ex, ultrices sit amet ligula sed...',
-                'time'   : 'June 10, 2015',
-                'type'   : 'something',
-                'like'   : 4,
-                'share'  : 1
-            }
-        ]
-    };
-
-    public static photosVideos = [
-        {
-            'name' : 'June 2015',
-            'info' : '5 Photos',
-            'media': [
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
-                }
-            ]
-        },
-        {
-            'name' : 'May 2015',
-            'info' : '7 Photos, 3 Videos',
-            'media': [
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
-                }
-            ]
-        },
-        {
-            'name' : 'April 2015',
-            'info' : '5 Photos',
-            'media': [
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Cactus',
-                    'preview': 'assets/images/etc/cactus.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Road Trip',
-                    'preview': 'assets/images/etc/road-trip.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
-                },
-                {
-                    'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
-                }
-            ]
-        }
-    ];
-
-    public static about = {
-        'general': {
-            'gender'   : 'Female',
-            'birthday' : 'May 8th, 1988',
-            'locations': [
-                'Istanbul, Turkey',
-                'New York, USA'
-            ],
-            'about'    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget pharetra felis, sed ullamcorper dui. Sed et elementum neque. Vestibulum pellente viverra ultrices. Etiam justo augue, vehicula ac gravida a, interdum sit amet nisl. Integer vitae nisi id nibh dictum mollis in vitae tortor.'
-        },
-        'work'   : {
-            'occupation': 'Developer',
-            'skills'    : 'C#, PHP, Javascript, Angular, JS, HTML, CSS',
-            'jobs'      : [
-                {
-                    'company': 'Self-Employed',
-                    'date'   : '2010 - Now'
-                },
-                {
-                    'company': 'Google',
-                    'date'   : '2008 - 2010'
-                }
-            ]
-        },
-        'contact': {
-            'address' : 'Ut pharetra luctus est quis sodales. Duis nisi tortor, bibendum eget tincidunt, aliquam ac elit. Mauris nec euismod odio.',
-            'tel'     : [
-                '+6 555 6600',
-                '+9 555 5255'
-            ],
-            'websites': [
-                'withinpixels.com'
-            ],
-            'emails'  : [
-                'mail@withinpixels.com',
-                'mail@creapond.com'
-            ]
-        },
-        'groups' : [
-            {
-                'logo'    : 'assets/images/logos/android.png',
-                'name'    : 'Android',
-                'category': 'Technology',
-                'members' : '1.856.546'
-            },
-            {
-                'logo'    : 'assets/images/logos/google.png',
-                'name'    : 'Google',
-                'category': 'Web',
-                'members' : '1.226.121'
-            },
-            {
-                'logo'    : 'assets/images/logos/fallout.png',
-                'name'    : 'Fallout',
-                'category': 'Games',
-                'members' : '526.142'
-            }
-        ],
-        'friends': [
-            {
-                'name'  : 'Garry Newman',
-                'avatar': 'assets/images/avatars/garry.jpg'
-            },
-            {
-                'name'  : 'Carl Henderson',
-                'avatar': 'assets/images/avatars/carl.jpg'
-            },
-            {
-                'name'  : 'Jane Dean',
-                'avatar': 'assets/images/avatars/jane.jpg'
-            },
-            {
-                'name'  : 'Garry Arnold',
-                'avatar': 'assets/images/avatars/garry.jpg'
-            },
-            {
-                'name'  : 'Vincent Munoz',
-                'avatar': 'assets/images/avatars/vincent.jpg'
-            },
-            {
-                'name'  : 'Alice Freeman',
-                'avatar': 'assets/images/avatars/alice.jpg'
-            },
-            {
-                'name'  : 'Andrew Green',
-                'avatar': 'assets/images/avatars/andrew.jpg'
-            }
-        ]
-    };
-}

src/app/fuse-fake-db/quick-panel.ts

@@ -1,32 +0,0 @@
-export class QuickPanelFakeDb
-{
-    public static notes = [
-        {
-            'title' : 'Best songs to listen while working',
-            'detail': 'Last edit: May 8th, 2015'
-        },
-        {
-            'title' : 'Useful subreddits',
-            'detail': 'Last edit: January 12th, 2015'
-        }
-    ];
-
-    public static events = [
-        {
-            'title' : 'Group Meeting',
-            'detail': 'In 32 Minutes, Room 1B'
-        },
-        {
-            'title' : 'Public Beta Release',
-            'detail': '11:00 PM'
-        },
-        {
-            'title' : 'Dinner with David',
-            'detail': '17:30 PM'
-        },
-        {
-            'title' : 'Q&A Session',
-            'detail': '20:30 PM'
-        }
-    ];
-}

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

@@ -1,139 +0,0 @@
-export class SearchFakeDb
-{
-    public static classic = [
-        {
-            'title'  : 'Dynamically Procrastinate B2C',
-            'url'    : 'ourwebaddress.com/articles/procrastinate',
-            'excerpt': 'Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.'
-        },
-        {
-            'title'  : 'Cross Media',
-            'url'    : 'ourwebaddress.com/articles/cross-media',
-            'excerpt': 'Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.'
-        },
-        {
-            'title'  : 'Synergize',
-            'url'    : 'ourwebaddress.com/articles/synergize',
-            'excerpt': 'Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.'
-        },
-        {
-            'title'  : 'Parallel Platforms',
-            'url'    : 'ourwebaddress.com/articles/parallel-paltforms',
-            'excerpt': 'Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains.'
-        },
-        {
-            'title'  : 'Growth Strategies',
-            'url'    : 'ourwebaddress.com/articles/growth-strategies',
-            'excerpt': 'Proactively envisioned multimedia based expertise and cross-media growth strategies. Holistically pontificate installed base portals after maintainable products.'
-        },
-        {
-            'title'  : 'Methodologies',
-            'url'    : 'ourwebaddress.com/articles/methodologies',
-            'excerpt': 'Phosfluorescently engage worldwide methodologies with web-enabled technology. Completely pursue scalable customer service through sustainable potentialities.'
-        },
-        {
-            'title'  : 'E-tailers',
-            'url'    : 'ourwebaddress.com/articles/e-trailers',
-            'excerpt': 'Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services.'
-        },
-        {
-            'title'  : 'Web Readiness',
-            'url'    : 'ourwebaddress.com/articles/web-readiness',
-            'excerpt': 'Credibly innovate granular internal or organic sources whereas high standards in web-readiness. Dramatically synthesize integrated schemas with optimal networks.'
-        }
-    ];
-
-    public static table = [
-        {
-            'name'     : 'Airi Satou',
-            'position' : 'Accountant',
-            'office'   : 'Tokyo',
-            'age'      : '33',
-            'startDate': '2008/11/28',
-            'salary'   : '162700',
-            'email'    : 'a.satou@mail.com'
-        },
-        {
-            'name'     : 'Angellica Ramos',
-            'position' : 'Chief Executive Officer (CEO)',
-            'office'   : 'London',
-            'age'      : '47',
-            'startDate': '2009/10/09',
-            'salary'   : '1200000',
-            'email'    : 'a.ramos@mail.com'
-        },
-        {
-            'name'     : 'Ashton Cox',
-            'position' : 'Hunior Technical Author',
-            'office'   : 'San Fransisco',
-            'age'      : '66',
-            'startDate': '2009/01/12',
-            'salary'   : '86000',
-            'email'    : 'a.cox@mail.com'
-        },
-        {
-            'name'     : 'Bradley Greer',
-            'position' : 'Software Engineer',
-            'office'   : 'London',
-            'age'      : '41',
-            'startDate': '2012/10/13',
-            'salary'   : '132000',
-            'email'    : 'b.greer@mail.com'
-        },
-        {
-            'name'     : 'Brenden Wagner',
-            'position' : 'Software Engineer',
-            'office'   : 'San Fransisco',
-            'age'      : '28',
-            'startDate': '2011/06/07',
-            'salary'   : '206850',
-            'email'    : 'b.wagner@mail.com'
-        },
-        {
-            'name'     : 'Brielle Williamson',
-            'position' : 'Integration Specialist',
-            'office'   : 'New York',
-            'age'      : '61',
-            'startDate': '2012/12/02',
-            'salary'   : '372000',
-            'email'    : 'b.williamson@mail.com'
-        },
-        {
-            'name'     : 'Bruno Nash',
-            'position' : 'Software Engineer',
-            'office'   : 'London',
-            'age'      : '38',
-            'startDate': '2011/05/03',
-            'salary'   : '163500',
-            'email'    : 'b.nash@mail.com'
-        },
-        {
-            'name'     : 'Caesar Vance',
-            'position' : 'Pre-Sales Support',
-            'office'   : 'New York',
-            'age'      : '21',
-            'startDate': '2011/12/12',
-            'salary'   : '106450',
-            'email'    : 'c.vance@mail.com'
-        },
-        {
-            'name'     : 'Cara Stevens',
-            'position' : 'Sales Assistant',
-            'office'   : 'New York',
-            'age'      : '46',
-            'startDate': '2011/12/06',
-            'salary'   : '145600',
-            'email'    : 'c.stevens@mail.com'
-        },
-        {
-            'name'     : 'Cedric Kelly',
-            'position' : 'Senior Javascript Developer',
-            'office'   : 'Edinburg',
-            'age'      : '22',
-            'startDate': '2012/03/29',
-            'salary'   : '433060',
-            'email'    : 'c.kelly@mail.com'
-        }
-    ];
-
-}

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

@@ -1,324 +0,0 @@
-export class TodoFakeDb
-{
-    public static todos = [
-        {
-            'id'       : '561551bd7fe2ff461101c192',
-            'title'    : 'Proident tempor est nulla irure ad est',
-            'notes'    : 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.',
-            'startDate': 'Wednesday, January 29, 2014 3:17 PM',
-            'dueDate'  : null,
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [1]
-        },
-        {
-            'id'       : '561551bd4ac1e7eb77a3a750',
-            'title'    : 'Magna quis irure quis ea pariatur laborum',
-            'notes'    : '',
-            'startDate': 'Sunday, February 1, 2015 1:30 PM',
-            'dueDate'  : 'Friday, December 30, 2016 10:07 AM',
-            'completed': false,
-            'starred'  : false,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [1, 4]
-        },
-        {
-            'id'       : '561551bd917bfec2ddef2d49',
-            'title'    : 'Ullamco duis commodo sint ad aliqua aute',
-            'notes'    : 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.',
-            'startDate': 'Friday, April 11, 2014 3:43 AM',
-            'dueDate'  : 'Wednesday, July 26, 2017 11:14 AM',
-            'completed': false,
-            'starred'  : true,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [3]
-        },
-        {
-            'id'       : '561551bdeeb2fd6877e18c29',
-            'title'    : 'Eiusmod non occaecat pariatur Lorem in ex',
-            'notes'    : 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.',
-            'startDate': 'Wednesday, May 7, 2014 4:14 AM',
-            'dueDate'  : 'Friday, December 15, 2017 4:01 AM',
-            'completed': true,
-            'starred'  : true,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [2]
-        },
-        {
-            'id'       : '561551bdf38eae0134ae43d4',
-            'title'    : 'Lorem magna cillum consequat consequat mollit',
-            'notes'    : 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.',
-            'startDate': 'Sunday, August 23, 2015 11:19 PM',
-            'dueDate'  : 'Friday, July 8, 2016 10:49 AM',
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [5, 4]
-        },
-        {
-            'id'       : '561551bd32f1588c814a0ccd',
-            'title'    : 'Quis irure cupidatat ad consequat reprehenderit excepteur',
-            'notes'    : 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.',
-            'startDate': 'Sunday, June 7, 2015 10:49 AM',
-            'dueDate'  : 'Monday, January 9, 2017 8:34 AM',
-            'completed': false,
-            'starred'  : true,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [2, 3]
-        },
-        {
-            'id'       : '561551bd0bb4b08ca77038ef',
-            'title'    : 'Officia voluptate tempor ut mollit ea cillum',
-            'notes'    : 'Deserunt veniam reprehenderit do elit magna ut.',
-            'startDate': 'Saturday, October 18, 2014 4:25 AM',
-            'dueDate'  : 'Sunday, August 21, 2016 10:48 PM',
-            'completed': true,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [2, 4]
-        },
-        {
-            'id'       : '561551bdf84eec913835ebe5',
-            'title'    : 'Sit exercitation cupidatat minim est ipsum excepteur',
-            'notes'    : '',
-            'startDate': 'Friday, August 8, 2014 5:45 AM',
-            'dueDate'  : 'Wednesday, June 15, 2016 1:53 PM',
-            'completed': true,
-            'starred'  : false,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [1, 3]
-        },
-        {
-            'id'       : '561551bd2047cc709af0f670',
-            'title'    : 'Sunt fugiat officia nisi minim sunt duis',
-            'notes'    : 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.',
-            'startDate': 'Monday, July 13, 2015 1:55 PM',
-            'dueDate'  : 'Thursday, March 3, 2016 2:26 PM',
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [
-                {
-                    'id'   : 5,
-                    'name' : 'mobile',
-                    'label': 'Mobile',
-                    'color': '#9C27B0'
-                }
-            ]
-        },
-        {
-            'id'       : '561551bd73d1a627e97005ce',
-            'title'    : 'Non cupidatat enim quis aliquip minim laborum',
-            'notes'    : 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.',
-            'startDate': 'Tuesday, November 11, 2014 6:36 PM',
-            'dueDate'  : 'Tuesday, August 9, 2016 7:18 AM',
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [2]
-        },
-        {
-            'id'       : '561551bd8f7d793ded0a2353',
-            'title'    : 'Dolor ex occaecat magna labore laboris qui',
-            'notes'    : 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.',
-            'startDate': 'Monday, June 9, 2014 3:15 PM',
-            'dueDate'  : 'Wednesday, October 19, 2016 3:38 PM',
-            'completed': false,
-            'starred'  : false,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [3]
-        },
-        {
-            'id'       : '561551bdaa586f72d0be02cc',
-            'title'    : 'Ex nisi amet id dolore nostrud esse',
-            'notes'    : '',
-            'startDate': 'Thursday, January 15, 2015 6:11 PM',
-            'dueDate'  : 'Sunday, August 20, 2017 10:02 AM',
-            'completed': false,
-            'starred'  : true,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [4]
-        },
-        {
-            'id'       : '561551bd9f1c2de5b27f537b',
-            'title'    : 'In dolor velit labore dolore ex eiusmod',
-            'notes'    : '',
-            'startDate': 'Monday, March 10, 2014 12:50 AM',
-            'dueDate'  : 'Thursday, January 26, 2017 3:10 PM',
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [4]
-        },
-        {
-            'id'       : '561551bd26e21bb5e85b35cb',
-            'title'    : 'Sunt voluptate aliquip exercitation minim magna sit',
-            'notes'    : '',
-            'startDate': 'Tuesday, March 24, 2015 10:54 PM',
-            'dueDate'  : 'Wednesday, August 23, 2017 5:35 PM',
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [4]
-        },
-        {
-            'id'       : '561551bd719860cf0ad2011a',
-            'title'    : 'Nisi et ullamco minim ea proident tempor',
-            'notes'    : 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.',
-            'startDate': 'Friday, February 14, 2014 10:03 AM',
-            'dueDate'  : 'Saturday, July 8, 2017 11:54 PM',
-            'completed': false,
-            'starred'  : true,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [2, 4]
-        },
-        {
-            'id'       : '561551bd49d800c243264a91',
-            'title'    : 'Sit ipsum mollit cupidatat adipisicing officia aliquip',
-            'notes'    : '',
-            'startDate': 'Wednesday, December 10, 2014 9:25 AM',
-            'dueDate'  : 'Friday, March 25, 2016 12:29 AM',
-            'completed': true,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [1]
-        },
-        {
-            'id'       : '561551bd061990eaf40fb64f',
-            'title'    : 'Amet sunt et quis amet commodo quis',
-            'notes'    : 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.',
-            'startDate': 'Saturday, March 1, 2014 3:59 PM',
-            'dueDate'  : 'Saturday, November 7, 2015 2:00 PM',
-            'completed': false,
-            'starred'  : false,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [1]
-        },
-        {
-            'id'       : '561551be81d05fa94711e7f3',
-            'title'    : 'Ut eiusmod ex ea eiusmod culpa incididunt',
-            'notes'    : 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.',
-            'startDate': 'Monday, February 2, 2015 3:07 PM',
-            'dueDate'  : 'Saturday, October 14, 2017 6:57 AM',
-            'completed': false,
-            'starred'  : false,
-            'important': false,
-            'deleted'  : false,
-            'tags'     : [2]
-        },
-        {
-            'id'       : '561551be05c093a80e0c8d05',
-            'title'    : 'Proident reprehenderit laboris pariatur ut et nisi',
-            'notes'    : 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.',
-            'startDate': 'Sunday, June 14, 2015 4:40 AM',
-            'dueDate'  : 'Wednesday, February 10, 2016 10:47 AM',
-            'completed': true,
-            'starred'  : true,
-            'important': true,
-            'deleted'  : false,
-            'tags'     : [5]
-        },
-        {
-            'id'       : '561551be3bb43a5bd431c2fc',
-            'title'    : 'Aliqua aliquip aliquip aliquip et exercitation aute',
-            'notes'    : 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.',
-            'startDate': 'Saturday, May 3, 2014 1:32 AM',
-            'dueDate'  : 'Monday, September 12, 2016 9:16 PM',
-            'completed': true,
-            'starred'  : false,
-            'important': true,
-            'deleted'  : true,
-            'tags'     : [3]
-        }
-    ];
-
-    public static filters = [
-        {
-            'id'    : 0,
-            'handle': 'starred',
-            'title' : 'Starred',
-            'icon'  : 'star'
-        },
-        {
-            'id'    : 1,
-            'handle': 'important',
-            'title' : 'Priority',
-            'icon'  : 'error'
-        },
-        {
-            'id'    : 2,
-            'handle': 'dueDate',
-            'title' : 'Sheduled',
-            'icon'  : 'schedule'
-        },
-        {
-            'id'    : 3,
-            'handle': 'today',
-            'title' : 'Today',
-            'icon'  : 'today'
-        },
-        {
-            'id'    : 4,
-            'handle': 'completed',
-            'title' : 'Done',
-            'icon'  : 'check'
-        },
-        {
-            'id'    : 4,
-            'handle': 'deleted',
-            'title' : 'Deleted',
-            'icon'  : 'delete'
-        }
-    ];
-
-    public static tags = [
-        {
-            'id'    : 1,
-            'handle': 'frontend',
-            'title' : 'Frontend',
-            'color' : '#388E3C'
-        },
-        {
-            'id'    : 2,
-            'handle': 'backend',
-            'title' : 'Backend',
-            'color' : '#F44336'
-        },
-        {
-            'id'    : 3,
-            'handle': 'api',
-            'title' : 'API',
-            'color' : '#FF9800'
-        },
-        {
-            'id'    : 4,
-            'handle': 'issue',
-            'title' : 'Issue',
-            'color' : '#0091EA'
-        },
-        {
-            'id'    : 5,
-            'handle': 'mobile',
-            'title' : 'Mobile',
-            'color' : '#9C27B0'
-        }
-    ];
-}

src/app/main/content/apps/calendar/calendar.component.html

@@ -1,125 +0,0 @@
-<div id="calendar" class="page-layout simple fullwidth" perfect-scrollbar>
-
-    <!-- HEADER -->
-    <div class="header" [ngClass]="viewDate | date:'MMM'">
-
-        <div class="header-content" fxLayout="column" fxLayoutAlign="space-between">
-
-            <div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">
-
-                <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
-
-                    <md-icon class="logo-icon">today</md-icon>
-
-                    <span class="logo-text">Calendar</span>
-
-                </div>
-
-                <!-- TOOLBAR -->
-                <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
-
-                    <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
-                        <md-icon>search</md-icon>
-                    </button>
-
-                    <button md-button class="mat-icon-button"
-                            mwlCalendarToday
-                            [(viewDate)]="viewDate"
-                            (viewDateChange)="selectedDay = {date:$event}"
-                            aria-label="Today" md-tooltip="Today">
-                        <!--(click)="selectedDay = viewDate"-->
-                        <md-icon>today</md-icon>
-                    </button>
-
-                    <button md-button class="mat-icon-button" (click)="view='day'"
-                            aria-label="Day" md-tooltip="Day">
-                        <md-icon>view_day</md-icon>
-                    </button>
-
-                    <button md-button class="mat-icon-button" (click)="view='week'"
-                            aria-label="Week" md-tooltip="Week">
-                        <md-icon>view_week</md-icon>
-                    </button>
-
-                    <button md-button class="mat-icon-button" (click)="view='month'"
-                            aria-label="Month" md-tooltip="Month">
-                        <md-icon>view_module</md-icon>
-                    </button>
-                </div>
-            </div>
-            <!-- / TOOLBAR -->
-
-            <!-- HEADER BOTTOM -->
-            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center">
-
-                <button md-button class="mat-icon-button arrow"
-                        mwlCalendarPreviousView
-                        [view]="view"
-                        [(viewDate)]="viewDate"
-                        (viewDateChange)="selectedDay = {date:$event}"
-                        aria-label="Previous">
-                    <md-icon>chevron_left</md-icon>
-                </button>
-
-                <div class="title">
-                    {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
-                </div>
-
-                <button md-button class="mat-icon-button arrow"
-                        mwlCalendarNextView
-                        [view]="view"
-                        [(viewDate)]="viewDate"
-                        (viewDateChange)="selectedDay = {date:$event}"
-                        aria-label="Next">
-                    <md-icon>chevron_right</md-icon>
-                </button>
-            </div>
-            <!-- / HEADER BOTTOM -->
-        </div>
-
-        <!-- ADD EVENT BUTTON -->
-        <button md-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event">
-            <md-icon>add</md-icon>
-        </button>
-        <!-- / ADD EVENT BUTTON -->
-    </div>
-    <!-- / HEADER -->
-
-    <!-- CONTENT -->
-    <div class="content" perfect-scrollbar>
-        <div [ngSwitch]="view">
-            <mwl-calendar-month-view
-                *ngSwitchCase="'month'"
-                [viewDate]="viewDate"
-                [events]="events"
-                [refresh]="refresh"
-                [activeDayIsOpen]="activeDayIsOpen"
-                (dayClicked)="dayClicked($event.day)"
-                (eventClicked)="editEvent('edit', $event.event)"
-                (eventTimesChanged)="eventTimesChanged($event)"
-                (beforeViewRender)="beforeMonthViewRender($event)">
-            </mwl-calendar-month-view>
-            <mwl-calendar-week-view
-                *ngSwitchCase="'week'"
-                [viewDate]="viewDate"
-                (viewDateChange)="selectedDay = {date:$event}"
-                [events]="events"
-                [refresh]="refresh"
-                (dayClicked)="dayClicked($event.day)"
-                (eventClicked)="editEvent('edit', $event.event)"
-                (eventTimesChanged)="eventTimesChanged($event)">
-            </mwl-calendar-week-view>
-            <mwl-calendar-day-view
-                *ngSwitchCase="'day'"
-                [viewDate]="viewDate"
-                (viewDateChange)="selectedDay = {date:$event}"
-                [events]="events"
-                [refresh]="refresh"
-                (dayClicked)="dayClicked($event.day)"
-                (eventClicked)="editEvent('edit', $event.event)"
-                (eventTimesChanged)="eventTimesChanged($event)">
-            </mwl-calendar-day-view>
-        </div>
-    </div>
-    <!-- / CONTENT -->
-</div>

src/app/main/content/apps/calendar/calendar.component.scss

@@ -1,307 +0,0 @@
-@import "src/app/core/scss/fuse";
-@import "node_modules/angular-calendar/scss/angular-calendar";
-
-.cal-month-view {
-
-    .cal-header {
-
-        .cal-cell {
-            font-weight: 500;
-        }
-    }
-
-    .cal-day-cell {
-
-        @include media-breakpoint(lg) {
-            min-height: 150px;
-        }
-
-        @include media-breakpoint(gt-lg) {
-            min-height: 200px;
-        }
-
-        &.cal-open {
-            @include mat-elevation(3);
-        }
-    }
-
-    .cal-open-day-events {
-        background: whitesmoke;
-        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-
-        > div {
-            padding: 0 16px;
-            margin: 8px 16px;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: start;
-            background-color: white;
-            @include mat-elevation(1);
-            transition: box-shadow 300ms ease;
-
-            &:first-of-type {
-                margin-top: 24px;
-            }
-
-            &:last-of-type {
-                margin-bottom: 24px;
-            }
-
-            &:hover {
-                @include mat-elevation(3);
-            }
-
-            .cal-event {
-                top: 0;
-                margin: 0;
-            }
-
-            mwl-calendar-event-title {
-                flex: 1;
-
-                .cal-event-title {
-                    display: block;
-                    padding: 21px 24px;
-                    line-height: 1;
-                    text-decoration: none;
-                    color: black;
-                }
-            }
-
-            mwl-calendar-event-actions {
-
-                .cal-event-actions {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-
-                    .cal-event-action {
-                        display: block;
-                        line-height: 1;
-                        padding: 8px;
-                    }
-                }
-            }
-
-        }
-    }
-}
-
-.cal-week-view {
-
-    .cal-header > b {
-        font-weight: 500;
-    }
-
-    .cal-event {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        mwl-calendar-event-title {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            flex: 1;
-            order: 0;
-
-            .cal-event-title {
-                display: block;
-                //padding: 21px 24px;
-                line-height: 1;
-                text-decoration: none;
-                color: black;
-            }
-        }
-
-        mwl-calendar-event-actions {
-            order: 1;
-
-            .cal-event-actions {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-
-                .cal-event-action {
-                    display: block;
-                    line-height: 1;
-                    padding: 8px;
-                }
-            }
-        }
-    }
-}
-
-.cal-day-view {
-
-    .cal-time {
-        font-weight: 500;
-    }
-
-    .cal-event {
-        display: flex;
-        flex-direction: row;
-
-        mwl-calendar-event-title {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            flex: 1;
-            order: 0;
-
-            .cal-event-title {
-                display: block;
-                height: 26px;
-                line-height: 26px;
-                text-decoration: none;
-                color: black;
-            }
-        }
-
-        mwl-calendar-event-actions {
-            order: 1;
-
-            .cal-event-actions {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-
-                .cal-event-action {
-                    display: block;
-                    line-height: 1;
-                    padding: 4px;
-                }
-            }
-        }
-    }
-}
-
-#calendar {
-    background: #FFFFFF;
-
-    .header {
-        height: 200px;
-        min-height: 200px;
-        max-height: 200px;
-        padding: 24px;
-        position: relative;
-        background-size: 100% auto;
-        background-position: 0 50%;
-        background-repeat: no-repeat;
-        background-color: #FAFAFA;
-        color: #FFFFFF;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: 1;
-            background: rgba(0, 0, 0, 0.45);
-        }
-
-        &.Jan {
-            background-image: url('/assets/images/backgrounds/january.jpg');
-            background-position: 0 45%;
-        }
-        &.Feb {
-            background-image: url('/assets/images/backgrounds/february.jpg');
-            background-position: 0 50%;
-        }
-        &.Mar {
-            background-image: url('/assets/images/backgrounds/march.jpg');
-            background-position: 0 45%;
-        }
-        &.Apr {
-            background-image: url('/assets/images/backgrounds/april.jpg');
-            background-position: 0 48%;
-        }
-        &.May {
-            background-image: url('/assets/images/backgrounds/may.jpg');
-            background-position: 0 47%;
-        }
-        &.Jun {
-            background-image: url('/assets/images/backgrounds/june.jpg');
-            background-position: 0 48%;
-        }
-        &.Jul {
-            background-image: url('/assets/images/backgrounds/july.jpg');
-            background-position: 0 3%;
-        }
-        &.Aug {
-            background-image: url('/assets/images/backgrounds/august.jpg');
-            background-position: 0 61%;
-        }
-        &.Sep {
-            background-image: url('/assets/images/backgrounds/september.jpg');
-            background-position: 0 58%;
-        }
-        &.Oct {
-            background-image: url('/assets/images/backgrounds/october.jpg');
-            background-position: 0 50%;
-        }
-        &.Nov {
-            background-image: url('/assets/images/backgrounds/november.jpg');
-            background-position: 0 46%;
-        }
-        &.Dec {
-            background-image: url('/assets/images/backgrounds/december.jpg');
-            background-position: 0 43%;
-        }
-
-        .header-content {
-            height: 100%;
-
-            .header-top {
-                position: relative;
-                z-index: 2;
-
-                .logo {
-
-                    .logo-icon {
-                        margin-right: 16px;
-                    }
-
-                    .logo-text {
-                        font-size: 24px;
-                    }
-                }
-            }
-
-            .header-bottom {
-                position: relative;
-                z-index: 2;
-
-                .title {
-                    font-size: 20px;
-                    min-width: 160px;
-                    text-align: center;
-                    font-weight: 500;
-                }
-            }
-        }
-
-        .add-event-button {
-            position: absolute;
-            right: 18px;
-            bottom: -32px;
-            z-index: 10;
-        }
-
-        md-icon {
-            color: #FFFFFF;
-        }
-    }
-
-    .content {
-        padding: 24px;
-    }
-}

src/app/main/content/apps/calendar/calendar.component.ts

@@ -1,267 +0,0 @@
-import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { MdDialog, MdDialogRef } from '@angular/material';
-import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
-import { FormGroup } from '@angular/forms';
-import { CalendarEventModel } from './event.model';
-import { CalendarService } from './calendar.service';
-import {
-    CalendarEvent,
-    CalendarEventAction,
-    CalendarEventTimesChangedEvent,
-    CalendarMonthViewDay
-} from 'angular-calendar';
-import { FuseConfirmDialogComponent } from '../../../../core/components/confirm-dialog/confirm-dialog.component';
-
-@Component({
-    selector       : 'fuse-calendar',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl    : './calendar.component.html',
-    styleUrls      : ['./calendar.component.scss'],
-    encapsulation  : ViewEncapsulation.None
-})
-export class FuseCalendarComponent implements OnInit
-{
-    view: string;
-
-    viewDate: Date;
-
-    events: CalendarEvent[];
-
-    public actions: CalendarEventAction[];
-
-    activeDayIsOpen: boolean;
-
-    refresh: Subject<any> = new Subject();
-
-    dialogRef: any;
-
-    confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
-
-    selectedDay: any;
-
-    constructor(
-        public dialog: MdDialog,
-        public calendarService: CalendarService
-    )
-    {
-        this.view = 'month';
-        this.viewDate = new Date();
-        this.activeDayIsOpen = true;
-        this.selectedDay = {date: startOfDay(new Date())};
-
-        this.actions = [
-            {
-                label  : '<i class="material-icons s-16">edit</i>',
-                onClick: ({event}: { event: CalendarEvent }): void => {
-                    this.editEvent('edit', event);
-                }
-            },
-            {
-                label  : '<i class="material-icons s-16">delete</i>',
-                onClick: ({event}: { event: CalendarEvent }): void => {
-                    this.deleteEvent(event);
-                }
-            }
-        ];
-
-        /**
-         * Get events from service/server
-         */
-        this.setEvents();
-    }
-
-    ngOnInit()
-    {
-        /**
-         * Watch re-render-refresh for updating db
-         */
-        this.refresh.subscribe(updateDB => {
-            // console.warn('REFRESH');
-            if ( updateDB )
-            {
-                // console.warn('UPDATE DB');
-                this.calendarService.updateEvents(this.events);
-            }
-        });
-
-        this.calendarService.onEventsUpdated.subscribe(events => {
-            this.setEvents();
-            this.refresh.next();
-        });
-    }
-
-    setEvents()
-    {
-        this.events = this.calendarService.events.map(item => {
-            item.actions = this.actions;
-            return new CalendarEventModel(item);
-        });
-    }
-
-    /**
-     * Before View Renderer
-     * @param {any} header
-     * @param {any} body
-     */
-    beforeMonthViewRender({header, body})
-    {
-        // console.info('beforeMonthViewRender');
-        /**
-         * Get the selected day
-         */
-        const _selectedDay = body.find((_day) => {
-            return _day.date.getTime() === this.selectedDay.date.getTime();
-        });
-
-        if ( _selectedDay )
-        {
-            /**
-             * Set selectedday style
-             * @type {string}
-             */
-            _selectedDay.cssClass = 'mat-elevation-z3';
-        }
-
-    }
-
-    /**
-     * Day clicked
-     * @param {MonthViewDay} day
-     */
-    dayClicked(day: CalendarMonthViewDay): void
-    {
-        const date: Date = day.date;
-        const events: CalendarEvent[] = day.events;
-
-        if ( isSameMonth(date, this.viewDate) )
-        {
-            if ( (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) || events.length === 0 )
-            {
-                this.activeDayIsOpen = false;
-            }
-            else
-            {
-                this.activeDayIsOpen = true;
-                this.viewDate = date;
-            }
-        }
-        this.selectedDay = day;
-        this.refresh.next();
-    }
-
-    /**
-     * Event times changed
-     * Event dropped or resized
-     * @param {CalendarEvent} event
-     * @param {Date} newStart
-     * @param {Date} newEnd
-     */
-    eventTimesChanged({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void
-    {
-        event.start = newStart;
-        event.end = newEnd;
-        // console.warn('Dropped or resized', event);
-        this.refresh.next(true);
-    }
-
-    /**
-     * Delete Event
-     * @param event
-     */
-    deleteEvent(event)
-    {
-        this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
-            disableClose: false
-        });
-
-        this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete?';
-
-        this.confirmDialogRef.afterClosed().subscribe(result => {
-            if ( result )
-            {
-                const eventIndex = this.events.indexOf(event);
-                this.events.splice(eventIndex, 1);
-                this.refresh.next(true);
-            }
-            this.confirmDialogRef = null;
-        });
-
-    }
-
-    /**
-     * Edit Event
-     * @param {string} action
-     * @param {CalendarEvent} event
-     */
-    editEvent(action: string, event: CalendarEvent)
-    {
-        const eventIndex = this.events.indexOf(event);
-
-        this.dialogRef = this.dialog.open(FuseCalendarEventFormDialogComponent, {
-            panelClass: 'event-form-dialog',
-            data      : {
-                event : event,
-                action: action
-            }
-        });
-
-        this.dialogRef.afterClosed()
-            .subscribe(response => {
-                if ( !response )
-                {
-                    return;
-                }
-                const actionType: string = response[0];
-                const formData: FormGroup = response[1];
-                switch ( actionType )
-                {
-                    /**
-                     * Save
-                     */
-                    case 'save':
-
-                        this.events[eventIndex] = Object.assign(this.events[eventIndex], formData.getRawValue());
-                        this.refresh.next(true);
-
-                        break;
-                    /**
-                     * Delete
-                     */
-                    case 'delete':
-
-                        this.deleteEvent(event);
-
-                        break;
-                }
-            });
-    }
-
-    /**
-     * Add Event
-     */
-    addEvent(): void
-    {
-        this.dialogRef = this.dialog.open(FuseCalendarEventFormDialogComponent, {
-            panelClass: 'event-form-dialog',
-            data      : {
-                action: 'new',
-                date  : this.selectedDay.date
-            }
-        });
-        this.dialogRef.afterClosed()
-            .subscribe((response: FormGroup) => {
-                if ( !response )
-                {
-                    return;
-                }
-                const newEvent = response.getRawValue();
-                newEvent.actions = this.actions;
-                this.events.push(newEvent);
-                this.refresh.next(true);
-            });
-    }
-}
-
-

src/app/main/content/apps/calendar/calendar.module.ts

@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../../core/modules/shared.module';
-import { RouterModule, Routes } from '@angular/router';
-import { FuseCalendarComponent } from './calendar.component';
-import { CalendarService } from './calendar.service';
-import { CalendarModule } from 'angular-calendar';
-import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
-
-const routes: Routes = [
-    {
-        path     : '**',
-        component: FuseCalendarComponent,
-        children : [],
-        resolve  : {
-            chat: CalendarService
-        }
-    }
-];
-
-@NgModule({
-    imports        : [
-        SharedModule,
-        RouterModule.forChild(routes),
-        CalendarModule.forRoot()
-    ],
-    declarations   : [
-        FuseCalendarComponent,
-        FuseCalendarEventFormDialogComponent
-    ],
-    providers      : [
-        CalendarService
-    ],
-    entryComponents: [FuseCalendarEventFormDialogComponent]
-})
-export class FuseCalendarModule
-{
-}

src/app/main/content/apps/calendar/calendar.service.ts

@@ -1,58 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
-import { Http } from '@angular/http';
-import { Subject } from 'rxjs/Subject';
-
-@Injectable()
-export class CalendarService implements Resolve<any>
-{
-    events: any;
-    onEventsUpdated = new Subject<any>();
-
-    constructor(private http: Http)
-    {
-
-    }
-
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
-    {
-        return new Promise((resolve, reject) => {
-            Promise.all([
-                this.getEvents()
-            ]).then(
-                ([events]: [any]) => {
-                    resolve();
-                },
-                reject
-            );
-        });
-    }
-
-    getEvents()
-    {
-        return new Promise((resolve, reject) => {
-
-            this.http.get('api/calendar/events')
-                .subscribe(response => {
-                    this.events = response.json().data.data;
-                    this.onEventsUpdated.next(this.events);
-                    resolve(this.events);
-                }, reject);
-        });
-    }
-
-    updateEvents(events)
-    {
-        return new Promise((resolve, reject) => {
-            this.http.post('api/calendar/events', {
-                id  : 'events',
-                data: [...events]
-            })
-                .subscribe(response => {
-                    this.getEvents();
-                }, reject);
-        });
-    }
-
-}

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -1,135 +0,0 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="title dialog-title">{{dialogTitle}}</span>
-        <button md-button class="mat-icon-button"
-                (click)="dialogRef.close()"
-                aria-label="Close dialog">
-            <md-icon>close</md-icon>
-        </button>
-    </div>
-</md-toolbar>
-
-<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
-
-    <form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
-
-        <md-input-container>
-            <input mdInput
-                   name="title"
-                   formControlName="title"
-                   placeholder="Title"
-                   required>
-        </md-input-container>
-
-        <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
-            <md-slide-toggle
-                name="allDay"
-                formControlName="allDay"
-                class="mr-24"
-                aria-label="All day">
-                All Day
-            </md-slide-toggle>
-        </div>
-
-        <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
-            <md-input-container class="mr-24">
-                <input mdInput
-                       name="primary color"
-                       formControlName="primary"
-                       placeholder="Primary color"
-                       [(colorPicker)]="event.color.primary"
-                       cpWidth="290px"
-                       [cpPresetColors]="presetColors"
-                       [style.background]="event.color.primary"
-                       (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
-            </md-input-container>
-            <md-input-container>
-                <input mdInput
-                       name="secondary color"
-                       formControlName="secondary"
-                       placeholder="Secondary color"
-                       [(colorPicker)]="event.color.secondary"
-                       cpWidth="290px"
-                       [cpPresetColors]="presetColors"
-                       [style.background]="event.color.secondary"
-                       (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
-            </md-input-container>
-        </div>
-
-        <div fxFlex="1 0 auto" fxLayout="row">
-
-            <md-form-field class="mr-24">
-                <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
-                <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
-                <md-datepicker #startDatePicker></md-datepicker>
-            </md-form-field>
-
-            <md-datepicker #startDatePicker></md-datepicker>
-
-        </div>
-
-        <div fxFlex="1 0 auto" fxLayout="row">
-
-            <md-form-field class="mr-24">
-                <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
-                <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
-                <md-datepicker #endDatePicker></md-datepicker>
-            </md-form-field>
-
-            <md-input-container class="no-errors-spacer" flex md-no-float>
-                <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
-            </md-input-container>
-
-        </div>
-
-        <md-input-container formGroupName="meta">
-            <input mdInput
-                   name="location"
-                   formControlName="location"
-                   placeholder="Location">
-        </md-input-container>
-
-        <md-input-container formGroupName="meta">
-
-            <textarea mdInput
-                      formControlName="notes"
-                      placeholder="Notes"
-                      md-maxlength="250"
-                      max-rows="4">
-            </textarea>
-        </md-input-container>
-
-    </form>
-
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-
-    <button *ngIf="action !=='edit'"
-            md-raised-button
-            (click)="dialogRef.close(eventForm)"
-            class="save-button mat-accent"
-            [disabled]="eventForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-raised-button
-            (click)="dialogRef.close(['save',eventForm])"
-            class="save-button mat-accent"
-            [disabled]="eventForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-button
-            class="mat-icon-button"
-            (click)="dialogRef.close(['delete',eventForm])"
-            aria-label="Delete"
-            md-tooltip="Delete">
-        <md-icon>delete</md-icon>
-    </button>
-
-</div>

src/app/main/content/apps/calendar/event-form/event-form.component.scss

@@ -1,12 +0,0 @@
-.event-form-dialog {
-
-    .mat-dialog-container {
-        padding: 0;
-        width: 720px;
-    }
-}
-
-:host {
-    display: flex;
-    flex-direction: column;
-}

src/app/main/content/apps/calendar/event-form/event-form.component.ts

@@ -1,71 +0,0 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
-import { CalendarEvent } from 'angular-calendar';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { CalendarEventModel } from '../event.model';
-import { MatColors } from '../../../../../core/matColors';
-import 'rxjs/Rx';
-
-@Component({
-    selector     : 'fuse-calendar-event-form-dialog',
-    templateUrl  : './event-form.component.html',
-    styleUrls    : ['./event-form.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-
-export class FuseCalendarEventFormDialogComponent implements OnInit
-{
-    event: CalendarEvent;
-    dialogTitle: string;
-    eventForm: FormGroup;
-    action: string;
-    presetColors = MatColors.presets;
-
-    constructor(
-        public dialogRef: MdDialogRef<FuseCalendarEventFormDialogComponent>,
-        @Inject(MD_DIALOG_DATA) private data: any,
-        private formBuilder: FormBuilder
-    )
-    {
-        this.event = data.event;
-        this.action = data.action;
-
-        if ( this.action === 'edit' )
-        {
-            this.dialogTitle = this.event.title;
-        }
-        else
-        {
-            this.dialogTitle = 'New Event';
-            this.event = new CalendarEventModel({
-                start: data.date,
-                end  : data.date
-            });
-        }
-
-        this.eventForm = this.createEventForm();
-    }
-
-    ngOnInit()
-    {
-    }
-
-    createEventForm()
-    {
-        return new FormGroup({
-            title : new FormControl(this.event.title),
-            start : new FormControl(this.event.start),
-            end   : new FormControl(this.event.end),
-            allDay: new FormControl(this.event.allDay),
-            color : this.formBuilder.group({
-                primary  : new FormControl(this.event.color.primary),
-                secondary: new FormControl(this.event.color.secondary)
-            }),
-            meta  :
-                this.formBuilder.group({
-                    location: new FormControl(this.event.meta.location),
-                    notes   : new FormControl(this.event.meta.notes)
-                })
-        });
-    }
-}

src/app/main/content/apps/calendar/event.model.ts

@@ -1,74 +0,0 @@
-import {
-    CalendarEventAction
-} from 'angular-calendar';
-
-import {
-    startOfDay,
-    endOfDay,
-    subDays,
-    addDays,
-    endOfMonth,
-    isSameDay,
-    isSameMonth,
-    addHours
-} from 'date-fns';
-// import { CalendarEvent } from 'calendar-utils/dist/calendar-utils';
-
-/*
-export interface EventAction
-{
-    label: string;
-    cssClass?: string;
-
-    onClick({event}: {
-        event: CalendarEvent;
-    }): any;
-}*/
-
-export class CalendarEventModel
-{
-    start: Date;
-    end?: Date;
-    title: string;
-    color: {
-        primary: string;
-        secondary: string;
-    };
-    actions?: CalendarEventAction[];
-    allDay?: boolean;
-    cssClass?: string;
-    resizable?: {
-        beforeStart?: boolean;
-        afterEnd?: boolean;
-    };
-    draggable?: boolean;
-    meta?: {
-        location: string,
-        notes: string
-    };
-
-    constructor(data?)
-    {
-        data = data || {};
-        this.start = new Date(data.start) || startOfDay(new Date());
-        this.end = new Date(data.end) || endOfDay(new Date());
-        this.title = data.title || '';
-        this.color = {
-            primary  : data.color && data.color.primary || '#1e90ff',
-            secondary: data.color && data.color.secondary || '#D1E8FF'
-        };
-        this.draggable = data.draggable || true;
-        this.resizable = {
-            beforeStart: data.resizable && data.resizable.beforeStart || true,
-            afterEnd   : data.resizable && data.resizable.afterEnd || true
-        };
-        this.actions = data.actions || [];
-        this.allDay = data.allDay || false;
-        this.cssClass = data.cssClass || '';
-        this.meta = {
-            location: data.meta && data.meta.location || '',
-            notes   : data.meta && data.meta.notes || ''
-        };
-    }
-
-}