Merge 'master' into 'skeleton'

Upadte the changelog
Increased the Fuse version

CREDITS

@@ -0,0 +1,16 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Image/Vector/Icon Credits
+// -----------------------------------------------------------------------------------------------------
+Avatars - https://uifaces.co/
+Flag icons - http://www.famfamfam.com/lab/icons/flags/
+Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
+A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
+Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
+Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
+Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
+Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
+Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
+Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
+Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
+Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
+First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4

LICENSE

@@ -1 +1,2 @@
-https://themeforest.net/licenses/terms/regular
+This project is protected by Envato's Regular License. For more information,
+check the official license page at https://themeforest.net/licenses/terms/regular

README.md

@@ -1,6 +1,6 @@
 # Fuse - Angular
 
-Material Design Admin Template with Angular 6+ and Angular Material
+Material Design Admin Template with Angular 7+ and Angular Material
 
 ## The Community
 

angular.json

@@ -24,13 +24,13 @@
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
-                            "src/assets",
-                            "src/app/main/angular-material-elements"
+                            "src/assets"
                         ],
                         "styles": [
                             "src/styles.scss"
                         ],
-                        "scripts": []
+                        "scripts": [],
+                        "showCircularDependencies": false
                     },
                     "configurations": {
                         "production": {
@@ -48,7 +48,14 @@
                             "aot": true,
                             "extractLicenses": true,
                             "vendorChunk": false,
-                            "buildOptimizer": true
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                }
+                            ]
                         },
                         "ec": {
                             "sourceMap": true,
@@ -96,7 +103,7 @@
                         "tsConfig": "src/tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
                         "styles": [
-                            "styles.scss"
+                            "src/styles.scss"
                         ],
                         "scripts": [],
                         "assets": [
@@ -113,9 +120,7 @@
                             "src/tsconfig.spec.json"
                         ],
                         "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
+                            "**/node_modules/**"
                         ]
                     }
                 }
@@ -124,12 +129,18 @@
         "fuse-e2e": {
             "root": "e2e/",
             "projectType": "application",
+            "prefix": "",
             "architect": {
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
                         "protractorConfig": "e2e/protractor.conf.js",
                         "devServerTarget": "fuse:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "fuse:serve:production"
+                        }
                     }
                 },
                 "lint": {
@@ -137,9 +148,7 @@
                     "options": {
                         "tsConfig": "e2e/tsconfig.e2e.json",
                         "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
+                            "**/node_modules/**"
                         ]
                     }
                 }

e2e/src/app.e2e-spec.ts

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

e2e/src/app.po.ts

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.1",
+  "version": "7.0.1",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -18,71 +18,73 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.0.7",
-    "@angular/cdk": "6.3.3",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/core": "6.0.7",
-    "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.7",
-    "@angular/http": "6.0.7",
-    "@angular/material": "6.3.3",
-    "@angular/material-moment-adapter": "6.3.3",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
-    "@ngrx/effects": "6.0.1",
-    "@ngrx/router-store": "6.0.1",
-    "@ngrx/store": "6.0.1",
-    "@ngrx/store-devtools": "6.0.1",
-    "@ngx-translate/core": "10.0.2",
-    "@swimlane/ngx-charts": "8.1.0",
-    "@swimlane/ngx-datatable": "13.0.1",
-    "@swimlane/ngx-dnd": "4.0.0",
+    "@agm/core": "1.0.0-beta.5",
+    "@angular/animations": "7.0.4",
+    "@angular/cdk": "7.0.4",
+    "@angular/common": "7.0.4",
+    "@angular/compiler": "7.0.4",
+    "@angular/core": "7.0.4",
+    "@angular/flex-layout": "7.0.0-beta.19",
+    "@angular/forms": "7.0.4",
+    "@angular/http": "7.0.4",
+    "@angular/material": "7.0.4",
+    "@angular/material-moment-adapter": "7.0.4",
+    "@angular/platform-browser": "7.0.4",
+    "@angular/platform-browser-dynamic": "7.0.4",
+    "@angular/router": "7.0.4",
+    "@ngrx/effects": "6.1.2",
+    "@ngrx/router-store": "6.1.2",
+    "@ngrx/store": "6.1.2",
+    "@ngrx/store-devtools": "6.1.2",
+    "@ngx-translate/core": "11.0.1",
+    "@swimlane/dragula": "3.7.3",
+    "@swimlane/ngx-charts": "10.0.0",
+    "@swimlane/ngx-datatable": "14.0.0",
+    "@swimlane/ngx-dnd": "6.0.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.25.2",
-    "angular-in-memory-web-api": "0.6.0",
-    "chart.js": "2.7.2",
+    "angular-calendar": "0.26.4",
+    "angular-in-memory-web-api": "0.7.0",
+    "chart.js": "2.7.3",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.7",
-    "d3": "5.5.0",
+    "d3": "5.7.0",
+    "date-fns": "1.29.0",
     "hammerjs": "2.0.8",
-    "lodash": "4.17.10",
+    "lodash": "4.17.11",
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.4.0",
-    "ngx-cookie-service": "1.0.10",
+    "ngx-color-picker": "7.0.2",
+    "ngx-cookie-service": "2.0.0",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",
-    "rxjs": "6.2.1",
-    "rxjs-compat": "6.2.1",
+    "rxjs": "6.3.3",
+    "rxjs-compat": "6.3.3",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "6.0.8",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/language-service": "6.0.7",
-    "@angular-devkit/build-angular": "0.6.8",
+    "@angular/cli": "7.0.6",
+    "@angular/compiler-cli": "7.0.4",
+    "@angular/language-service": "7.0.4",
+    "@angular-devkit/build-angular": "0.10.6",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.8",
-    "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.110",
+    "@types/jasmine": "2.8.11",
+    "@types/jasminewd2": "2.0.6",
+    "@types/lodash": "4.14.118",
     "@types/node": "8.9.5",
-    "codelyzer": "4.2.1",
+    "codelyzer": "4.5.0",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
+    "karma": "3.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.1",
+    "karma-coverage-istanbul-reporter": "2.0.4",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.3.2",
-    "ts-node": "5.0.1",
-    "tslint": "5.9.1",
-    "typescript": "2.7.2",
-    "webpack-bundle-analyzer": "2.13.1"
+    "protractor": "5.4.1",
+    "ts-node": "7.0.1",
+    "tslint": "5.11.0",
+    "typescript": "3.1.6",
+    "webpack-bundle-analyzer": "3.0.3"
   }
 }

src/@fuse/components/countdown/countdown.component.scss

@@ -1,4 +1,4 @@
-:host {
+fuse-countdown {
     display: flex;
     flex-direction: row;
     align-items: center;

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { interval, Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import * as moment from 'moment';
@@ -6,7 +6,8 @@ import * as moment from 'moment';
 @Component({
     selector   : 'fuse-countdown',
     templateUrl: './countdown.component.html',
-    styleUrls  : ['./countdown.component.scss']
+    styleUrls    : ['./countdown.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
 export class FuseCountdownComponent implements OnInit, OnDestroy
 {
@@ -48,9 +49,13 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
         const currDate = moment();
         const eventDate = moment(this.eventDate);
 
-        // Get the difference in between the current date and event date
+        // Get the difference in between the current date and event date in seconds
         let diff = eventDate.diff(currDate, 'seconds');
 
+        // Calculate the remaining time for the first time so there will be no
+        // delay on the countdown
+        this.countdown = this._secondsToRemaining(diff);
+
         // Create a subscribable interval
         const countDown = interval(1000)
             .pipe(
@@ -58,14 +63,7 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
                     return diff = diff - 1;
                 }),
                 map(value => {
-                    const timeLeft = moment.duration(value, 'seconds');
-
-                    return {
-                        days   : timeLeft.asDays().toFixed(0),
-                        hours  : timeLeft.hours(),
-                        minutes: timeLeft.minutes(),
-                        seconds: timeLeft.seconds()
-                    };
+                    return this._secondsToRemaining(value);
                 })
             );
 
@@ -86,4 +84,27 @@ export class FuseCountdownComponent implements OnInit, OnDestroy
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();
     }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Converts given seconds to a remaining time
+     *
+     * @param seconds
+     * @private
+     */
+    private _secondsToRemaining(seconds): any
+    {
+        const timeLeft = moment.duration(seconds, 'seconds');
+
+        return {
+            days   : timeLeft.asDays().toFixed(0),
+            hours  : timeLeft.hours(),
+            minutes: timeLeft.minutes(),
+            seconds: timeLeft.seconds()
+        };
+    }
+
 }

src/@fuse/components/countdown/countdown.theme.scss

@@ -0,0 +1,17 @@
+@mixin fuse-countdown-theme($theme) {
+
+    $foreground: map-get($theme, foreground);
+
+    fuse-countdown {
+
+        .fuse-countdown {
+
+            .time {
+
+                .title {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+        }
+    }
+}

src/@fuse/components/demo/demo-content/demo-content.component.html

@@ -1,10 +1,8 @@
 <!-- DEMO CONTENT -->
-<div class="demo-content">
+<div class="demo-content line-height-1.75">
 
-    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
-
-    <h1>Early Sunrise</h1>
-    <h4 class="secondary-text">Demo Content</h4>
+    <h1 class="m-0">Early Sunrise in Winter</h1>
+    <h4 class="mt-0 secondary-text">Demo Content</h4>
 
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
@@ -12,7 +10,7 @@
         vestibulum. Suspendisse euismod in urna eu posuere.
     </p>
 
-    <blockquote>
+    <blockquote class="my-24">
         <p>
             Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
             et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
@@ -24,16 +22,12 @@
     </blockquote>
 
     <p>
-        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
-        nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
-        habitasse platea dictumst.
-    </p>
-
-    <p>
-        In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
-        Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
-        Nulla id euismod mi, et mollis tellus.
+        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
+        <b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
+        Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
+        gravida. In hac habitasse platea dictumst. In et placerat eros, eu tempor turpis. Curabitur ac felis finibus,
+        elementum lectus vitae, venenatis est. Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel
+        erat condimentum tristique vel vel mi. Nulla id euismod mi, et mollis tellus.
     </p>
 
     <p>
@@ -43,6 +37,12 @@
         velit.
     </p>
 
+    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
+
+    <p class="mt-8 mb-24 secondary-text">
+        <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>
+    </p>
+
     <p>
         Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
         in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
@@ -52,10 +52,18 @@
     <p>
         Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
         ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
-        sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
-        fringilla nulla, sit amet congue felis dignissim at.
+        sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
+        Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
     </p>
 
+    <ul>
+        <li>Orci varius</li>
+        <li>Magnis dis</li>
+        <li>Conubia nostra</li>
+        <li>Semper urna</li>
+        <li>Donec viverra</li>
+    </ul>
+
     <p>
         Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
         eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
@@ -69,7 +77,7 @@
         Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
         lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
         id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
-        viverra augue dolor, a venenatis tellus consectetur sit amet...
+        viverra augue dolor, a venenatis tellus consectetur sit amet.
     </p>
 </div>
 <!-- / DEMO CONTENT -->

src/@fuse/components/highlight/highlight.component.scss

@@ -1,7 +1,9 @@
 :host {
     display: block;
+    width: 100%;
     padding: 8px;
     background: #263238;
     cursor: text;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }

src/@fuse/components/index.ts

@@ -4,6 +4,7 @@ export * from './demo/demo.module';
 export * from './highlight/highlight.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
+export * from './progress-bar/progress-bar.module';
 export * from './search-bar/search-bar.module';
 export * from './shortcuts/shortcuts.module';
 export * from './sidebar/sidebar.module';

src/@fuse/components/material-color-picker/material-color-picker.component.html

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

src/@fuse/components/material-color-picker/material-color-picker.component.scss

@@ -1,5 +1,5 @@
 .fuse-material-color-picker-menu {
-    width: 208px;
+    width: 245px;
 
     .mat-menu-content {
         padding: 0;
@@ -7,44 +7,29 @@
         .views {
             display: flex;
             flex-direction: column;
-            position: relative;
-            overflow: hidden;
-            min-height: 258px;
-            height: 308px;
-            background-color: #F7F7F7;
+            min-height: 165px;
 
             .view {
-                position: absolute;
-                width: 208px;
-                height: 100%;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                top: 0;
+                overflow: hidden;
 
                 .colors {
-                    position: relative;
-                    padding: 4px;
+                    padding: 1px 0 0 0;
+                    margin-left: -1px;
 
                     .color {
-                        position: relative;
-                        width: 46px;
-                        height: 46px;
-                        margin: 2px;
+                        width: 40px;
+                        height: 40px;
+                        margin: 0 0 1px 1px;
                         border-radius: 0;
                         cursor: pointer;
+                        transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
 
-                        .label {
-                            padding: 2px;
-                            font-size: 10px;
+                        &:hover {
+                            border-radius: 20%;
                         }
 
-                        mat-icon {
-                            position: absolute;
-                            top: 2px;
-                            right: 2px;
-                            font-size: 16px;
-                            opacity: 0.7;
+                        &.selected {
+                            border-radius: 50% !important;
                         }
                     }
                 }

src/@fuse/components/material-color-picker/material-color-picker.component.ts

@@ -1,55 +1,40 @@
-import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
 
 import { fuseAnimations } from '@fuse/animations';
 import { MatColors } from '@fuse/mat-colors';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR: any = {
+    provide    : NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FuseMaterialColorPickerComponent),
+    multi      : true
+};
 
 @Component({
     selector     : 'fuse-material-color-picker',
     templateUrl  : './material-color-picker.component.html',
     styleUrls    : ['./material-color-picker.component.scss'],
     animations   : fuseAnimations,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    providers    : [FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR]
 })
-export class FuseMaterialColorPickerComponent implements OnChanges
+export class FuseMaterialColorPickerComponent implements ControlValueAccessor
 {
     colors: any;
     hues: string[];
-    selectedColor: any;
     view: string;
-
-    @Input()
+    selectedColor: any;
     selectedPalette: string;
-
-    @Input()
     selectedHue: string;
 
-    @Input()
-    selectedFg: string;
-
-    @Input()
-    value: any;
-
+    // Color changed
     @Output()
-    onValueChange: EventEmitter<any>;
-
-    @Output()
-    selectedPaletteChange: EventEmitter<any>;
-
-    @Output()
-    selectedHueChange: EventEmitter<any>;
-
-    @Output()
-    selectedClassChange: EventEmitter<any>;
-
-    @Output()
-    selectedBgChange: EventEmitter<any>;
-
-    @Output()
-    selectedFgChange: EventEmitter<any>;
+    colorChanged: EventEmitter<any>;
 
     // Private
-    _selectedClass: string;
-    _selectedBg: string;
+    private _color: string;
+    private _modelChange: (value: any) => void;
+    private _modelTouched: (value: any) => void;
 
     /**
      * Constructor
@@ -57,23 +42,18 @@ export class FuseMaterialColorPickerComponent implements OnChanges
     constructor()
     {
         // Set the defaults
+        this.colorChanged = new EventEmitter();
         this.colors = MatColors.all;
         this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
-        this.selectedFg = '';
-        this.selectedHue = '';
-        this.selectedPalette = '';
+        this.selectedHue = '500';
         this.view = 'palettes';
 
-        this.onValueChange = new EventEmitter();
-        this.selectedPaletteChange = new EventEmitter();
-        this.selectedHueChange = new EventEmitter();
-        this.selectedClassChange = new EventEmitter();
-        this.selectedBgChange = new EventEmitter();
-        this.selectedFgChange = new EventEmitter();
-
         // Set the private defaults
-        this._selectedClass = '';
-        this._selectedBg = '';
+        this._color = '';
+        this._modelChange = () => {
+        };
+        this._modelTouched = () => {
+        };
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -86,88 +66,76 @@ export class FuseMaterialColorPickerComponent implements OnChanges
      * @param value
      */
     @Input()
-    set selectedClass(value)
+    set color(value)
     {
-        if ( value && value !== '' && this._selectedClass !== value )
+        if ( !value || value === '' || this._color === value )
         {
-            const color = value.split('-');
-            if ( color.length >= 5 )
-            {
-                this.selectedPalette = color[1] + '-' + color[2];
-                this.selectedHue = color[3];
-            }
-            else
-            {
-                this.selectedPalette = color[1];
-                this.selectedHue = color[2];
-            }
-        }
-        this._selectedClass = value;
-    }
-
-    get selectedClass(): string
-    {
-        return this._selectedClass;
-    }
-
-    /**
-     * Selected bg
-     *
-     * @param value
-     */
-    @Input()
-    set selectedBg(value)
-    {
-        if ( value && value !== '' && this._selectedBg !== value )
-        {
-            for ( const palette in this.colors )
-            {
-                if ( !this.colors.hasOwnProperty(palette) )
-                {
-                    continue;
-                }
-
-                for ( const hue of this.hues )
-                {
-                    if ( this.colors[palette][hue] === value )
-                    {
-                        this.selectedPalette = palette;
-                        this.selectedHue = hue;
-                        break;
-                    }
-                }
-            }
-        }
-        this._selectedBg = value;
-    }
-
-    get selectedBg(): string
-    {
-        return this._selectedBg;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On changes
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: any): void
-    {
-        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
-            changes.selectedClass && changes.selectedClass.currentValue === '' ||
-            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
-        {
-            this.removeColor();
             return;
         }
-        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+
+        // Split the color value (red-400, blue-500, fuse-navy-700 etc.)
+        const colorParts = value.split('-');
+
+        // Take the very last part as the selected hue value
+        this.selectedHue = colorParts[colorParts.length - 1];
+
+        // Remove the last part
+        colorParts.pop();
+
+        // Rejoin the remaining parts as the selected palette name
+        this.selectedPalette = colorParts.join('-');
+
+        // Store the color value
+        this._color = value;
+    }
+
+    get color(): string
+    {
+        return this._color;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Control Value Accessor implementation
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register on change function
+     *
+     * @param fn
+     */
+    registerOnChange(fn: any): void
+    {
+        this._modelChange = fn;
+    }
+
+    /**
+     * Register on touched function
+     *
+     * @param fn
+     */
+    registerOnTouched(fn: any): void
+    {
+        this._modelTouched = fn;
+    }
+
+    /**
+     * Write value to the view from model
+     *
+     * @param color
+     */
+    writeValue(color: any): void
+    {
+        // Return if null
+        if ( !color )
         {
-            this.updateSelectedColor();
+            return;
         }
+
+        // Set the color
+        this.color = color;
+
+        // Update the selected color
+        this.updateSelectedColor();
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -177,35 +145,61 @@ export class FuseMaterialColorPickerComponent implements OnChanges
     /**
      * Select palette
      *
+     * @param event
      * @param palette
      */
-    selectPalette(palette): void
+    selectPalette(event, palette): void
     {
-        this.selectedPalette = palette;
-        this.updateSelectedColor();
+        // Stop propagation
+        event.stopPropagation();
+
+        // Go to 'hues' view
         this.view = 'hues';
+
+        // Update the selected palette
+        this.selectedPalette = palette;
+
+        // Update the selected color
+        this.updateSelectedColor();
     }
 
     /**
      * Select hue
      *
+     * @param event
      * @param hue
      */
-    selectHue(hue): void
+    selectHue(event, hue): void
     {
+        // Stop propagation
+        event.stopPropagation();
+
+        // Update the selected huse
         this.selectedHue = hue;
+
+        // Update the selected color
         this.updateSelectedColor();
     }
 
     /**
      * Remove color
+     *
+     * @param event
      */
-    removeColor(): void
+    removeColor(event): void
     {
+        // Stop propagation
+        event.stopPropagation();
+
+        // Return to the 'palettes' view
+        this.view = 'palettes';
+
+        // Clear the selected palette and hue
         this.selectedPalette = '';
         this.selectedHue = '';
+
+        // Update the selected color
         this.updateSelectedColor();
-        this.view = 'palettes';
     }
 
     /**
@@ -213,49 +207,40 @@ export class FuseMaterialColorPickerComponent implements OnChanges
      */
     updateSelectedColor(): void
     {
-        setTimeout(() => {
+        if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
+        {
+            return;
+        }
 
-            if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
-            {
-                return;
-            }
+        // Set the selected color object
+        this.selectedColor = {
+            palette: this.selectedPalette,
+            hue    : this.selectedHue,
+            class  : this.selectedPalette + '-' + this.selectedHue,
+            bg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
+            fg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
+        };
 
-            if ( this.selectedPalette !== '' && this.selectedHue !== '' )
-            {
-                this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
-                this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
-                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
-            }
-            else
-            {
-                this.selectedBg = '';
-                this.selectedFg = '';
-            }
+        // Emit the color changed event
+        this.colorChanged.emit(this.selectedColor);
 
-            this.selectedColor = {
-                palette: this.selectedPalette,
-                hue    : this.selectedHue,
-                class  : this.selectedClass,
-                bg     : this.selectedBg,
-                fg     : this.selectedFg
-            };
+        // Mark the model as touched
+        this._modelTouched(this.selectedColor.class);
 
-            this.selectedPaletteChange.emit(this.selectedPalette);
-            this.selectedHueChange.emit(this.selectedHue);
-            this.selectedClassChange.emit(this.selectedClass);
-            this.selectedBgChange.emit(this.selectedBg);
-            this.selectedFgChange.emit(this.selectedFg);
-
-            this.value = this.selectedColor;
-            this.onValueChange.emit(this.selectedColor);
-        });
+        // Update the model
+        this._modelChange(this.selectedColor.class);
     }
 
     /**
-     * Go back to palette selection
+     * Go to palettes view
+     *
+     * @param event
      */
-    backToPaletteSelection(): void
+    goToPalettesView(event): void
     {
+        // Stop propagation
+        event.stopPropagation();
+
         this.view = 'palettes';
     }
 

src/@fuse/components/material-color-picker/material-color-picker.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
 
 import { FusePipesModule } from '@fuse/pipes/pipes.module';
 
@@ -19,7 +19,7 @@ import { FuseMaterialColorPickerComponent } from '@fuse/components/material-colo
         MatButtonModule,
         MatIconModule,
         MatMenuModule,
-        MatRippleModule,
+        MatTooltipModule,
 
         FusePipesModule
     ],

src/@fuse/components/material-color-picker/material-color-picker.theme.scss

@@ -0,0 +1,14 @@
+@mixin fuse-material-color-picker-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    .fuse-material-color-picker-menu {
+
+        .mat-menu-content {
+
+            .views {
+                background: #303030;
+            }
+        }
+    }
+}

src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html

@@ -1,42 +1,42 @@
 <ng-container *ngIf="!item.hidden">
 
     <!-- normal collapse -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
@@ -52,7 +52,7 @@
 
     <div class="children" [ngClass]="{'open': isOpen}">
 
-        <div class="{{fuseConfig.layout.navbar.background}}">
+        <div class="{{fuseConfig.layout.navbar.primaryBackground}}">
 
             <ng-container *ngFor="let item of item.children">
                 <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

src/@fuse/components/navigation/horizontal/item/item.component.html

@@ -2,37 +2,37 @@
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

src/@fuse/components/navigation/navigation.component.html

@@ -6,7 +6,8 @@
         <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapsable>
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
+                                           [item]="item"></fuse-nav-vertical-collapsable>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
 
         </ng-container>
@@ -20,7 +21,7 @@
         <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
-            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'"
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
                                              [item]="item"></fuse-nav-horizontal-collapsable>
             <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
 

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

@@ -1,14 +1,15 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
-    selector     : 'fuse-navigation',
-    templateUrl  : './navigation.component.html',
-    styleUrls    : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    selector       : 'fuse-navigation',
+    templateUrl    : './navigation.component.html',
+    styleUrls      : ['./navigation.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseNavigationComponent implements OnInit
 {
@@ -22,9 +23,12 @@ export class FuseNavigationComponent implements OnInit
     private _unsubscribeAll: Subject<any>;
 
     /**
-     * Constructor
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
      */
     constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService
     )
     {
@@ -48,7 +52,24 @@ export class FuseNavigationComponent implements OnInit
         this._fuseNavigationService.onNavigationChanged
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
+
+                // Load the navigation
                 this.navigation = this._fuseNavigationService.getCurrentNavigation();
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
             });
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 }

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

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import * as _ from 'lodash';
 
 import { FuseNavigationItem } from '@fuse/types';
 
@@ -15,6 +16,9 @@ export class FuseNavigationService
     private _onNavigationChanged: BehaviorSubject<any>;
     private _onNavigationRegistered: BehaviorSubject<any>;
     private _onNavigationUnregistered: BehaviorSubject<any>;
+    private _onNavigationItemAdded: BehaviorSubject<any>;
+    private _onNavigationItemUpdated: BehaviorSubject<any>;
+    private _onNavigationItemRemoved: BehaviorSubject<any>;
 
     private _currentNavigationKey: string;
     private _registry: { [key: string]: any } = {};
@@ -33,6 +37,9 @@ export class FuseNavigationService
         this._onNavigationChanged = new BehaviorSubject(null);
         this._onNavigationRegistered = new BehaviorSubject(null);
         this._onNavigationUnregistered = new BehaviorSubject(null);
+        this._onNavigationItemAdded = new BehaviorSubject(null);
+        this._onNavigationItemUpdated = new BehaviorSubject(null);
+        this._onNavigationItemRemoved = new BehaviorSubject(null);
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -69,6 +76,36 @@ export class FuseNavigationService
         return this._onNavigationUnregistered.asObservable();
     }
 
+    /**
+     * Get onNavigationItemAdded
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemAdded(): Observable<any>
+    {
+        return this._onNavigationItemAdded.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemUpdated
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemUpdated(): Observable<any>
+    {
+        return this._onNavigationItemUpdated.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemRemoved
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemRemoved(): Observable<any>
+    {
+        return this._onNavigationItemRemoved.asObservable();
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -295,6 +332,9 @@ export class FuseNavigationService
         {
             navigation.push(item);
 
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
             return;
         }
 
@@ -302,6 +342,11 @@ export class FuseNavigationService
         if ( id === 'start' )
         {
             navigation.unshift(item);
+
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
+            return;
         }
 
         // Add it to a specific location
@@ -319,6 +364,33 @@ export class FuseNavigationService
             // Add the item
             parent.children.push(item);
         }
+
+        // Trigger the observable
+        this._onNavigationItemAdded.next(true);
+    }
+
+    /**
+     * Update navigation item with the given id
+     *
+     * @param id
+     * @param properties
+     */
+    updateNavigationItem(id, properties): void
+    {
+        // Get the navigation item
+        const navigationItem = this.getNavigationItem(id);
+
+        // If there is no navigation with the give id, return
+        if ( !navigationItem )
+        {
+            return;
+        }
+
+        // Merge the navigation properties
+        _.merge(navigationItem, properties);
+
+        // Trigger the observable
+        this._onNavigationItemUpdated.next(true);
     }
 
     /**
@@ -346,5 +418,8 @@ export class FuseNavigationService
 
         // Remove the item
         parent.splice(parent.indexOf(item), 1);
+
+        // Trigger the observable
+        this._onNavigationItemRemoved.next(true);
     }
 }

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html

@@ -1,45 +1,45 @@
 <ng-container *ngIf="!item.hidden">
 
-    <!-- normal collapse -->
+    <!-- normal collapsable -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
-       (click)="toggleOpen($event)" matRipple>
+       (click)="toggleOpen($event)">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
        (click)="toggleOpen($event)"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
        (click)="toggleOpen($event)"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="toggleOpen($event);item.function()" matRipple>
+          (click)="toggleOpen($event);item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="toggleOpen($event);item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="toggleOpen($event);item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts

@@ -1,6 +1,6 @@
-import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
+import { merge, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
@@ -30,10 +30,12 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {ChangeDetectorRef} _changeDetectorRef
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {Router} _router
      */
     constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
         private _router: Router
     )
@@ -111,6 +113,18 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         {
             this.collapse();
         }
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 
     /**
@@ -154,6 +168,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = true;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         this._fuseNavigationService.onItemCollapseToggled.next();
     }
 
@@ -168,6 +186,10 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = false;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         this._fuseNavigationService.onItemCollapseToggled.next();
     }
 

src/@fuse/components/navigation/vertical/group/group.component.ts

@@ -1,13 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-nav-vertical-group',
     templateUrl: './group.component.html',
     styleUrls  : ['./group.component.scss']
 })
-export class FuseNavVerticalGroupComponent
+export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
 {
     @HostBinding('class')
     classes = 'nav-group nav-item';
@@ -15,11 +18,57 @@ export class FuseNavVerticalGroupComponent
     @Input()
     item: FuseNavigationItem;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 
 }

src/@fuse/components/navigation/vertical/item/item.component.html

@@ -2,37 +2,37 @@
 
     <!-- item.url -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
     <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
        (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.externalUrl && item.function -->
     <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
        (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

src/@fuse/components/navigation/vertical/item/item.component.ts

@@ -1,13 +1,16 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-nav-vertical-item',
     templateUrl: './item.component.html',
     styleUrls  : ['./item.component.scss']
 })
-export class FuseNavVerticalItemComponent
+export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
 {
     @HostBinding('class')
     classes = 'nav-item';
@@ -15,10 +18,56 @@ export class FuseNavVerticalItemComponent
     @Input()
     item: FuseNavigationItem;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 }

src/@fuse/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,5 @@
+<ng-container *ngIf="visible">
+
+    <mat-progress-bar color="accent" [bufferValue]="bufferValue" [mode]="mode" [value]="value"></mat-progress-bar>
+
+</ng-container>

src/@fuse/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,17 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 99998;
+
+    mat-progress-bar {
+
+        .mat-progress-bar-buffer {
+            background-color: #C5C6CB !important;
+        }
+    }
+}

src/@fuse/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
+
+@Component({
+    selector     : 'fuse-progress-bar',
+    templateUrl  : './progress-bar.component.html',
+    styleUrls    : ['./progress-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseProgressBarComponent implements OnInit, OnDestroy
+{
+    bufferValue: number;
+    mode: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+    value: number;
+    visible: boolean;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseProgressBarService} _fuseProgressBarService
+     */
+    constructor(
+        private _fuseProgressBarService: FuseProgressBarService
+    )
+    {
+        // Set the defaults
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the progress bar service properties
+
+        // Buffer value
+        this._fuseProgressBarService.bufferValue
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((bufferValue) => {
+                this.bufferValue = bufferValue;
+            });
+
+        // Mode
+        this._fuseProgressBarService.mode
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((mode) => {
+                this.mode = mode;
+            });
+
+        // Value
+        this._fuseProgressBarService.value
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.value = value;
+            });
+
+        // Visible
+        this._fuseProgressBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.visible = visible;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}

src/@fuse/components/progress-bar/progress-bar.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
+
+import { FuseProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseProgressBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseProgressBarComponent
+    ]
+})
+export class FuseProgressBarModule
+{
+}

src/@fuse/components/progress-bar/progress-bar.service.ts

@@ -1,14 +1,17 @@
 import { Injectable } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
 })
-export class FuseLoadingBarService
+export class FuseProgressBarService
 {
     // Private
+    private _bufferValue: BehaviorSubject<number>;
+    private _mode: BehaviorSubject<string>;
+    private _value: BehaviorSubject<number>;
     private _visible: BehaviorSubject<boolean>;
 
     /**
@@ -28,9 +31,50 @@ export class FuseLoadingBarService
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Buffer value
+     */
+    get bufferValue(): Observable<any>
+    {
+        return this._bufferValue.asObservable();
+    }
+
+    setBufferValue(value: number): void
+    {
+        this._bufferValue.next(value);
+    }
+
+    /**
+     * Mode
+     */
+    get mode(): Observable<any>
+    {
+        return this._mode.asObservable();
+    }
+
+    setMode(value: 'determinate' | 'indeterminate' | 'buffer' | 'query'): void
+    {
+        this._mode.next(value);
+    }
+
+    /**
+     * Value
+     */
+    get value(): Observable<any>
+    {
+        return this._value.asObservable();
+    }
+
+    setValue(value: number): void
+    {
+        this._value.next(value);
+    }
+
+    /**
+     * Visible
+     */
     get visible(): Observable<any>
     {
-        // Return the _visible as observable
         return this._visible.asObservable();
     }
 
@@ -45,24 +89,23 @@ export class FuseLoadingBarService
      */
     private _init(): void
     {
-        // Initialize the behavior subject
+        // Initialize the behavior subjects
+        this._bufferValue = new BehaviorSubject(0);
+        this._mode = new BehaviorSubject('indeterminate');
+        this._value = new BehaviorSubject(0);
         this._visible = new BehaviorSubject(false);
 
         // Subscribe to the router events to show/hide the loading bar
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationStart)
-            )
+            .pipe(filter((event) => event instanceof NavigationStart))
             .subscribe(() => {
-                this.showLoadingBar();
+                this.show();
             });
 
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
+            .pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
             .subscribe(() => {
-                this.hideLoadingBar();
+                this.hide();
             });
     }
 
@@ -71,20 +114,18 @@ export class FuseLoadingBarService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Show the loading bar
+     * Show the progress bar
      */
-    showLoadingBar(): void
+    show(): void
     {
-        // Show
         this._visible.next(true);
     }
 
     /**
-     * Hide the loading bar
+     * Hide the progress bar
      */
-    hideLoadingBar(): void
+    hide(): void
     {
-        // Hide
         this._visible.next(false);
     }
 }

src/@fuse/components/search-bar/search-bar.component.html

@@ -1,15 +1,12 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
 
-    <div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background">
+    <div class="fuse-search-bar-content">
 
         <label for="fuse-search-bar-input">
             <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
                 <mat-icon class="s-24 secondary-text">search</mat-icon>
             </button>
-            <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
-            </span>-->
         </label>
 
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"

src/@fuse/components/search-bar/search-bar.component.scss

@@ -9,7 +9,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -53,8 +53,9 @@
                 display: none;
                 flex: 1 0 auto;
                 min-height: 64px;
-                background-color: transparent;
                 font-size: 16px;
+                background-color: transparent;
+                color: currentColor;
             }
         }
 

src/@fuse/components/search-bar/search-bar.theme.scss

@@ -0,0 +1,11 @@
+@mixin fuse-search-bar-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    .fuse-search-bar {
+
+        &.expanded {
+            background-color: map-get($background, background);
+        }
+    }
+}

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

@@ -7,7 +7,7 @@
         </button>
     </div>
 
-    <div class="shortcuts" fxHide fxShow.gt-sm>
+    <div class="shortcuts" fxLayout="row" fxHide fxShow.gt-sm>
 
         <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 

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

@@ -2,7 +2,7 @@
 
 :host {
 
-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {
 
         #fuse-shortcuts {
 
@@ -19,6 +19,10 @@
                     display: flex !important;
                     flex: 1;
                     height: 100%;
+
+                    > div {
+                        flex: 1 1 auto !important;
+                    }
                 }
             }
         }

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

@@ -70,9 +70,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         // Get the navigation items and flatten them
         this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
 
-        const cookieExists = this._cookieService.check('FUSE2.shortcuts');
-
-        if ( cookieExists )
+        if ( this._cookieService.check('FUSE2.shortcuts') )
         {
             this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
         }
@@ -107,6 +105,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             ];
         }
 
+        // Subscribe to media changes
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {

src/@fuse/components/shortcuts/shortcuts.theme.scss

@@ -0,0 +1,11 @@
+@mixin fuse-shortcuts-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    #fuse-shortcuts {
+
+        &.show-mobile-panel {
+            background-color: map-get($background, background);
+        }
+    }
+}

src/@fuse/components/sidebar/sidebar.component.scss

@@ -9,14 +9,14 @@ fuse-sidebar {
     bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     width: 280px;
     min-width: 280px;
     max-width: 280px;
     z-index: 1000;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
-    background: white;
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         min-width: 0 !important;
         max-width: 80vw !important;
         width: 80vw !important;
@@ -61,10 +61,5 @@ fuse-sidebar {
     left: 0;
     right: 0;
     z-index: 999;
-    background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
-
-    &.fuse-sidebar-overlay-invisible {
-        background-color: transparent;
-    }
 }

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

@@ -1,4 +1,6 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
+} from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
@@ -172,7 +174,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
             // Set the style and class
-            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+            this._renderer.setStyle(sibling, styleRule, styleValue);
             this._renderer.addClass(this._elementRef.nativeElement, 'folded');
         }
         // If unfolded...
@@ -433,7 +435,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
         // Set the style and class
-        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+        this._renderer.setStyle(sibling, styleRule, styleValue);
         this._renderer.addClass(this._elementRef.nativeElement, 'folded');
     }
 

src/@fuse/components/sidebar/sidebar.theme.scss

@@ -0,0 +1,16 @@
+@mixin fuse-sidebar-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    fuse-sidebar {
+        background: map-get($background, background);
+    }
+
+    .fuse-sidebar-overlay {
+        background-color: rgba(0, 0, 0, 0.6);
+
+        &.fuse-sidebar-overlay-invisible {
+            background-color: transparent;
+        }
+    }
+}

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

@@ -12,6 +12,20 @@
 
     <form [formGroup]="form">
 
+        <!-- COLOR THEME -->
+        <div class="group">
+
+            <h2>Color themes</h2>
+
+            <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
+                <mat-radio-button class="mb-12" value="theme-default">Default Light</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-blue-gray-dark">Blue-Gray Dark</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-pink-dark">Pink Dark</mat-radio-button>
+            </mat-radio-group>
+
+        </div>
+
         <!-- LAYOUT STYLES -->
         <div class="group" formGroupName="layout">
 
@@ -79,10 +93,13 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
 
                     </div>
 
@@ -102,10 +119,13 @@
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
 
                     </div>
 
@@ -125,10 +145,30 @@
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
                         <h3 class="mt-24 mb-8">Color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
 
                     </div>
 
@@ -173,10 +213,13 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
 
                     </div>
 
@@ -196,10 +239,13 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
 
                     </div>
 
@@ -219,10 +265,30 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
 
                     </div>
 
@@ -267,10 +333,13 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
 
                     </div>
 
@@ -289,10 +358,13 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
 
                     </div>
 
@@ -311,10 +383,30 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
 
                     </div>
 
@@ -354,9 +446,14 @@
                             <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                                                    formControlName="primaryBackground">
+                        </fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background (Vertical):</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground">
                         </fuse-material-color-picker>
 
                     </div>
@@ -376,10 +473,13 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
 
                     </div>
 
@@ -398,10 +498,30 @@
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
                         </mat-radio-group>
 
-                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
                         <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
 
                     </div>
 

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

@@ -9,7 +9,7 @@
     }
 }
 
-:host {
+fuse-theme-options {
     display: flex;
     overflow: hidden;
 
@@ -19,6 +19,7 @@
         flex: 1 0 auto;
         padding: 40px 24px 24px 24px;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .header {
             display: flex;
@@ -29,7 +30,7 @@
 
             .title {
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 padding-left: 4px;
             }
         }
@@ -44,7 +45,6 @@
                 flex: 1 0 auto;
                 flex-direction: column;
                 position: relative;
-                border: 1px solid rgba(0, 0, 0, 0.12);
                 border-radius: 2px;
                 padding: 28px 16px 8px 16px;
                 margin: 16px 0;
@@ -56,15 +56,12 @@
                     margin: 0;
                     padding: 0 8px;
                     font-size: 16px;
-                    font-weight: 500;
-                    background: white;
-                    color: rgba(0, 0, 0, 0.54);
+                    font-weight: 600;
                 }
 
                 h3 {
                     font-size: 14px;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
+                    font-weight: 600;
                     margin: 24px 0 16px 0;
                     padding: 0;
 

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

@@ -1,5 +1,6 @@
-import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -9,10 +10,11 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 @Component({
-    selector   : 'fuse-theme-options',
-    templateUrl: './theme-options.component.html',
-    styleUrls  : ['./theme-options.component.scss'],
-    animations : fuseAnimations
+    selector     : 'fuse-theme-options',
+    templateUrl  : './theme-options.component.html',
+    styleUrls    : ['./theme-options.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
@@ -28,6 +30,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {DOCUMENT} document
      * @param {FormBuilder} _formBuilder
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
@@ -35,6 +38,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
      * @param {Renderer2} _renderer
      */
     constructor(
+        @Inject(DOCUMENT) private document: any,
         private _formBuilder: FormBuilder,
         private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
@@ -61,28 +65,36 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         // Build the config form
         // noinspection TypeScriptValidateTypes
         this.form = this._formBuilder.group({
+            colorTheme      : new FormControl(),
+            customScrollbars: new FormControl(),
             layout          : this._formBuilder.group({
-                style  : new FormControl(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
-                    background: new FormControl(),
-                    folded    : new FormControl(),
-                    hidden    : new FormControl(),
-                    position  : new FormControl(),
-                    variant   : new FormControl()
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
+                    primaryBackground  : new FormControl(),
+                    secondaryBackground: new FormControl(),
+                    folded             : new FormControl(),
+                    hidden             : new FormControl(),
+                    position           : new FormControl(),
+                    variant            : new FormControl()
                 }),
-                toolbar: this._formBuilder.group({
-                    background: new FormControl(),
-                    hidden    : new FormControl(),
-                    position  : new FormControl()
+                toolbar  : this._formBuilder.group({
+                    background           : new FormControl(),
+                    customBackgroundColor: new FormControl(),
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
                 }),
-                footer : this._formBuilder.group({
-                    background: new FormControl(),
-                    hidden    : new FormControl(),
-                    position  : new FormControl()
+                footer   : this._formBuilder.group({
+                    background           : new FormControl(),
+                    customBackgroundColor: new FormControl(),
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden  : new FormControl(),
+                    position: new FormControl()
                 })
-            }),
-            customScrollbars: new FormControl()
+            })
         });
 
         // Subscribe to the config changes
@@ -106,7 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 // Reset the form values based on the
                 // selected layout style
                 this._resetFormValues(value);
-
             });
 
         // Subscribe to the form value changes
@@ -173,23 +184,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'left',
-                            variant   : 'vertical-style-1'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
                         },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'below-static'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'below-static'
                         },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'below-static'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'below-static'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -202,23 +220,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'left',
-                            variant   : 'vertical-style-1'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
                         },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'below'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'below'
                         },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'below'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'below'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -231,23 +256,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'left',
-                            layout    : 'vertical-style-1'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            layout             : 'vertical-style-1'
                         },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'above-static'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'above-static'
                         },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'above-static'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'above-static'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -260,23 +292,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'top',
-                            variant   : 'vertical-style-1'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'top',
+                            variant            : 'vertical-style-1'
                         },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'above'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'above'
                         },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'above-fixed'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'above-fixed'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -299,5 +338,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     {
         this._fuseSidebarService.getSidebar(key).toggleOpen();
     }
-
 }

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

@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import {
+    MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule
+} from '@angular/material';
 
 import { FuseDirectivesModule } from '@fuse/directives/directives';
-import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
+import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 
 import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
 
@@ -22,6 +24,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
         FlexLayoutModule,
 
         MatButtonModule,
+        MatCheckboxModule,
         MatDividerModule,
         MatFormFieldModule,
         MatIconModule,

src/@fuse/components/theme-options/theme-options.theme.scss

@@ -0,0 +1,27 @@
+@mixin fuse-theme-options-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    fuse-theme-options {
+
+        .theme-options-panel {
+
+            form {
+
+                .group {
+                    border: 1px solid map-get($foreground, divider);
+
+                    h2 {
+                        background: map-get($background, background);
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                    h3 {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+        }
+    }
+}

src/@fuse/components/widget/widget.component.scss

@@ -20,11 +20,13 @@ fuse-widget {
         width: 100%;
         opacity: 1;
         z-index: 10;
-        border-radius: 2px;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(0deg);
         backface-visibility: hidden;
+        border: 1px solid;
     }
+
     > .fuse-widget-back {
         display: block;
         position: absolute;
@@ -36,9 +38,11 @@ fuse-widget {
         visibility: hidden;
         opacity: 0;
         z-index: 10;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(180deg);
         backface-visibility: hidden;
+        border: 1px solid;
 
         [fuseWidgetToggle] {
             position: absolute;

src/@fuse/components/widget/widget.theme.scss

@@ -0,0 +1,14 @@
+@mixin fuse-widget-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    fuse-widget {
+
+        > .fuse-widget-front,
+        > .fuse-widget-back {
+            background: map-get($background, card);
+            border-color: map-get($foreground, divider);
+        }
+    }
+}

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -15,11 +15,11 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
     @HostBinding('class.mat-is-locked-open')
     isLockedOpen: boolean;
 
-    @Input('fuseMatSidenavHelper')
-    id: string;
+    @Input()
+    fuseMatSidenavHelper: string;
 
-    @Input('mat-is-locked-open')
-    matIsLockedOpenBreakpoint: string;
+    @Input()
+    matIsLockedOpen: string;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -56,9 +56,9 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
     ngOnInit(): void
     {
         // Register the sidenav to the service
-        this._fuseMatSidenavHelperService.setSidenav(this.id, this._matSidenav);
+        this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);
 
-        if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+        if ( this._observableMedia.isActive(this.matIsLockedOpen) )
         {
             this.isLockedOpen = true;
             this._matSidenav.mode = 'side';
@@ -74,7 +74,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
-                if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+                if ( this._observableMedia.isActive(this.matIsLockedOpen) )
                 {
                     this.isLockedOpen = true;
                     this._matSidenav.mode = 'side';
@@ -105,8 +105,8 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 })
 export class FuseMatSidenavTogglerDirective
 {
-    @Input('fuseMatSidenavToggler')
-    id;
+    @Input()
+    fuseMatSidenavToggler: string;
 
     /**
      * Constructor
@@ -126,8 +126,8 @@ export class FuseMatSidenavTogglerDirective
      * On click
      */
     @HostListener('click')
-    onClick()
+    onClick(): void
     {
-        this._fuseMatSidenavHelperService.getSidenav(this.id).toggle();
+        this._fuseMatSidenavHelperService.getSidenav(this.fuseMatSidenavToggler).toggle();
     }
 }

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -15,7 +15,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
     isInitialized: boolean;
     isMobile: boolean;
-    ps: PerfectScrollbar;
+    ps: PerfectScrollbar | any;
 
     // Private
     private _enabled: boolean | '';
@@ -200,6 +200,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
             ...this.fusePerfectScrollbarOptions
         });
+
+        // Unbind 'keydown' events of PerfectScrollbar since it causes an extremely
+        // high CPU usage on Angular Material inputs.
+        // Loop through all the event elements of this PerfectScrollbar instance
+        this.ps.event.eventElements.forEach((eventElement) => {
+
+            // If we hit to the element with a 'keydown' event...
+            if ( typeof eventElement.handlers['keydown'] !== 'undefined' )
+            {
+                // Unbind it
+                eventElement.element.removeEventListener('keydown', eventElement.handlers['keydown'][0]);
+            }
+        });
     }
 
     /**

src/@fuse/mat-colors/index.ts

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

src/@fuse/scss/core.scss

@@ -10,21 +10,17 @@
 // Fuse
 @import "fuse";
 
+// Theme
+@import "theme";
+
 // Include core Angular Material styles
 @include mat-core();
 
-// Setup the typography
-@include angular-material-typography($typography);
-
-// Create an Angular Material theme from the $theme map
-@include angular-material-theme($theme);
-
 // Partials
-@import "partials/reset";
 @import "partials/normalize";
 @import "partials/scrollbars";
 @import "partials/helpers";
-@import "partials/global";
+@import "partials/general";
 @import "partials/icons";
 @import "partials/colors";
 @import "partials/material";
@@ -35,7 +31,6 @@
 @import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
-@import "partials/toolbar";
 @import "partials/print";
 
 // Plugins

src/@fuse/scss/fuse.scss

@@ -1,5 +1,5 @@
-// Material theming
-@import "theming";
+// Material theming tools
+@import '~@angular/material/theming';
 
 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "partials/breakpoints";

src/@fuse/scss/mixins/_breakpoints.scss

@@ -1,126 +0,0 @@
-// Media step breakpoint mixin based on Angular Material lib
-$breakpoints: (
-    xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
-    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
-    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
-    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-    lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 959px)',
-    lt-lg: 'screen and (max-width: 1279px)',
-    lt-xl: 'screen and (max-width: 1919px)',
-    gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 960px)',
-    gt-md: 'screen and (min-width: 1280px)',
-    gt-lg: 'screen and (min-width: 1920px)'
-) !default;
-
-$grid-breakpoints: (
-    xs: 0,
-    sm: 600px,
-    md: 960px,
-    lg: 1280px,
-    xl: 1920px
-) !default;
-
-@mixin media-breakpoint($breakpointName) {
-
-    $mediaQuery: map_get($breakpoints, $breakpointName);
-
-    @if ($mediaQuery != null) {
-
-        @media #{$mediaQuery} {
-            @content
-        }
-    }
-}
-
-//    >> breakpoint-next(sm)
-//    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-    $n: index($breakpoint-names, $name);
-    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-    $min: map-get($breakpoints, $name);
-    @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.1.
-//
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-    $next: breakpoint-next($name, $breakpoints);
-    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    @if $min {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-    $max: breakpoint-max($name, $breakpoints);
-    @if $max {
-        @media (max-width: $max) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-max($lower, $breakpoints);
-    $max: breakpoint-max($upper, $breakpoints);
-
-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    $max: breakpoint-max($name, $breakpoints);
-
-    @media (min-width: $min) and (max-width: $max) {
-        @content;
-    }
-}

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -1,3 +1,31 @@
+// Fix: "Remove the cdk-global-scrollblock effects from the HTML"
+// Fuse already blocks the body scroll so it doesn't need this feature. We are disabling it
+// because on Windows, it causes a scrollbar to show up.
+html {
+
+    &.cdk-global-scrollblock {
+        position: relative !important;
+        overflow: hidden !important;
+    }
+}
+
+// Fix: "Inconsistent button heights due to inconsistent line heights"
+button {
+
+    .mat-button-wrapper {
+        line-height: normal;
+    }
+}
+
+.mat-icon {
+
+    // Fix: "Font-weight config affecting the icons"
+    font-weight: 400 !important;
+
+    // Fix: "Inconsistent positioning on custom font icons"
+    line-height: 1;
+}
+
 // Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
@@ -6,11 +34,12 @@
     }
 }
 
-// Fix: "Inconsistent font sizes across elements"
-.mat-form-field-wrapper {
-    font-size: 16px;
+// Fix: "Smooth scrolling for iOS"
+.mat-dialog-container {
+    -webkit-overflow-scrolling: touch;
 }
 
+// Fix: "Inconsistent font sizes across elements"
 .mat-checkbox {
     font-size: 16px;
 }
@@ -29,9 +58,9 @@
     background-color: rgba(0, 0, 0, 0.12);
 }
 
-// Fix: "Some idiots using table-cell and inline-table in mat-select"
 .mat-form-field {
 
+    // Fix: "Table-cell and inline-table in mat-select"
     &.mat-form-field-type-mat-select {
 
         .mat-form-field-infix {

src/@fuse/scss/partials/_breakpoints.scss

@@ -0,0 +1,38 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 959px)',
+    lt-lg: 'screen and (max-width: 1279px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 960px)',
+    gt-md: 'screen and (min-width: 1280px)',
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    xs: null,
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);
+
+@mixin media-breakpoint($breakpointName) {
+
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+
+    @if ($mediaQuery == null) {
+        @content
+    } @else {
+        @media #{$mediaQuery} {
+            @content
+        }
+    }
+}

src/@fuse/scss/partials/_cards.scss

@@ -1,9 +1,29 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin cards-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .fuse-card {
+        background: map-get($background, card);
+        border-color: map-get($foreground, divider);
+
+        .card-divider {
+            border-top: 1px solid map-get($foreground, divider);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cards
+// -----------------------------------------------------------------------------------------------------
 .fuse-card {
     max-width: 320px;
     min-width: 320px;
-    background: white;
-    border-radius: 2px;
-    @include mat-elevation(2);
+    border-radius: 8px;
+    border: 1px solid;
 
     &.variable-width {
         min-width: 0;
@@ -37,13 +57,8 @@
 
     // Divider
     .card-divider {
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
         margin: 16px;
 
-        &.light {
-            border-top-color: rgba(255, 255, 255, 0.12);
-        }
-
         &.full-width {
             margin: 0;
         }

src/@fuse/scss/partials/_colors.scss

@@ -1,23 +1,52 @@
-.secondary-text,
-.icon,
-i {
-    color: rgba(0, 0, 0, 0.54);
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin colors-theme($theme) {
+
+    $is-dark: map-get($theme, is-dark);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    // Base colors
+    & {
+        color: map-get($foreground, text);
+
+        // If it's a light theme, use a darker background
+        // color other than the default #fafafa
+        @if ($is-dark) {
+            background: map-get($background, background);
+        } @else {
+            background: #F5F5F5;
+        }
+    }
+
+    .secondary-text {
+        color: map-get($foreground, secondary-text);
+    }
+
+    .icon,
+    i {
+        color: map-get($foreground, icon);
+    }
+
+    .hint-text {
+        color: map-get($foreground, hint-text);
+    }
+
+    .disabled-text {
+        color: map-get($foreground, disabled-text);
+    }
+
+    .fade-text,
+    .divider {
+        color: map-get($foreground, divider);
+    }
 }
 
-.hint-text,
-.disabled-text {
-    color: rgba(0, 0, 0, 0.38);
-}
-
-.divider {
-    color: rgba(0, 0, 0, 0.12);
-}
-
-// Material colors map
+// -----------------------------------------------------------------------------------------------------
+// @ Material colors map
+// -----------------------------------------------------------------------------------------------------
 $matPalettes: (
-    primary: $primary,
-    accent: $accent,
-    warn: $warn,
     red: $mat-red,
     pink: $mat-pink,
     purple: $mat-purple,
@@ -36,17 +65,16 @@ $matPalettes: (
     deep-orange: $mat-deep-orange,
     brown: $mat-brown,
     grey: $mat-grey,
-    blue-grey: $mat-blue-grey,
-    white: $mat-white,
-    black: $mat-black,
-    fuse-dark: $mat-fusedark
+    blue-grey: $mat-blue-grey
 );
 
 // Material color hues list
 $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
-// Text color levels generator mixin
-@mixin generateTextColorLevels($classes, $contrast) {
+// -----------------------------------------------------------------------------------------------------
+// @ Text color levels generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-color-levels($classes, $contrast) {
 
     // If the contrast is dark...
     @if ($contrast == 'dark') {
@@ -125,7 +153,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
     }
 }
 
-@mixin generateMaterialElementColors($classes, $contrast) {
+// -----------------------------------------------------------------------------------------------------
+// @ Material element colors generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-material-element-colors($classes, $contrast) {
 
     // If the contrast color is light...
     $fuseForeground: (
@@ -150,53 +181,55 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
 
         // Native Input
         input[type="text"] {
-            color: map_get($fuseForeground, base);
+            color: map-get($fuseForeground, base);
         }
 
         // Input
         .mat-form-field-label {
-            color: map_get($fuseForeground, hint-text);
+            color: map-get($fuseForeground, hint-text);
         }
 
         .mat-form-field-underline {
-            background-color: map_get($fuseForeground, divider);
+            background-color: map-get($fuseForeground, divider);
         }
 
         // Select
         .mat-select-trigger,
         .mat-select-arrow {
-            color: map_get($fuseForeground, hint-text);
+            color: map-get($fuseForeground, hint-text);
         }
 
         .mat-select-underline {
-            background-color: map_get($fuseForeground, divider);
+            background-color: map-get($fuseForeground, divider);
         }
 
         .mat-select-disabled .mat-select-value,
         .mat-select-arrow,
         .mat-select-trigger {
-            color: map_get($fuseForeground, hint-text);
+            color: map-get($fuseForeground, hint-text);
         }
 
         .mat-select-content,
         .mat-select-panel-done-animating {
-            background: map_get($background, card);
+            //background: map-get($background, card);
         }
 
         .mat-select-value {
-            color: map_get($fuseForeground, text);
+            color: map-get($fuseForeground, text);
         }
     }
 }
 
-// Color classes generator mixin
-@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
+// -----------------------------------------------------------------------------------------------------
+// @ Color classes generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-color-classes($colorName, $color, $contrastColor, $hue) {
 
     .#{$colorName}#{$hue}-bg {
         background-color: $color !important;
     }
 
-    .mat-#{$colorName}#{$hue}-bg {
+    .#{$colorName}#{$hue} {
         background-color: $color !important;
         color: $contrastColor !important;
 
@@ -231,13 +264,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
     }
 }
 
-@mixin generateFuseColorClasses($primary, $accent, $warn) {
-
-    $palettes: (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn
-    );
+// -----------------------------------------------------------------------------------------------------
+// @ Fuse color classes
+// -----------------------------------------------------------------------------------------------------
+@mixin fuse-color-classes($palettes) {
 
     // Define contrast lists
     $light-contrasting-classes: ();
@@ -258,101 +288,74 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
             @if ($color != null and $contrast != null) {
 
                 // Generate color classes
-                @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+                @include generate-color-classes($paletteName, $color, $contrast, '-#{$hue}');
 
                 // If the contrast color is dark
                 @if (rgba(black, 1) == rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
                 }
                     // if the contrast color is light
                 @else {
-                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
                 }
 
                 // Run the generator one more time for default values (500)
-                @if ($hue == 500) {
+                // if we are not working with primary, accent or warn palettes
+                @if ($hue == 500 and $paletteName != 'primary' and $paletteName != 'accent' and $paletteName != 'warn') {
 
                     // Generate color classes
-                    @include generateColorClasses($paletteName, $color, $contrast, '');
+                    @include generate-color-classes($paletteName, $color, $contrast, '');
 
                     // Add color to the correct list depending on the contrasting color
 
                     // If the contrast color is dark
                     @if (rgba(black, 1) == rgba($contrast, 1)) {
-                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
                     }
                         // if the contrast color is light
                     @else {
-                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
                     }
                 }
             }
         }
-    }
 
-    // Generate contrasting colors
-    @include generateTextColorLevels($dark-contrasting-classes, 'dark');
-    @include generateTextColorLevels($light-contrasting-classes, 'light');
-    @include generateMaterialElementColors($dark-contrasting-classes, 'dark');
-    @include generateMaterialElementColors($light-contrasting-classes, 'light');
-}
+        // Run the generator again for the selected default hue values for
+        // primary, accent and warn palettes
+        //
+        // We are doing this because the default hue value can be changed
+        // by the user when the Material theme being generated.
+        @if ($paletteName == 'primary' or $paletteName == 'accent' or $paletteName == 'warn') {
 
-// Generate the color classes...
-
-// Define contrast lists
-$light-contrasting-classes: ();
-$dark-contrasting-classes: ();
-
-@each $paletteName, $palette in $matPalettes {
-
-    // Get the contrasts map
-    $contrasts: map-get($palette, 'contrast');
-
-    @each $hue in $matHues {
-
-        // Get the color and the contrasting color
-        $color: map-get($palette, $hue);
-        $contrast: map-get($contrasts, $hue);
-
-        @if ($color != null and $contrast != null) {
+            // Get the color and the contrasting color for the selected
+            // default hue
+            $color: map-get($palette, 'default');
+            $contrast: map-get($palette, 'default-contrast');
 
             // Generate color classes
-            @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+            @include generate-color-classes($paletteName, $color, $contrast, '');
 
             // Add color to the correct list depending on the contrasting color
 
             // If the contrast color is dark
             @if (rgba(black, 1) == rgba($contrast, 1)) {
-                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
             }
                 // if the contrast color is light
             @else {
-                $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-            }
-
-            // Run the generator one more time for default values (500)
-            @if ($hue == 500) {
-
-                // Generate color classes
-                @include generateColorClasses($paletteName, $color, $contrast, '');
-
-                // Add color to the correct list depending on the contrasting color
-
-                // If the contrast color is dark
-                @if (rgba(black, 1) == rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                }
-                    // if the contrast color is light
-                @else {
-                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                }
+                $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
             }
         }
     }
+
+    // Generate contrasting colors
+    @include generate-text-color-levels($dark-contrasting-classes, 'dark');
+    @include generate-text-color-levels($light-contrasting-classes, 'light');
+    @include generate-material-element-colors($dark-contrasting-classes, 'dark');
+    @include generate-material-element-colors($light-contrasting-classes, 'light');
 }
 
-// Generate contrasting colors
-@include generateTextColorLevels($dark-contrasting-classes, 'dark');
-@include generateTextColorLevels($light-contrasting-classes, 'light');
-@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
-@include generateMaterialElementColors($light-contrasting-classes, 'light');
+// -----------------------------------------------------------------------------------------------------
+// @ Generate Fuse color classes for default Material palettes
+// -----------------------------------------------------------------------------------------------------
+@include fuse-color-classes($matPalettes);

src/@fuse/scss/partials/_general.scss

@@ -0,0 +1,70 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Body scroll lock
+// -----------------------------------------------------------------------------------------------------
+html,
+body {
+    display: flex;
+    flex: 1 0 auto;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Boxed body
+// -----------------------------------------------------------------------------------------------------
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
+}
+
+/*----------------------------------------------------------------*/
+/*  @ Text rendering & box sizing
+/*----------------------------------------------------------------*/
+* {
+    text-rendering: optimizeLegibility;
+    -o-text-rendering: optimizeLegibility;
+    -ms-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    -webkit-text-rendering: optimizeLegibility;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+
+    &:before, &:after {
+        box-sizing: border-box;
+    }
+
+    // Remove focus outline
+    &:focus {
+        outline: none;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Responsive images
+// -----------------------------------------------------------------------------------------------------
+
+img {
+    max-width: 100%;
+    height: auto;
+    vertical-align: top;
+    border: none;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Input
+// -----------------------------------------------------------------------------------------------------
+input {
+    border: none;
+    padding: 0 16px;
+}

src/@fuse/scss/partials/_global.scss

@@ -1,13 +0,0 @@
-html,
-body {
-    display: flex;
-    flex: 1 0 auto;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background: #F5F5F5;
-}

src/@fuse/scss/partials/_helpers.scss

@@ -1,11 +1,11 @@
-// ######################
-// POSITION HELPERS
-// ######################
-@each $breakpoint in map-keys($grid-breakpoints) {
+// -----------------------------------------------------------------------------------------------------
+// @ Position helpers
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .position#{$infix}-relative {
             position: relative;
@@ -21,14 +21,14 @@
     }
 }
 
-// ####################################
-// ABSOLUTE POSITION ALIGNMENT HELPERS
-// ####################################
-@each $breakpoint in map-keys($grid-breakpoints) {
+// -----------------------------------------------------------------------------------------------------
+// @ Absolute position alignment helpers
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .align#{$infix}-top {
             top: 0;
@@ -48,9 +48,9 @@
     }
 }
 
-// ######################
-// SIZE HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Size helpers
+// -----------------------------------------------------------------------------------------------------
 @each $prop, $abbrev in (height: h, width: w) {
 
     @for $index from 0 through 180 {
@@ -75,14 +75,14 @@
     }
 }
 
-// ######################
-// SPACING HELPERS
-// ######################
-@each $breakpoint in map-keys($grid-breakpoints) {
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing helpers
+// -----------------------------------------------------------------------------------------------------
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         @each $prop, $abbrev in (margin: m, padding: p) {
 
@@ -168,9 +168,9 @@
     }
 }
 
-// ######################
-// BORDER HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Border helpers
+// -----------------------------------------------------------------------------------------------------
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 
 .border,
@@ -199,7 +199,7 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 .border-horizontal,
-.b-x {
+.bx {
     border-left: $border-style;
     border-right: $border-style;
 }
@@ -210,9 +210,9 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-bottom: $border-style;
 }
 
-// ######################
-// BORDER RADIUS HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Border radius helpers
+// -----------------------------------------------------------------------------------------------------
 .border-radius-100 {
     border-radius: 100%;
 }
@@ -233,9 +233,9 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 16px;
 }
 
-// ######################
-// CURSOR HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Cursor helpers
+// -----------------------------------------------------------------------------------------------------
 .cursor-pointer {
     cursor: pointer;
 }

src/@fuse/scss/partials/_icons.scss

@@ -7,11 +7,11 @@ mat-icon {
     min-height: 24px;
     line-height: 24px;
 
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-        @include media-breakpoint-up($breakpoint) {
+        @include media-breakpoint($materialBreakpoint) {
 
-            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
             @for $size from 2 through 128 {
 

src/@fuse/scss/partials/_material.scss

@@ -1,6 +1,169 @@
-/*----------------------------------------------------------------*/
-/*  Avatars
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin material-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Avatar
+    // -----------------------------------------------------------------------------------------------------
+    .avatar {
+        color: map-get($foreground, text);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Forms
+    // -----------------------------------------------------------------------------------------------------
+    .form-wrapper {
+        background-color: map-get($background, card);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Navigation - Simple
+    // -----------------------------------------------------------------------------------------------------
+    .navigation-simple {
+
+        .item {
+
+            &.selected {
+                background-color: map-get($background, hover);
+            }
+        }
+
+        .subheader {
+            border-top: 1px solid map-get($foreground, divider);
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Pagination - Simple
+    // -----------------------------------------------------------------------------------------------------
+    .simple-pagination {
+        background: map-get($background, card);
+
+        .pagination-item {
+            color: map-get($foreground, secondary-text);
+
+            &:hover {
+                color: map-get($foreground, text);
+            }
+
+            &.disabled {
+                color: map-get($foreground, disabled-text);
+            }
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Price tables
+    // -----------------------------------------------------------------------------------------------------
+    .price-tables {
+
+        .price-table {
+            background: map-get($background, card);
+
+            &.style-1 {
+
+                .price {
+
+                    .currency {
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                    .period {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+
+            &.style-2 {
+
+                .price {
+
+                    .currency {
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                }
+
+                .period {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+
+            &.style-3 {
+
+                .package-type {
+
+                    .subtitle {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+
+                .terms {
+                    color: map-get($foreground, secondary-text);
+                }
+
+                .note {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+        }
+    }
+
+    // -------------------------------------------------------------------------------------------------
+    // @ Table - Simple
+    // -------------------------------------------------------------------------------------------------
+    .simple-table-container {
+        background: map-get($background, card);
+    }
+
+    table {
+
+        &.simple {
+
+            thead {
+
+                tr {
+
+                    th {
+                        color: map-get($foreground, secondary-text);
+                        border-bottom: 1px solid map-get($foreground, divider);
+                    }
+                }
+            }
+
+            tbody {
+
+                tr {
+
+                    td {
+                        border-bottom: 1px solid map-get($foreground, divider);
+                    }
+                }
+            }
+
+            &.clickable {
+
+                tbody {
+
+                    tr {
+
+                        &:hover {
+                            background-color: map-get($background, hover);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Avatar
+// -----------------------------------------------------------------------------------------------------
 .avatar {
     width: 40px;
     min-width: 40px;
@@ -9,9 +172,8 @@
     margin: 0 8px 0 0;
     border-radius: 50%;
     font-size: 17px;
-    font-weight: 500;
+    font-weight: 600;
     text-align: center;
-    color: #FFFFFF;
 
     &.square {
         border-radius: 0;
@@ -58,6 +220,7 @@ mat-icon.status {
 
     &.online {
         color: #4CAF50;
+
         &:before {
             content: "check_circle";
         }
@@ -65,14 +228,15 @@ mat-icon.status {
 
     &.do-not-disturb {
         color: #F44336;
+
         &:before {
-            content: "do_not_disturb_on";
+            content: "remove_circle_outline";
         }
     }
 
     &.away {
-        background-color: #FFC107;
-        color: #FFFFFF;
+        color: #FFC107;
+
         &:before {
             content: "access_time";
         }
@@ -80,18 +244,17 @@ mat-icon.status {
 
     &.offline {
         color: #646464;
-        background-color: #FFFFFF;
+
         &:before {
             content: "not_interested";
         }
     }
 }
 
-/*----------------------------------------------------------------*/
-/*  Forms
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Forms
+// -----------------------------------------------------------------------------------------------------
 .form-wrapper {
-    background: #FFFFFF;
     padding: 16px;
 
     .form-title {
@@ -100,9 +263,9 @@ mat-icon.status {
     }
 }
 
-/*----------------------------------------------------------------*/
-/*  Navigation - Simple
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Navigation - Simple
+// -----------------------------------------------------------------------------------------------------
 .navigation-simple {
 
     .item {
@@ -122,24 +285,15 @@ mat-icon.status {
 
         .title {
             font-size: 13px;
-            font-weight: 500;
+            font-weight: 600;
             line-height: 1;
         }
-
-        &.selected {
-            background-color: rgba(0, 0, 0, 0.06);
-        }
     }
 
     .subheader {
         font-size: 13px;
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
-        font-weight: 500;
+        font-weight: 600;
         margin-top: 8px;
-
-        &.light {
-            border-top: 1px solid rgba(255, 255, 255, 0.12);
-        }
     }
 
     mat-divider {
@@ -147,16 +301,16 @@ mat-icon.status {
     }
 }
 
-/*----------------------------------------------------------------*/
-/*  Pagination
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Pagination - Simple
+// -----------------------------------------------------------------------------------------------------
 .simple-pagination {
     position: relative;
     display: inline-flex;
     flex-direction: row;
-    @include mat-elevation(1);
-    background-color: #FFFFFF;
     padding: 0 8px;
+    border-radius: 4px;
+    @include mat-elevation(1);
 
     .pagination-item {
         display: flex;
@@ -168,32 +322,24 @@ mat-icon.status {
         border-radius: 0;
         margin: 0;
         font-weight: normal;
-        color: rgba(0, 0, 0, 0.54);
-
-        &:hover {
-            color: rgba(0, 0, 0, 0.87);
-        }
 
         &.active {
             cursor: default;
-            color: rgba(0, 0, 0, 0.87);
         }
 
         &.disabled {
             cursor: default;
-            color: rgba(0, 0, 0, 0.26);
         }
     }
 }
 
-/*----------------------------------------------------------------*/
-/*  Price Tables
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Price tables
+// -----------------------------------------------------------------------------------------------------
 .price-tables {
 
     .price-table {
         position: relative;
-        background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
         margin: 12px;
@@ -217,8 +363,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
+                    font-weight: 600;
                 }
 
                 .value {
@@ -230,7 +375,6 @@ mat-icon.status {
                 .period {
                     padding: 0 0 5px 4px;
                     font-size: 17px;
-                    color: rgba(0, 0, 0, 0.54);
                 }
             }
 
@@ -261,14 +405,14 @@ mat-icon.status {
                 left: 50%;
                 transform: translateX(-50%);
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 padding: 6px 8px;
             }
 
             .package-type {
                 padding: 48px 32px 24px 32px;
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -278,8 +422,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
+                    font-weight: 600;
                 }
 
                 .value {
@@ -292,8 +435,7 @@ mat-icon.status {
             .period {
                 padding: 0 32px;
                 font-size: 15px;
-                font-weight: 500;
-                color: rgba(0, 0, 0, 0.54);
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -328,8 +470,7 @@ mat-icon.status {
 
                 .subtitle {
                     font-size: 17px;
-                    color: rgba(0, 0, 0, 0.54);
-                    font-weight: 500;
+                    font-weight: 600;
                 }
             }
 
@@ -339,7 +480,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 15px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -357,7 +498,6 @@ mat-icon.status {
             .terms {
                 margin: 32px;
                 font-size: 15px;
-                color: rgba(0, 0, 0, 0.54);
 
                 .term {
                     padding-bottom: 16px;
@@ -375,17 +515,15 @@ mat-icon.status {
             .note {
                 padding: 8px 32px 16px 32px;
                 text-align: center;
-                color: rgba(0, 0, 0, 0.54);
             }
         }
     }
 }
 
-/*----------------------------------------------------------------*/
-/*  Table - Simple
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Table - Simple
+// -----------------------------------------------------------------------------------------------------
 .simple-table-container {
-    background: #FFFFFF;
 
     .table-title {
         font-size: 20px;
@@ -407,9 +545,7 @@ table {
 
                 th {
                     padding: 16px 8px;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                    font-weight: 600;
                     white-space: nowrap;
 
                     &:first-child {
@@ -429,7 +565,6 @@ table {
 
                 td {
                     padding: 16px 8px;
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                     &:first-child {
                         padding-left: 24px;
@@ -455,12 +590,8 @@ table {
 
                 tr {
                     cursor: pointer;
-
-                    &:hover {
-                        background: rgba(0, 0, 0, 0.03);
-                    }
                 }
             }
         }
     }
-}
+}

src/@fuse/scss/partials/_navigation.scss

@@ -4,7 +4,7 @@
         display: flex;
         align-items: center;
         height: 48px;
-        font-weight: 500;
+        font-weight: 600;
         padding-left: 24px;
         margin-top: 8px;
         font-size: 12px;
@@ -19,7 +19,7 @@
             display: flex;
             align-items: center;
             height: 48px;
-            font-weight: 500;
+            font-weight: 600;
             padding-left: 24px;
             margin-top: 8px;
             font-size: 12px;
@@ -53,7 +53,7 @@
                 height: 20px;
                 padding: 0 7px;
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 border-radius: 20px;
                 transition: opacity 0.2s ease-in-out 0.1s;
                 margin-left: 8px;
@@ -64,11 +64,11 @@
             }
 
             &:hover {
-                background-color: map-get($background, hover);
+                background-color: rgba(0, 0, 0, 0.04);
             }
 
             .mat-ripple-element {
-                background-color: map-get($background, hover);
+                background-color: rgba(0, 0, 0, 0.04);
             }
 
             &.active {
@@ -85,7 +85,6 @@
 
             .nav-link-icon {
                 margin-right: 16px;
-                opacity: 0.7;
             }
 
             .nav-link-icon,
@@ -220,24 +219,27 @@
         }
     }
 
-    // Material style
-    &.material {
+    // Material 2 style
+    &.material2,
+    .material2 & {
 
         .nav-subheader {
-            border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-            &:first-child {
-                border-top: none;
-            }
+            height: 40px;
         }
 
+        .nav-group {
+
+            > .group-title {
+                height: 40px;
+            }
+        }
         .nav-item {
 
             .nav-link {
                 height: 40px;
-                padding: 0 16px;
-                margin: 4px 8px;
-                border-radius: 4px;
+                padding: 0 12px 0 24px;
+                border-radius: 0 20px 20px 0;
+                margin-right: 16px;
             }
         }
     }

src/@fuse/scss/partials/_page-layouts.scss

@@ -1,14 +1,91 @@
-// Page Layouts
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin page-layouts-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .page-layout {
+
+        // Carded layout
+        &.carded {
+
+            // Fullwidth
+            &.fullwidth {
+
+                > .center {
+
+                    > .content-card {
+                        background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
+
+                        > .toolbar {
+                            border-bottom-color: map-get($foreground, divider);
+                        }
+                    }
+                }
+            }
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+
+                > .center {
+
+                    > .content-card {
+                        background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
+
+                        > .toolbar {
+                            border-bottom-color: map-get($foreground, divider);
+                        }
+                    }
+                }
+            }
+        }
+
+        // Simple layout
+        &.simple {
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+
+                > .center {
+
+                    > .content {
+                        background: map-get($background, card);
+                    }
+                }
+
+                // Inner sidebar
+                &.inner-sidebar {
+
+                    > .content {
+
+                        > .center {
+
+                            > .content {
+                                background: map-get($background, card);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Page Layouts
+// -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
-$carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
-
 $header-height: 120px !default;
-$header-height-sm: 100px !default;
 
-// Calculate toolbarless header height
+// Calculate toolbar-less carded header height
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
-$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
 .page-layout {
     position: relative;
@@ -30,10 +107,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             right: 0;
             left: 0;
             height: $carded-header-height;
-
-            @include media-breakpoint-down('sm') {
-                height: $carded-header-height-sm;
-            }
         }
 
         // Fullwidth
@@ -50,18 +123,13 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 width: 100%;
                 min-width: 0;
                 max-width: 100%;
+                height: 100%;
                 max-height: 100%;
 
                 > .header {
                     height: $carded-header-height-without-toolbar !important;
                     min-height: $carded-header-height-without-toolbar !important;
                     max-height: $carded-header-height-without-toolbar !important;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm !important;
-                        min-height: $carded-header-height-without-toolbar-sm !important;
-                        max-height: $carded-header-height-without-toolbar-sm !important;
-                    }
                 }
 
                 > .content-card {
@@ -69,13 +137,13 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 0 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                        border-bottom: 1px solid;
                         height: $carded-toolbar-height;
                         min-height: $carded-toolbar-height;
                         max-height: $carded-toolbar-height;
@@ -143,8 +211,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         flex: 1 1 auto;
 
                         > .content {
-                            overflow: auto;
                             flex: 1 1 auto;
+                            overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
                 }
@@ -166,6 +235,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -221,12 +291,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     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 {
@@ -244,6 +308,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 z-index: 3;
                 margin-left: 32px;
                 margin-right: 32px;
+                width: 100%;
                 min-width: 0;
 
                 > .header {
@@ -251,12 +316,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     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 {
@@ -264,14 +323,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 1 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
                         flex: 1 1 auto;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                        border-bottom: 1px solid;
                         height: $carded-toolbar-height;
                         min-height: $carded-toolbar-height;
                         max-height: $carded-toolbar-height;
@@ -296,7 +355,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     width: calc(100% - 32px);
                     min-width: 0;
 
-                    @include media-breakpoint-down('md') {
+                    @include media-breakpoint('lt-lg') {
                         width: calc(100% - 64px);
                     }
 
@@ -346,6 +405,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
@@ -358,6 +418,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         > .content {
                             flex: 1 1 auto;
                             overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
                 }
@@ -379,6 +440,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -479,7 +541,8 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 flex: 1 1 auto;
                 z-index: 3;
                 min-width: 0;
-                @include mat-elevation(7);
+                width: 100%;
+                @include mat-elevation(1);
 
                 > .header {
                     height: $header-height;
@@ -500,16 +563,18 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
                 > .center {
                     flex: 1 1 auto;
                     overflow: auto;
+                    -webkit-overflow-scrolling: touch;
                 }
             }
 
-            // Inner Sidebar
+            // Inner sidebar
             &.inner-sidebar {
                 flex-direction: column;
                 overflow: hidden;
@@ -528,12 +593,19 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                         .content {
                             overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
 
                     > .center {
                         flex: 1 1 auto;
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
+
+                        > .content {
+                            border-radius: 8px;
+                            @include mat-elevation(1);
+                        }
                     }
                 }
             }
@@ -594,7 +666,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         min-height: 100%;
     }
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
 
         // Smaller margins
         &.carded {

src/@fuse/scss/partials/_print.scss

@@ -9,7 +9,6 @@
     .page-break-before {
         display: none;
     }
-
 }
 
 @media print {
@@ -47,6 +46,13 @@
             display: none !important;
         }
 
+        #main,
+        #container-1,
+        #container-2,
+        #container-3 {
+            padding: 0 !important;
+        }
+
         .ps {
             overflow: visible !important;
         }

src/@fuse/scss/partials/_reset.scss

@@ -1,83 +0,0 @@
-/*----------------------------------------------------------------*/
-/*  Reset
-/*----------------------------------------------------------------*/
-* {
-    text-rendering: optimizeLegibility;
-    -o-text-rendering: optimizeLegibility;
-    -ms-text-rendering: optimizeLegibility;
-    -moz-text-rendering: optimizeLegibility;
-    -webkit-text-rendering: optimizeLegibility;
-    -webkit-tap-highlight-color: transparent;
-    box-sizing: border-box;
-
-    &:before, &:after {
-        box-sizing: border-box;
-    }
-
-    // Remove focus outline
-    &:focus {
-        outline: none;
-    }
-}
-
-html, body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-// Reset non angular-material input's default browser/os styles
-*:not(mat-form-field) {
-
-    > input {
-        border: none;
-        border-radius: 0;
-        padding: 0;
-        margin: 0;
-    }
-
-    > input[type="text"],
-    > input[type="tel"],
-    > input[type="email"],
-    > input[type="search"],
-    > input[type="password"],
-    > input[type="button"],
-    > button,
-    > input[type="submit"],
-    > input[type="image"],
-    > textarea {
-        appearance: none;
-        border: none;
-        border-radius: 0;
-        padding: 0;
-        margin: 0;
-    }
-}
-
-*:not(mat-form-field) {
-
-    > input[type="button"],
-    > button,
-    > input[type="submit"] {
-        background: none;
-    }
-}
-
-button {
-    border-radius: 0;
-    font-family: inherit;
-    font-size: inherit;
-    padding: 0;
-    margin: 0;
-    appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: top;
-    border: none;
-}

src/@fuse/scss/partials/_scrollbars.scss

@@ -12,12 +12,12 @@ body:not(.is-mobile) {
 
     ::-webkit-scrollbar-thumb {
         border: 2px solid transparent;
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px;
     }
 
     ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+        border-radius: 12px;
     }
 }

src/@fuse/scss/partials/_toolbar.scss

@@ -1,9 +0,0 @@
-.toolbar {
-
-    .toolbar-separator {
-        height: 48px;
-        width: 1px;
-        border-right: 1px solid rgba(0, 0, 0, 0.12);
-        margin: 0 12px;
-    }
-}

src/@fuse/scss/partials/_typography.scss

@@ -1,6 +1,47 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin typography-theme($theme) {
+
+    $background: map-get($theme, background);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    a {
+        color: map-get($accent, default);
+    }
+
+    code {
+
+        &:not(.highlight) {
+            background-color: map-get($background, app-bar);
+        }
+    }
+
+    .changelog {
+
+        .entry {
+            background-color: map-get($background, card);
+        }
+    }
+
+    .text-boxed {
+        @if ($is-dark) {
+            background-color: rgba(255, 255, 255, 0.12);
+            color: rgba(255, 255, 255, 0.54);
+        } @else {
+            background-color: rgba(0, 0, 0, 0.12);
+            color: rgba(0, 0, 0, 0.54);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
 html {
     font-size: 62.5%;
-    font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
+    font-family: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
     line-height: 1.4 !important;
     letter-spacing: -0.1px !important;
 }
@@ -46,10 +87,9 @@ h6, .h6 {
 
 // Links
 a {
-    color: mat-color($accent);
     text-decoration: none;
 
-    &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
+    &:not(.mat-button):not(.mat-raised-button):not(.mat-flat-button):not(.mat-stroked-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
 
         &:hover, &:active {
             text-decoration: underline;
@@ -103,11 +143,10 @@ code {
     font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;;
 
     &:not(.highlight) {
-        background: rgba(0, 0, 0, 0.065);
         color: #106CC8;
-        margin: 0 1px;
         padding: 2px 3px;
         border-radius: 2px;
+        line-height: 1.7;
     }
 }
 
@@ -237,6 +276,7 @@ strong {
     line-height: 1.25;
 }
 
+.line-height-1\.5,
 .line-height-1\.50 {
     line-height: 1.5;
 }
@@ -245,24 +285,29 @@ strong {
     line-height: 1.75;
 }
 
+// Letter spacing helpers
+.letter-spacing-condensed {
+    letter-spacing: -0.02em;
+}
+
+.letter-spacing-normal {
+    letter-spacing: normal;
+}
+
+.letter-spacing-relaxed {
+    letter-spacing: 0.02em;
+}
+
 // Boxed text
 .text-boxed {
     border-radius: 2px;
     padding: 4px 8px;
     margin: 0 8px;
     font-size: 11px;
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.54);
-    background-color: rgba(0, 0, 0, 0.12);
+    font-weight: 600;
     white-space: nowrap;
 }
 
-// Boxed text light
-.text-boxed-light {
-    @extend .text-boxed;
-    background-color: rgba(255, 255, 255, 0.7);
-}
-
 // Truncate
 .text-truncate {
     display: block;
@@ -280,7 +325,6 @@ strong {
 .changelog {
 
     .entry {
-        background: white;
         margin-bottom: 24px;
         padding: 24px 32px;
         @include mat-elevation(2);
@@ -355,6 +399,10 @@ strong {
                 li {
                     margin-bottom: 6px;
                     letter-spacing: 0.015em;
+
+                    ul {
+                        margin-top: 6px;
+                    }
                 }
             }
         }
@@ -389,4 +437,4 @@ strong {
         border-left-color: #03A9F4;
         color: rgba(0, 0, 0, 0.87);
     }
-}
+}

src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss

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

src/@fuse/scss/partials/plugins/_ngx-color-picker.scss

@@ -11,6 +11,7 @@
         height: 140px;
         overflow-y: auto;
         overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
 
         > hr {
             display: none;

src/@fuse/scss/partials/plugins/_ngx-datatable.scss

@@ -1,3 +1,76 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin ngx-datatable-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    ngx-datatable {
+
+        &.material {
+            background: map-get($background, card);
+            color: map-get($foreground, text);
+
+            .datatable-header {
+
+                .datatable-header-cell {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+
+            .datatable-body {
+
+                .datatable-row-wrapper {
+                    border-bottom-color: map-get($foreground, divider);
+
+                    &:first-child {
+                        border-top-color: map-get($foreground, divider);
+                    }
+
+                    .datatable-body-row {
+
+                        .datatable-body-cell {
+                            color: map-get($foreground, text);
+                        }
+                    }
+                }
+            }
+
+            .datatable-footer {
+                color: map-get($foreground, secondary-text);
+
+                .datatable-pager {
+
+                    a {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+
+            &:not(.cell-selection) {
+
+                .datatable-body {
+
+                    .datatable-row-wrapper {
+
+                        .datatable-body-row {
+
+                            &:hover {
+                                background-color: map-get($background, hover);
+
+                                .datatable-row-group {
+                                    background-color: map-get($background, hover);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .ngx-datatable {
 
     &.material {
@@ -42,12 +115,11 @@
             }
 
             .datatable-row-wrapper {
-                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                border-bottom: 1px solid;
 
                 &:first-child {
-                    border-top: 1px solid rgba(0, 0, 0, 0.12);
+                    border-top: 1px solid;
                 }
-
                 .datatable-body-cell {
                     display: inline-flex;
                     align-items: center;
@@ -118,48 +190,63 @@
 .datatable-icon-filter:before {
     content: "filter_list";
 }
+
 .datatable-icon-collapse:before {
     content: "unfold_less";
 }
+
 .datatable-icon-expand:before {
     content: "unfold_more";
 }
+
 .datatable-icon-close:before {
     content: "close";
 }
+
 .datatable-icon-up:before {
     content: "keyboard_arrow_up";
 }
+
 .datatable-icon-down:before {
     content: "keyboard_arrow_down";
 }
+
 .datatable-icon-sort:before {
     content: "sort";
 }
+
 .datatable-icon-done:before {
     content: "done";
 }
+
 .datatable-icon-done-all:before {
     content: "done_all";
 }
+
 .datatable-icon-search:before {
     content: "search";
 }
+
 .datatable-icon-pin:before {
     content: "lock";
 }
+
 .datatable-icon-add:before {
     content: "add";
 }
+
 .datatable-icon-left:before {
     content: "chevron_left";
 }
+
 .datatable-icon-right:before {
     content: "chevron_right";
 }
+
 .datatable-icon-skip:before {
     content: "skip_next";
 }
+
 .datatable-icon-prev:before {
     content: "skip_previous";
 }

src/@fuse/scss/theme.scss

@@ -0,0 +1,30 @@
+@import "src/@fuse/components/countdown/countdown.theme";
+@import "src/@fuse/components/material-color-picker/material-color-picker.theme";
+@import "src/@fuse/components/search-bar/search-bar.theme";
+@import "src/@fuse/components/shortcuts/shortcuts.theme";
+@import "src/@fuse/components/sidebar/sidebar.theme";
+@import "src/@fuse/components/theme-options/theme-options.theme";
+@import "src/@fuse/components/widget/widget.theme";
+
+@mixin fuse-core-theme($theme) {
+
+    // Theming for Fuse core styles
+    @include colors-theme($theme);
+    @include cards-theme($theme);
+    @include material-theme($theme);
+    @include page-layouts-theme($theme);
+    @include typography-theme($theme);
+
+    // Theming for Fuse components
+    @include fuse-countdown-theme($theme);
+    @include fuse-search-bar-theme($theme);
+    @include fuse-shortcuts-theme($theme);
+    @include fuse-sidebar-theme($theme);
+    @include fuse-theme-options-theme($theme);
+    @include fuse-material-color-picker-theme($theme);
+    @include fuse-widget-theme($theme);
+
+    // Theming for 3rd party components
+    @include ngx-datatable-theme($theme);
+}
+

src/@fuse/scss/theming.scss

@@ -1,66 +0,0 @@
-@import '~@angular/material/theming';
-
-// Custom color maps
-$mat-white: (
-    500: white,
-    contrast: (
-        500: $black-87-opacity
-    )
-);
-
-$mat-black: (
-    500: black,
-    contrast: (
-        500: white,
-    )
-);
-
-$mat-fusedark: (
-    50: #ECECEE,
-    100: #C5C6CB,
-    200: #9EA1A9,
-    300: #7D818C,
-    400: #5C616F,
-    500: #3C4252,
-    600: #353A48,
-    700: #2D323E,
-    800: #262933,
-    900: #1E2129,
-    A100: #C5C6CB,
-    A200: #9EA1A9,
-    A400: #5C616F,
-    A700: #2D323E,
-    contrast: (
-        50: $black-87-opacity,
-        100: $black-87-opacity,
-        200: $black-87-opacity,
-        300: white,
-        400: white,
-        500: $white-87-opacity,
-        600: $white-87-opacity,
-        700: $white-87-opacity,
-        800: $white-87-opacity,
-        900: $white-87-opacity,
-        A100: $black-87-opacity,
-        A200: $white-87-opacity,
-        A400: $white-87-opacity,
-        A700: $white-87-opacity,
-    )
-);
-
-// Define the Material palettes
-$primary: mat-palette($mat-fusedark);
-$accent: mat-palette($mat-light-blue, 600, 400, 700);
-$warn: mat-palette($mat-red);
-
-// Create the Material theme object
-$theme: mat-light-theme($primary, $accent, $warn);
-
-// Store the background and foreground colors for easier access
-$background: map-get($theme, background);
-$foreground: map-get($theme, foreground);
-
-// Force the input field font sizes to 16px
-$typography: mat-typography-config(
-    $input: mat-typography-level(16px, 1.125, 400)
-)

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

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
+import { Router, RoutesRecognized } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -93,15 +93,18 @@ export class FuseConfigService
         // Set the config from the default config
         this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig));
 
-        // Reload the default config on every navigation start if
-        // the current config is different from the default one
+        // Reload the default layout config on every RoutesRecognized event
+        // if the current layout config is different from the default one
         this._router.events
-            .pipe(filter(event => event instanceof NavigationStart))
+            .pipe(filter(event => event instanceof RoutesRecognized))
             .subscribe(() => {
-                if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) )
+                if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
                 {
-                    // Clone the default config
-                    const config = _.cloneDeep(this._defaultConfig);
+                    // Clone the current config
+                    const config = _.cloneDeep(this._configSubject.getValue());
+
+                    // Reset the layout from the default config
+                    config.layout = _.cloneDeep(this._defaultConfig.layout);
 
                     // Set the config
                     this._configSubject.next(config);

src/@fuse/services/match-media.service.ts

@@ -1,6 +1,7 @@
 import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -38,7 +39,11 @@ export class FuseMatchMediaService
      */
     private _init(): void
     {
-        this._observableMedia
+        this._observableMedia.asObservable()
+            .pipe(
+                debounceTime(500),
+                distinctUntilChanged()
+            )
             .subscribe((change: MediaChange) => {
                 if ( this.activeMediaQuery !== change.mqAlias )
                 {

src/@fuse/services/splash-screen.service.ts

@@ -3,6 +3,8 @@ import { DOCUMENT } from '@angular/common';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { NavigationEnd, Router } from '@angular/router';
 
+import { filter, take } from 'rxjs/operators';
+
 @Injectable({
     providedIn: 'root'
 })
@@ -46,19 +48,16 @@ export class FuseSplashScreenService
         if ( this.splashScreenEl )
         {
             // Hide it on the first NavigationEnd event
-            const hideOnLoad = this._router.events.subscribe((event) => {
-                    if ( event instanceof NavigationEnd )
-                    {
-                        setTimeout(() => {
-                            this.hide();
-
-                            // Unsubscribe from this event so it
-                            // won't get triggered again
-                            hideOnLoad.unsubscribe();
-                        }, 0);
-                    }
-                }
-            );
+            this._router.events
+                .pipe(
+                    filter((event => event instanceof NavigationEnd)),
+                    take(1)
+                )
+                .subscribe(() => {
+                    setTimeout(() => {
+                        this.hide();
+                    });
+                });
         }
     }
 

src/@fuse/types/fuse-config.ts

@@ -1,25 +1,33 @@
 export interface FuseConfig
 {
+    colorTheme: string;
+    customScrollbars: boolean;
     layout: {
         style: string,
         width: 'fullwidth' | 'boxed',
         navbar: {
-            background: string,
+            primaryBackground: string,
+            secondaryBackground: string,
             hidden: boolean,
             folded: boolean,
             position: 'left' | 'right' | 'top',
             variant: string
         },
         toolbar: {
+            customBackgroundColor: boolean,
             background: string,
             hidden: boolean,
             position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
         }
         footer: {
+            customBackgroundColor: boolean,
             background: string,
             hidden: boolean,
             position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
+        },
+        sidepanel: {
+            hidden: boolean,
+            position: 'left' | 'right'
         }
     };
-    customScrollbars: boolean;
 }

src/app/app.component.html

@@ -1,29 +1,38 @@
+<!-- PROGRESS BAR -->
+<fuse-progress-bar></fuse-progress-bar>
+<!-- / PROGRESS BAR -->
+
 <!-- VERTICAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
     <vertical-layout-1></vertical-layout-1>
 </ng-container>
+<!-- / VERTICAL LAYOUT 1 -->
 
 <!-- VERTICAL LAYOUT 2 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-2'">
     <vertical-layout-2></vertical-layout-2>
 </ng-container>
+<!-- / VERTICAL LAYOUT 2 -->
 
 <!-- VERTICAL LAYOUT 3 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
     <vertical-layout-3></vertical-layout-3>
 </ng-container>
+<!-- / VERTICAL LAYOUT 3 -->
 
 <!-- HORIZONTAL LAYOUT 1 -->
 <ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
     <horizontal-layout-1></horizontal-layout-1>
 </ng-container>
+<!-- / HORIZONTAL LAYOUT 1 -->
 
 <!-- THEME OPTIONS PANEL -->
-<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
+<button mat-icon-button class="warn mat-elevation-z2 theme-options-button"
         (click)="toggleSidebarOpen('themeOptionsPanel')">
     <mat-icon>settings</mat-icon>
 </button>
 
 <fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
     <fuse-theme-options></fuse-theme-options>
-</fuse-sidebar>
+</fuse-sidebar>
+<!-- / THEME OPTIONS PANEL -->

src/app/app.component.scss

@@ -11,7 +11,7 @@
     .theme-options-button {
         position: absolute;
         top: 160px;
-        right: 70px;
+        right: 0;
         width: 48px;
         height: 48px;
         line-height: 48px;
@@ -23,8 +23,15 @@
         opacity: .90;
         z-index: 998;
 
-        @include media-breakpoint-down('md') {
-            right: 0;
+        &.right-side-panel {
+
+            @include media-breakpoint('gt-md') {
+                right: 70px;
+            }
+        }
+
+        &.side-panel-hidden {
+            right: 0 !important;
         }
 
         mat-icon {
@@ -41,4 +48,4 @@
         min-width: 360px;
         max-width: 360px;
     }
-}
+}

src/app/app.component.ts

@@ -22,8 +22,8 @@ import { locale as navigationTurkish } from 'app/navigation/i18n/tr';
 })
 export class AppComponent implements OnInit, OnDestroy
 {
-    navigation: any;
     fuseConfig: any;
+    navigation: any;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -72,10 +72,43 @@ export class AppComponent implements OnInit, OnDestroy
         // Use a language
         this._translateService.use('en');
 
+        /**
+         * ----------------------------------------------------------------------------------------------------
+         * ngxTranslate Fix Start
+         * ----------------------------------------------------------------------------------------------------
+         */
+
+        /**
+         * If you are using a language other than the default one, i.e. Turkish in this case,
+         * you may encounter an issue where some of the components are not actually being
+         * translated when your app first initialized.
+         *
+         * This is related to ngxTranslate module and below there is a temporary fix while we
+         * are moving the multi language implementation over to the Angular's core language
+         * service.
+         **/
+
+        // Set the default language to 'en' and then back to 'tr'.
+        // '.use' cannot be used here as ngxTranslate won't switch to a language that's already
+        // been selected and there is no way to force it, so we overcome the issue by switching
+        // the default language back and forth.
+        /**
+         setTimeout(() => {
+            this._translateService.setDefaultLang('en');
+            this._translateService.setDefaultLang('tr');
+         });
+         */
+
+        /**
+         * ----------------------------------------------------------------------------------------------------
+         * ngxTranslate Fix End
+         * ----------------------------------------------------------------------------------------------------
+         */
+
         // Add is-mobile class to the body if the platform is mobile
         if ( this._platform.ANDROID || this._platform.IOS )
         {
-            this.document.body.className += ' is-mobile';
+            this.document.body.classList.add('is-mobile');
         }
 
         // Set the private defaults
@@ -95,7 +128,31 @@ export class AppComponent implements OnInit, OnDestroy
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
+
                 this.fuseConfig = config;
+
+                // Boxed
+                if ( this.fuseConfig.layout.width === 'boxed' )
+                {
+                    this.document.body.classList.add('boxed');
+                }
+                else
+                {
+                    this.document.body.classList.remove('boxed');
+                }
+
+                // Color theme - Use normal for loop for IE11 compatibility
+                for ( let i = 0; i < this.document.body.classList.length; i++ )
+                {
+                    const className = this.document.body.classList[i];
+
+                    if ( className.startsWith('theme-') )
+                    {
+                        this.document.body.classList.remove(className);
+                    }
+                }
+
+                this.document.body.classList.add(this.fuseConfig.colorTheme);
             });
     }
 

src/app/app.module.ts

@@ -5,45 +5,23 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatButtonModule, MatIconModule } from '@angular/material';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
+import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 
 import { fuseConfig } from 'app/fuse-config';
 
-import { FakeDbService } from 'app/fake-db/fake-db.service';
 import { AppComponent } from 'app/app.component';
-import { AppStoreModule } from 'app/store/store.module';
 import { LayoutModule } from 'app/layout/layout.module';
+import { SampleModule } from 'app/main/sample/sample.module';
 
 const appRoutes: Routes = [
-    {
-        path        : 'apps',
-        loadChildren: './main/apps/apps.module#AppsModule'
-    },
-    {
-        path        : 'pages',
-        loadChildren: './main/pages/pages.module#PagesModule'
-    },
-    {
-        path        : 'ui',
-        loadChildren: './main/ui/ui.module#UIModule'
-    },
-    {
-        path        : 'documentation',
-        loadChildren: './main/documentation/documentation.module#DocumentationModule'
-    },
-    {
-        path        : 'angular-material-elements',
-        loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
-    },
     {
         path      : '**',
-        redirectTo: 'apps/dashboards/analytics'
+        redirectTo: 'sample'
     }
 ];
 
@@ -58,10 +36,6 @@ const appRoutes: Routes = [
         RouterModule.forRoot(appRoutes),
 
         TranslateModule.forRoot(),
-        InMemoryWebApiModule.forRoot(FakeDbService, {
-            delay             : 0,
-            passThruUnknownUrl: true
-        }),
 
         // Material moment date module
         MatMomentDateModule,
@@ -72,13 +46,14 @@ const appRoutes: Routes = [
 
         // Fuse modules
         FuseModule.forRoot(fuseConfig),
+        FuseProgressBarModule,
         FuseSharedModule,
         FuseSidebarModule,
         FuseThemeOptionsModule,
 
         // App modules
         LayoutModule,
-        AppStoreModule
+        SampleModule
     ],
     bootstrap   : [
         AppComponent

src/app/app.theme.scss

@@ -0,0 +1,230 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Custom color maps for Fuse
+// -----------------------------------------------------------------------------------------------------
+$fuse-white: (
+    500: white,
+    contrast: (
+        500: $dark-primary-text
+    )
+);
+
+$fuse-black: (
+    500: black,
+    contrast: (
+        500: $light-primary-text,
+    )
+);
+
+$fuse-navy: (
+    50: #ECECEE,
+    100: #C5C6CB,
+    200: #9EA1A9,
+    300: #7D818C,
+    400: #5C616F,
+    500: #3C4252,
+    600: #353A48,
+    700: #2D323E,
+    800: #262933,
+    900: #1E2129,
+    A100: #C5C6CB,
+    A200: #9EA1A9,
+    A400: #5C616F,
+    A700: #2D323E,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text,
+    )
+);
+
+// Generate Fuse color classes for custom palettes
+$custom_palettes: (
+    fuse-white: $fuse-white,
+    fuse-black: $fuse-black,
+    fuse-navy: $fuse-navy
+);
+
+@include fuse-color-classes($custom_palettes);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Typography
+// -----------------------------------------------------------------------------------------------------
+
+// Force the input field font sizes to 16px
+$typography: mat-typography-config(
+    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $title: mat-typography-level(20px, 32px, 600),
+    $body-2: mat-typography-level(14px, 24px, 600),
+    $button: mat-typography-level(14px, 14px, 600),
+    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
+);
+
+// Setup the typography
+@include angular-material-typography($typography);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Component theming
+// -----------------------------------------------------------------------------------------------------
+
+// Import app and page component themes here to enable theming for them
+@import "src/app/layout/components/chat-panel/chat-panel.theme";
+@import "src/app/layout/components/toolbar/toolbar.theme";
+
+// Define a mixin for easier access
+@mixin components-theme($theme) {
+
+    // Layout components
+    @include chat-panel-theme($theme);
+    @include toolbar-theme($theme);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define the default theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$default-primary-palette: mat-palette($fuse-navy);
+$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
+$default-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
+
+// Add ".theme-default" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-default {
+
+    // Create an Angular Material theme from the $theme map
+    @include angular-material-theme($theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($theme);
+
+    // Apply the theme to the user components
+    @include components-theme($theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $palettes: (
+        primary: $default-primary-palette,
+        accent: $default-accent-palette,
+        warn: $default-warn-palette
+    );
+
+    @include fuse-color-classes($palettes);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a yellow light theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$yellow-light-theme-primary-palette: mat-palette($fuse-navy, 600, 400, 700);
+$yellow-light-theme-accent-palette: mat-palette($mat-yellow, 600, 400, 700);
+$yellow-light-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);
+
+// Add ".theme-yellow-light" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-yellow-light {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($yellow-light-theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($yellow-light-theme);
+
+    // Apply the theme to the user components
+    @include components-theme($yellow-light-theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $palettes: (
+        primary: $yellow-light-theme-primary-palette,
+        accent: $yellow-light-theme-accent-palette,
+        warn: $yellow-light-theme-warn-palette
+    );
+
+    @include fuse-color-classes($palettes);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a blue-gray dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue);
+$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
+$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
+
+// Add ".theme-blue-gray-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-blue-gray-dark {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($blue-gray-dark-theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($blue-gray-dark-theme);
+
+    // Apply the theme to the user components
+    @include components-theme($blue-gray-dark-theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $palettes: (
+        primary: $blue-gray-dark-theme-primary-palette,
+        accent: $blue-gray-dark-theme-accent-palette,
+        warn: $blue-gray-dark-theme-warn-palette
+    );
+
+    @include fuse-color-classes($palettes);
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a pink dark theme
+// -----------------------------------------------------------------------------------------------------
+
+// Define the primary, accent and warn palettes
+$pink-dark-theme-primary-palette: mat-palette($mat-pink);
+$pink-dark-theme-accent-palette: mat-palette($mat-pink);
+$pink-dark-theme-warn-palette: mat-palette($mat-red);
+
+// Create the Material theme object
+$pink-dark-theme: mat-dark-theme($pink-dark-theme-primary-palette, $pink-dark-theme-accent-palette, $pink-dark-theme-warn-palette);
+
+// Add ".theme-pink-dark" class to the body to activate this theme.
+// Class name must start with "theme-" !!!
+body.theme-pink-dark {
+
+    // Generate the Angular Material theme
+    @include angular-material-theme($pink-dark-theme);
+
+    // Apply the theme to the Fuse Core
+    @include fuse-core-theme($pink-dark-theme);
+
+    // Apply the theme to the user components
+    @include components-theme($pink-dark-theme);
+
+    // Generate Fuse color classes for primary, accent and warn colors
+    $palettes: (
+        primary: $pink-dark-theme-primary-palette,
+        accent: $pink-dark-theme-accent-palette,
+        warn: $pink-dark-theme-warn-palette
+    );
+
+    @include fuse-color-classes($palettes);
+}

src/app/fake-db/academy.ts

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

src/app/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/fake-db/chat-panel.ts

@@ -1,343 +0,0 @@
-export class ChatPanelFakeDb
-{
-    public static contacts = [
-        {
-            'id'    : '5725a680b3249760ea21de52',
-            'name'  : 'Alice Freeman',
-            'avatar': 'assets/images/avatars/alice.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '2'
-        },
-        {
-            'id'    : '5725a680606588342058356d',
-            'name'  : 'Arnold',
-            'avatar': 'assets/images/avatars/Arnold.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68009e20d0a9e9acf2a',
-            'name'  : 'Barrera',
-            'avatar': 'assets/images/avatars/Barrera.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6809fdd915739187ed5',
-            'name'  : 'Blair',
-            'avatar': 'assets/images/avatars/Blair.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '3'
-        },
-        {
-            'id'    : '5725a68007920cf75051da64',
-            'name'  : 'Boyle',
-            'avatar': 'assets/images/avatars/Boyle.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '1'
-        },
-        {
-            'id'    : '5725a68031fdbb1db2c1af47',
-            'name'  : 'Christy',
-            'avatar': 'assets/images/avatars/Christy.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680bc670af746c435e2',
-            'name'  : 'Copeland',
-            'avatar': 'assets/images/avatars/Copeland.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680e7eb988a58ddf303',
-            'name'  : 'Estes',
-            'avatar': 'assets/images/avatars/Estes.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680dcb077889f758961',
-            'name'  : 'Harper',
-            'avatar': 'assets/images/avatars/Harper.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6806acf030f9341e925',
-            'name'  : 'Helen',
-            'avatar': 'assets/images/avatars/Helen.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680ae1ae9a3c960d487',
-            'name'  : 'Henderson',
-            'avatar': 'assets/images/avatars/Henderson.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680b8d240c011dd224b',
-            'name'  : 'Josefina',
-            'avatar': 'assets/images/avatars/Josefina.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68034cb3968e1f79eac',
-            'name'  : 'Katina',
-            'avatar': 'assets/images/avatars/Katina.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6801146cce777df2a08',
-            'name'  : 'Lily',
-            'avatar': 'assets/images/avatars/Lily.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '10'
-        },
-        {
-            'id'    : '5725a6808a178bfd034d6ecf',
-            'name'  : 'Mai',
-            'avatar': 'assets/images/avatars/Mai.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680653c265f5c79b5a9',
-            'name'  : 'Nancy',
-            'avatar': 'assets/images/avatars/Nancy.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680bbcec3cc32a8488a',
-            'name'  : 'Nora',
-            'avatar': 'assets/images/avatars/Nora.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '7'
-        },
-        {
-            'id'    : '5725a6803d87f1b77e17b62b',
-            'name'  : 'Odessa',
-            'avatar': 'assets/images/avatars/Odessa.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '1'
-        },
-        {
-            'id'    : '5725a680e87cb319bd9bd673',
-            'name'  : 'Reyna',
-            'avatar': 'assets/images/avatars/Reyna.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6802d10e277a0f35775',
-            'name'  : 'Shauna',
-            'avatar': 'assets/images/avatars/Shauna.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680aef1e5cf26dd3d1f',
-            'name'  : 'Shepard',
-            'avatar': 'assets/images/avatars/Shepard.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680cd7efa56a45aea5d',
-            'name'  : 'Tillman',
-            'avatar': 'assets/images/avatars/Tillman.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : '',
-            'unread': '99+'
-        },
-        {
-            'id'    : '5725a680fb65c91a82cb35e2',
-            'name'  : 'Trevino',
-            'avatar': 'assets/images/avatars/Trevino.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68018c663044be49cbf',
-            'name'  : 'Tyson',
-            'avatar': 'assets/images/avatars/Tyson.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6809413bf8a0a5272b1',
-            'name'  : 'Velazquez',
-            'avatar': 'assets/images/avatars/Velazquez.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        }
-    ];
-
-    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'    : '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'    : '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': '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'    : '5725a680606588342058356d',
-                    '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'    : '5725a680606588342058356d',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-04-22T01:10:00.299Z'
-                }
-            ]
-        },
-        {
-            'id'    : '3725a6809413bf8a0a5272b4',
-            'dialog': [
-                {
-                    'who'    : '5725a68009e20d0a9e9acf2a',
-                    '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'    : '',
-            'chatList': [
-                {
-                    'chatId'         : '1725a680b3249760ea21de52',
-                    'contactId'      : '5725a680b3249760ea21de52',
-                    'lastMessageTime': '2017-06-12T02:10:18.931Z'
-                },
-                {
-                    'chatId'         : '2725a680b8d240c011dd2243',
-                    'contactId'      : '5725a680606588342058356d',
-                    'lastMessageTime': '2017-02-18T10:30:18.931Z'
-                },
-                {
-                    'chatId'         : '3725a6809413bf8a0a5272b4',
-                    'contactId'      : '5725a68009e20d0a9e9acf2a',
-                    'lastMessageTime': '2017-03-18T12:30:18.931Z'
-                }
-            ]
-        }
-    ];
-
-}

src/app/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'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680606588342058356d',
-            'name'  : 'Arnold',
-            'avatar': 'assets/images/avatars/Arnold.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68009e20d0a9e9acf2a',
-            'name'  : 'Barrera',
-            'avatar': 'assets/images/avatars/Barrera.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': null
-        },
-        {
-            'id'    : '5725a6809fdd915739187ed5',
-            'name'  : 'Blair',
-            'avatar': 'assets/images/avatars/Blair.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': 3
-        },
-        {
-            'id'    : '5725a68007920cf75051da64',
-            'name'  : 'Boyle',
-            'avatar': 'assets/images/avatars/Boyle.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68031fdbb1db2c1af47',
-            'name'  : 'Christy',
-            'avatar': 'assets/images/avatars/Christy.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680bc670af746c435e2',
-            'name'  : 'Copeland',
-            'avatar': 'assets/images/avatars/Copeland.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680e7eb988a58ddf303',
-            'name'  : 'Estes',
-            'avatar': 'assets/images/avatars/Estes.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680dcb077889f758961',
-            'name'  : 'Harper',
-            'avatar': 'assets/images/avatars/Harper.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6806acf030f9341e925',
-            'name'  : 'Helen',
-            'avatar': 'assets/images/avatars/Helen.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680ae1ae9a3c960d487',
-            'name'  : 'Henderson',
-            'avatar': 'assets/images/avatars/Henderson.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680b8d240c011dd224b',
-            'name'  : 'Josefina',
-            'avatar': 'assets/images/avatars/Josefina.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68034cb3968e1f79eac',
-            'name'  : 'Katina',
-            'avatar': 'assets/images/avatars/Katina.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6801146cce777df2a08',
-            'name'  : 'Lily',
-            'avatar': 'assets/images/avatars/Lily.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6808a178bfd034d6ecf',
-            'name'  : 'Mai',
-            'avatar': 'assets/images/avatars/Mai.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680653c265f5c79b5a9',
-            'name'  : 'Nancy',
-            'avatar': 'assets/images/avatars/Nancy.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680bbcec3cc32a8488a',
-            'name'  : 'Nora',
-            'avatar': 'assets/images/avatars/Nora.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6803d87f1b77e17b62b',
-            'name'  : 'Odessa',
-            'avatar': 'assets/images/avatars/Odessa.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680e87cb319bd9bd673',
-            'name'  : 'Reyna',
-            'avatar': 'assets/images/avatars/Reyna.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6802d10e277a0f35775',
-            'name'  : 'Shauna',
-            'avatar': 'assets/images/avatars/Shauna.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': null
-        },
-        {
-            'id'    : '5725a680aef1e5cf26dd3d1f',
-            'name'  : 'Shepard',
-            'avatar': 'assets/images/avatars/Shepard.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            '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'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68018c663044be49cbf',
-            'name'  : 'Tyson',
-            'avatar': 'assets/images/avatars/Tyson.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6809413bf8a0a5272b1',
-            'name'  : 'Velazquez',
-            'avatar': 'assets/images/avatars/Velazquez.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        }
-    ];
-
-    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/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/fake-db/dashboard-analytics.ts

@@ -1,602 +0,0 @@
-export class AnalyticsDashboardDb
-{
-    public static widgets = {
-        widget1: {
-            chartType: 'line',
-            datasets : {
-                '2015': [
-                    {
-                        label: 'Sales',
-                        data : [1.9, 3, 3.4, 2.2, 2.9, 3.9, 2.5, 3.8, 4.1, 3.8, 3.2, 2.9],
-                        fill : 'start'
-
-                    }
-                ],
-                '2016': [
-                    {
-                        label: 'Sales',
-                        data : [2.2, 2.9, 3.9, 2.5, 3.8, 3.2, 2.9, 1.9, 3, 3.4, 4.1, 3.8],
-                        fill : 'start'
-
-                    }
-                ],
-                '2017': [
-                    {
-                        label: 'Sales',
-                        data : [3.9, 2.5, 3.8, 4.1, 1.9, 3, 3.8, 3.2, 2.9, 3.4, 2.2, 2.9],
-                        fill : 'start'
-
-                    }
-                ]
-
-            },
-            labels   : ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-            colors   : [
-                {
-                    borderColor              : '#42a5f5',
-                    backgroundColor          : '#42a5f5',
-                    pointBackgroundColor     : '#1e88e5',
-                    pointHoverBackgroundColor: '#1e88e5',
-                    pointBorderColor         : '#ffffff',
-                    pointHoverBorderColor    : '#ffffff'
-                }
-            ],
-            options  : {
-                spanGaps           : false,
-                legend             : {
-                    display: false
-                },
-                maintainAspectRatio: false,
-                layout             : {
-                    padding: {
-                        top  : 32,
-                        left : 32,
-                        right: 32
-                    }
-                },
-                elements           : {
-                    point: {
-                        radius          : 4,
-                        borderWidth     : 2,
-                        hoverRadius     : 4,
-                        hoverBorderWidth: 2
-                    },
-                    line : {
-                        tension: 0
-                    }
-                },
-                scales             : {
-                    xAxes: [
-                        {
-                            gridLines: {
-                                display       : false,
-                                drawBorder    : false,
-                                tickMarkLength: 18
-                            },
-                            ticks    : {
-                                fontColor: '#ffffff'
-                            }
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            display: false,
-                            ticks  : {
-                                min     : 1.5,
-                                max     : 5,
-                                stepSize: 0.5
-                            }
-                        }
-                    ]
-                },
-                plugins            : {
-                    filler      : {
-                        propagate: false
-                    },
-                    xLabelsOnTop: {
-                        active: true
-                    }
-                }
-            }
-        },
-        widget2: {
-            conversion: {
-                value   : 492,
-                ofTarget: 13
-            },
-            chartType : 'bar',
-            datasets  : [
-                {
-                    label: 'Conversion',
-                    data : [221, 428, 492, 471, 413, 344, 294]
-                }
-            ],
-            labels    : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-            colors    : [
-                {
-                    borderColor    : '#42a5f5',
-                    backgroundColor: '#42a5f5'
-                }
-            ],
-            options   : {
-                spanGaps           : false,
-                legend             : {
-                    display: false
-                },
-                maintainAspectRatio: false,
-                layout             : {
-                    padding: {
-                        top   : 24,
-                        left  : 16,
-                        right : 16,
-                        bottom: 16
-                    }
-                },
-                scales             : {
-                    xAxes: [
-                        {
-                            display: false
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            display: false,
-                            ticks  : {
-                                min: 100,
-                                max: 500
-                            }
-                        }
-                    ]
-                }
-            }
-        },
-        widget3: {
-            impressions: {
-                value   : '87k',
-                ofTarget: 12
-            },
-            chartType  : 'line',
-            datasets   : [
-                {
-                    label: 'Impression',
-                    data : [67000, 54000, 82000, 57000, 72000, 57000, 87000, 72000, 89000, 98700, 112000, 136000, 110000, 149000, 98000],
-                    fill : false
-                }
-            ],
-            labels     : ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11', 'Jan 12', 'Jan 13', 'Jan 14', 'Jan 15'],
-            colors     : [
-                {
-                    borderColor: '#5c84f1'
-                }
-            ],
-            options    : {
-                spanGaps           : false,
-                legend             : {
-                    display: false
-                },
-                maintainAspectRatio: false,
-                elements           : {
-                    point: {
-                        radius          : 2,
-                        borderWidth     : 1,
-                        hoverRadius     : 2,
-                        hoverBorderWidth: 1
-                    },
-                    line : {
-                        tension: 0
-                    }
-                },
-                layout             : {
-                    padding: {
-                        top   : 24,
-                        left  : 16,
-                        right : 16,
-                        bottom: 16
-                    }
-                },
-                scales             : {
-                    xAxes: [
-                        {
-                            display: false
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            display: false,
-                            ticks  : {
-                                // min: 100,
-                                // max: 500
-                            }
-                        }
-                    ]
-                }
-            }
-        },
-        widget4: {
-            visits   : {
-                value   : 882,
-                ofTarget: -9
-            },
-            chartType: 'bar',
-            datasets : [
-                {
-                    label: 'Visits',
-                    data : [432, 428, 327, 363, 456, 267, 231]
-                }
-            ],
-            labels   : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-            colors   : [
-                {
-                    borderColor    : '#f44336',
-                    backgroundColor: '#f44336'
-                }
-            ],
-            options  : {
-                spanGaps           : false,
-                legend             : {
-                    display: false
-                },
-                maintainAspectRatio: false,
-                layout             : {
-                    padding: {
-                        top   : 24,
-                        left  : 16,
-                        right : 16,
-                        bottom: 16
-                    }
-                },
-                scales             : {
-                    xAxes: [
-                        {
-                            display: false
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            display: false,
-                            ticks  : {
-                                min: 150,
-                                max: 500
-                            }
-                        }
-                    ]
-                }
-            }
-        },
-        widget5: {
-            chartType: 'line',
-            datasets : {
-                'yesterday': [
-                    {
-                        label: 'Visitors',
-                        data : [190, 300, 340, 220, 290, 390, 250, 380, 410, 380, 320, 290],
-                        fill : 'start'
-
-                    },
-                    {
-                        label: 'Page views',
-                        data : [2200, 2900, 3900, 2500, 3800, 3200, 2900, 1900, 3000, 3400, 4100, 3800],
-                        fill : 'start'
-                    }
-                ],
-                'today'    : [
-                    {
-                        label: 'Visitors',
-                        data : [410, 380, 320, 290, 190, 390, 250, 380, 300, 340, 220, 290],
-                        fill : 'start'
-                    },
-                    {
-                        label: 'Page Views',
-                        data : [3000, 3400, 4100, 3800, 2200, 3200, 2900, 1900, 2900, 3900, 2500, 3800],
-                        fill : 'start'
-
-                    }
-                ]
-            },
-            labels   : ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'],
-            colors   : [
-                {
-                    borderColor              : '#3949ab',
-                    backgroundColor          : '#3949ab',
-                    pointBackgroundColor     : '#3949ab',
-                    pointHoverBackgroundColor: '#3949ab',
-                    pointBorderColor         : '#ffffff',
-                    pointHoverBorderColor    : '#ffffff'
-                },
-                {
-                    borderColor              : 'rgba(30, 136, 229, 0.87)',
-                    backgroundColor          : 'rgba(30, 136, 229, 0.87)',
-                    pointBackgroundColor     : 'rgba(30, 136, 229, 0.87)',
-                    pointHoverBackgroundColor: 'rgba(30, 136, 229, 0.87)',
-                    pointBorderColor         : '#ffffff',
-                    pointHoverBorderColor    : '#ffffff'
-                }
-            ],
-            options  : {
-                spanGaps           : false,
-                legend             : {
-                    display: false
-                },
-                maintainAspectRatio: false,
-                tooltips           : {
-                    position : 'nearest',
-                    mode     : 'index',
-                    intersect: false
-                },
-                layout             : {
-                    padding: {
-                        left : 24,
-                        right: 32
-                    }
-                },
-                elements           : {
-                    point: {
-                        radius          : 4,
-                        borderWidth     : 2,
-                        hoverRadius     : 4,
-                        hoverBorderWidth: 2
-                    }
-                },
-                scales             : {
-                    xAxes: [
-                        {
-                            gridLines: {
-                                display: false
-                            },
-                            ticks    : {
-                                fontColor: 'rgba(0,0,0,0.54)'
-                            }
-                        }
-                    ],
-                    yAxes: [
-                        {
-                            gridLines: {
-                                tickMarkLength: 16
-                            },
-                            ticks    : {
-                                stepSize: 1000
-                            }
-                        }
-                    ]
-                },
-                plugins            : {
-                    filler: {
-                        propagate: false
-                    }
-                }
-            }
-        },
-        widget6: {
-            markers: [
-                {
-                    lat  : 52,
-                    lng  : -73,
-                    label: '120'
-                },
-                {
-                    lat  : 37,
-                    lng  : -104,
-                    label: '498'
-                },
-                {
-                    lat  : 21,
-                    lng  : -7,
-                    label: '443'
-                },
-                {
-                    lat  : 55,
-                    lng  : 75,
-                    label: '332'
-                },
-                {
-                    lat  : 51,
-                    lng  : 7,
-                    label: '50'
-                },
-                {
-                    lat  : 31,
-                    lng  : 12,
-                    label: '221'
-                },
-                {
-                    lat  : 45,
-                    lng  : 44,
-                    label: '455'
-                },
-                {
-                    lat  : -26,
-                    lng  : 134,
-                    label: '231'
-                },
-                {
-                    lat  : -9,
-                    lng  : -60,
-                    label: '67'
-                },
-                {
-                    lat  : 33,
-                    lng  : 104,
-                    label: '665'
-                }
-            ],
-            styles : [
-                {
-                    'featureType': 'administrative',
-                    'elementType': 'labels.text.fill',
-                    'stylers'    : [
-                        {
-                            'color': '#444444'
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'landscape',
-                    'elementType': 'all',
-                    'stylers'    : [
-                        {
-                            'color': '#f2f2f2'
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'poi',
-                    'elementType': 'all',
-                    'stylers'    : [
-                        {
-                            'visibility': 'off'
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'road',
-                    'elementType': 'all',
-                    'stylers'    : [
-                        {
-                            'saturation': -100
-                        },
-                        {
-                            'lightness': 45
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'road.highway',
-                    'elementType': 'all',
-                    'stylers'    : [
-                        {
-                            'visibility': 'simplified'
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'road.arterial',
-                    'elementType': 'labels.icon',
-                    'stylers'    : [
-                        {
-                            'visibility': 'off'
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'transit',
-                    'elementType': 'all',
-                    'stylers'    : [
-                        {
-                            'visibility': 'off'
-                        }
-                    ]
-                },
-                {
-                    'featureType': 'water',
-                    'elementType': 'all',
-                    'stylers'    : [
-                        {
-                            'color': '#039be5'
-                        },
-                        {
-                            'visibility': 'on'
-                        }
-                    ]
-                }
-            ]
-        },
-        widget7: {
-            scheme : {
-                domain: ['#4867d2', '#5c84f1', '#89a9f4']
-            },
-            devices: [
-                {
-                    name  : 'Desktop',
-                    value : 92.8,
-                    change: -0.6
-                },
-                {
-                    name  : 'Mobile',
-                    value : 6.1,
-                    change: 0.7
-                },
-                {
-                    name  : 'Tablet',
-                    value : 1.1,
-                    change: 0.1
-                }
-            ]
-        },
-        widget8: {
-            scheme : {
-                domain: ['#5c84f1']
-            },
-            today  : '12,540',
-            change : {
-                value     : 321,
-                percentage: 2.05
-            },
-            data   : [
-                {
-                    name  : 'Sales',
-                    series: [
-                        {
-                            name : 'Jan 1',
-                            value: 540
-                        },
-                        {
-                            name : 'Jan 2',
-                            value: 539
-                        },
-                        {
-                            name : 'Jan 3',
-                            value: 538
-                        },
-                        {
-                            name : 'Jan 4',
-                            value: 539
-                        },
-                        {
-                            name : 'Jan 5',
-                            value: 540
-                        },
-                        {
-                            name : 'Jan 6',
-                            value: 539
-                        },
-                        {
-                            name : 'Jan 7',
-                            value: 540
-                        }
-                    ]
-                }
-            ],
-            dataMin: 538,
-            dataMax: 541
-        },
-        widget9: {
-            rows: [
-                {
-                    title     : 'Holiday Travel',
-                    clicks    : 3621,
-                    conversion: 90
-                },
-                {
-                    title     : 'Get Away Deals',
-                    clicks    : 703,
-                    conversion: 7
-                },
-                {
-                    title     : 'Airfare',
-                    clicks    : 532,
-                    conversion: 0
-                },
-                {
-                    title     : 'Vacation',
-                    clicks    : 201,
-                    conversion: 8
-                },
-                {
-                    title     : 'Hotels',
-                    clicks    : 94,
-                    conversion: 4
-                }
-            ]
-        }
-    };
-}

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

@@ -1,103 +0,0 @@
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-import { ProjectDashboardDb } from 'app/fake-db/dashboard-project';
-import { AnalyticsDashboardDb } from 'app/fake-db/dashboard-analytics';
-import { CalendarFakeDb } from 'app/fake-db/calendar';
-import { ECommerceFakeDb } from 'app/fake-db/e-commerce';
-import { AcademyFakeDb } from 'app/fake-db/academy';
-import { MailFakeDb } from 'app/fake-db/mail';
-import { ChatFakeDb } from 'app/fake-db/chat';
-import { FileManagerFakeDb } from 'app/fake-db/file-manager';
-import { ContactsFakeDb } from 'app/fake-db/contacts';
-import { TodoFakeDb } from 'app/fake-db/todo';
-import { ScrumboardFakeDb } from 'app/fake-db/scrumboard';
-import { InvoiceFakeDb } from 'app/fake-db/invoice';
-import { ProfileFakeDb } from 'app/fake-db/profile';
-import { SearchFakeDb } from 'app/fake-db/search';
-import { FaqFakeDb } from 'app/fake-db/faq';
-import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base';
-import { IconsFakeDb } from 'app/fake-db/icons';
-import { ChatPanelFakeDb } from 'app/fake-db/chat-panel';
-import { QuickPanelFakeDb } from 'app/fake-db/quick-panel';
-
-export class FakeDbService implements InMemoryDbService
-{
-    createDb(): any
-    {
-        return {
-            // Dashboards
-            'project-dashboard-projects' : ProjectDashboardDb.projects,
-            'project-dashboard-widgets'  : ProjectDashboardDb.widgets,
-            'analytics-dashboard-widgets': AnalyticsDashboardDb.widgets,
-
-            // Calendar
-            'calendar': CalendarFakeDb.data,
-
-            // E-Commerce
-            'e-commerce-dashboard': ECommerceFakeDb.dashboard,
-            'e-commerce-products' : ECommerceFakeDb.products,
-            'e-commerce-orders'   : ECommerceFakeDb.orders,
-
-            // Academy
-            'academy-categories': AcademyFakeDb.categories,
-            'academy-courses'   : AcademyFakeDb.courses,
-            'academy-course'    : AcademyFakeDb.course,
-
-            // Mail
-            'mail-mails'  : MailFakeDb.mails,
-            'mail-folders': MailFakeDb.folders,
-            'mail-filters': MailFakeDb.filters,
-            'mail-labels' : MailFakeDb.labels,
-
-            // Chat
-            'chat-contacts': ChatFakeDb.contacts,
-            'chat-chats'   : ChatFakeDb.chats,
-            'chat-user'    : ChatFakeDb.user,
-
-            // File Manager
-            'file-manager': FileManagerFakeDb.files,
-
-            // Contacts
-            'contacts-contacts': ContactsFakeDb.contacts,
-            'contacts-user'    : ContactsFakeDb.user,
-
-            // Todo
-            'todo-todos'  : TodoFakeDb.todos,
-            'todo-filters': TodoFakeDb.filters,
-            'todo-tags'   : TodoFakeDb.tags,
-
-            // Scrumboard
-            'scrumboard-boards': ScrumboardFakeDb.boards,
-
-            // Invoice
-            'invoice': InvoiceFakeDb.invoice,
-
-            // Profile
-            'profile-timeline'     : ProfileFakeDb.timeline,
-            'profile-photos-videos': ProfileFakeDb.photosVideos,
-            'profile-about'        : ProfileFakeDb.about,
-
-            // Search
-            'search-classic': SearchFakeDb.classic,
-            'search-table'  : SearchFakeDb.table,
-
-            // FAQ
-            'faq': FaqFakeDb.data,
-
-            // Knowledge base
-            'knowledge-base': KnowledgeBaseFakeDb.data,
-
-            // Icons
-            'icons': IconsFakeDb.icons,
-
-            // Chat Panel
-            'chat-panel-contacts' : ChatPanelFakeDb.contacts,
-            'chat-panel-chats': ChatPanelFakeDb.chats,
-            'chat-panel-user': ChatPanelFakeDb.user,
-
-            // Quick Panel
-            'quick-panel-notes' : QuickPanelFakeDb.notes,
-            'quick-panel-events': QuickPanelFakeDb.events
-        };
-    }
-}

src/app/fake-db/faq.ts

@@ -1,61 +0,0 @@
-export class FaqFakeDb
-{
-    public static data = [
-        {
-            'question': 'Proident tempor est nulla irure ad est?',
-            'answer': 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.'
-        },
-        {
-            'question': 'Ullamco duis commodo sint ad aliqua aute?',
-            'answer': 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.'
-        },
-        {
-            'question': 'Eiusmod non occaecat pariatur Lorem in ex?',
-            'answer': '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.'
-        },
-        {
-            'question': 'Lorem magna cillum consequat consequat mollit?',
-            'answer': 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.'
-        },
-        {
-            'question': 'Quis irure cupidatat ad consequat reprehenderit excepteur?',
-            'answer': 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.'
-        },
-        {
-            'question': 'Officia voluptate tempor ut mollit ea cillum?',
-            'answer': 'Deserunt veniam reprehenderit do elit magna ut.'
-        },
-        {
-            'question': 'Sunt fugiat officia nisi minim sunt duis?',
-            'answer': 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.'
-        },
-        {
-            'question': 'Non cupidatat enim quis aliquip minim laborum?',
-            'answer': '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.'
-        },
-        {
-            'question': 'Dolor ex occaecat magna labore laboris qui?',
-            'answer': '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.'
-        },
-        {
-            'question': 'Nisi et ullamco minim ea proident tempor?',
-            'answer': 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.'
-        },
-        {
-            'question': 'Amet sunt et quis amet commodo quis?',
-            'answer': 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.'
-        },
-        {
-            'question': 'Ut eiusmod ex ea eiusmod culpa incididunt?',
-            'answer': 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.'
-        },
-        {
-            'question': 'Proident reprehenderit laboris pariatur ut et nisi?',
-            'answer': 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.'
-        },
-        {
-            'question': 'Aliqua aliquip aliquip aliquip et exercitation aute?',
-            'answer': '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.'
-        }
-    ];
-}

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