Small tweak in forms page

Updated the changelog

angular.json

@@ -30,7 +30,8 @@
                         "styles": [
                             "src/styles.scss"
                         ],
-                        "scripts": []
+                        "scripts": [],
+                        "showCircularDependencies": false
                     },
                     "configurations": {
                         "production": {
@@ -49,6 +50,18 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true
+                        },
+                        "ec": {
+                            "sourceMap": true,
+                            "extractCss": true
+                        },
+                        "hmr": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
                         }
                     }
                 },
@@ -63,12 +76,10 @@
                         },
                         "hmr": {
                             "hmr": true,
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.hmr.ts"
-                                }
-                            ]
+                            "browserTarget": "fuse:build:hmr"
+                        },
+                        "ec": {
+                            "browserTarget": "fuse:build:ec"
                         }
                     }
                 },

e2e/src/app.po.ts

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

package.json

@@ -1,12 +1,12 @@
 {
   "name": "fuse",
-  "version": "6.1.1",
+  "version": "6.3.0",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open",
-    "start-hmr": "ng serve --configuration hmr -sm=false",
-    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
+    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
     "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
     "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
     "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
@@ -19,67 +19,68 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.0.5",
-    "@angular/cdk": "6.2.1",
-    "@angular/common": "6.0.5",
-    "@angular/compiler": "6.0.5",
-    "@angular/core": "6.0.5",
+    "@angular/animations": "6.1.4",
+    "@angular/cdk": "6.4.6",
+    "@angular/common": "6.1.4",
+    "@angular/compiler": "6.1.4",
+    "@angular/core": "6.1.4",
     "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.5",
-    "@angular/http": "6.0.5",
-    "@angular/material": "6.2.1",
-    "@angular/material-moment-adapter": "6.2.1",
-    "@angular/platform-browser": "6.0.5",
-    "@angular/platform-browser-dynamic": "6.0.5",
-    "@angular/router": "6.0.5",
-    "@ngrx/effects": "6.0.1",
-    "@ngrx/router-store": "6.0.1",
-    "@ngrx/store": "6.0.1",
-    "@ngrx/store-devtools": "6.0.1",
+    "@angular/forms": "6.1.4",
+    "@angular/http": "6.1.4",
+    "@angular/material": "6.4.6",
+    "@angular/material-moment-adapter": "6.4.6",
+    "@angular/platform-browser": "6.1.4",
+    "@angular/platform-browser-dynamic": "6.1.4",
+    "@angular/router": "6.1.4",
+    "@ngrx/effects": "6.1.0",
+    "@ngrx/router-store": "6.1.0",
+    "@ngrx/store": "6.1.0",
+    "@ngrx/store-devtools": "6.1.0",
     "@ngx-translate/core": "10.0.2",
-    "@swimlane/ngx-charts": "8.1.0",
-    "@swimlane/ngx-datatable": "13.0.1",
-    "@swimlane/ngx-dnd": "4.0.0",
+    "@swimlane/dragula": "3.7.3",
+    "@swimlane/ngx-charts": "9.0.0",
+    "@swimlane/ngx-datatable": "13.1.0",
+    "@swimlane/ngx-dnd": "5.0.6",
     "@types/prismjs": "1.9.0",
     "angular-calendar": "0.25.2",
-    "angular-in-memory-web-api": "0.6.0",
+    "angular-in-memory-web-api": "0.6.1",
     "chart.js": "2.7.2",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.7",
-    "d3": "5.4.0",
+    "d3": "5.7.0",
     "hammerjs": "2.0.8",
     "lodash": "4.17.10",
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.3.3",
+    "ngx-color-picker": "6.6.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.4.0",
-    "prismjs": "1.14.0",
-    "rxjs": "6.2.1",
-    "rxjs-compat": "6.2.1",
+    "prismjs": "1.15.0",
+    "rxjs": "6.2.2",
+    "rxjs-compat": "6.2.2",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "6.0.8",
-    "@angular/compiler-cli": "6.0.5",
-    "@angular/language-service": "6.0.5",
-    "@angular-devkit/build-angular": "0.6.8",
+    "@angular/cli": "6.1.5",
+    "@angular/compiler-cli": "6.1.4",
+    "@angular/language-service": "6.1.4",
+    "@angular-devkit/build-angular": "0.7.5",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.109",
+    "@types/lodash": "4.14.116",
     "@types/node": "8.9.5",
     "codelyzer": "4.2.1",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "1.7.1",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.1",
+    "karma-coverage-istanbul-reporter": "2.0.2",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.3.2",
+    "protractor": "5.4.0",
     "ts-node": "5.0.1",
     "tslint": "5.9.1",
     "typescript": "2.7.2",

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/etc/early-sunrise.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,26 +1,42 @@
 <ng-container *ngIf="!item.hidden">
 
     <!-- normal collapse -->
-    <a class="nav-link" *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" *ngIf="item.url && !item.function"
-       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [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'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
-       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [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'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
@@ -36,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

@@ -1,20 +1,38 @@
 <ng-container *ngIf="!item.hidden">
 
     <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [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'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
-    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
-       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [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'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

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

@@ -1,5 +1,4 @@
-<div id="main-navigation" class="nav"
-     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
+<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
 
     <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
@@ -7,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>
@@ -21,7 +21,8 @@
         <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'" [item]="item"></fuse-nav-horizontal-collapsable>
+            <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>
 
         </ng-container>

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

@@ -4,7 +4,7 @@ fuse-navigation {
     display: flex;
     flex: 1 0 auto;
 
-    #main-navigation {
+    > .nav {
         margin: 0;
         padding: 0;
         width: 100%;

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

@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 
-@Injectable()
+import { FuseNavigationItem } from '@fuse/types';
+
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseNavigationService
 {
-    flatNavigation: any[] = [];
-
     onItemCollapsed: Subject<any>;
     onItemCollapseToggled: Subject<any>;
 
@@ -138,39 +140,30 @@ export class FuseNavigationService
      * Get flattened navigation array
      *
      * @param navigation
+     * @param flatNavigation
      * @returns {any[]}
      */
-    getFlatNavigation(navigation): any
+    getFlatNavigation(navigation, flatNavigation: FuseNavigationItem[] = []): any
     {
-        for ( const navItem of navigation )
+        for ( const item of navigation )
         {
-            if ( navItem.type === 'item' )
+            if ( item.type === 'item' )
             {
-                this.flatNavigation.push({
-                    id        : navItem.id || null,
-                    title     : navItem.title || null,
-                    translate : navItem.translate || null,
-                    type      : navItem.type,
-                    icon      : navItem.icon || null,
-                    url       : navItem.url || null,
-                    function  : navItem.function || null,
-                    exactMatch: navItem.exactMatch || false,
-                    badge     : navItem.badge || null
-                });
+                flatNavigation.push(item);
 
                 continue;
             }
 
-            if ( navItem.type === 'collapse' || navItem.type === 'group' )
+            if ( item.type === 'collapsable' || item.type === 'group' )
             {
-                if ( navItem.children )
+                if ( item.children )
                 {
-                    this.getFlatNavigation(navItem.children);
+                    this.getFlatNavigation(item.children, flatNavigation);
                 }
             }
         }
 
-        return this.flatNavigation;
+        return flatNavigation;
     }
 
     /**

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

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

@@ -1,6 +1,6 @@
 <ng-container *ngIf="!item.hidden">
 
-    <div class="group-title">
+    <div class="group-title" [ngClass]="item.classes">
         <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
     </div>
 

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

@@ -1,36 +1,38 @@
 <ng-container *ngIf="!item.hidden">
 
     <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [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" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function"
-          (click)="item.function()" matRipple>
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [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" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+    <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'">
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

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

@@ -0,0 +1,132 @@
+import { Injectable } from '@angular/core';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseProgressBarService
+{
+    // Private
+    private _bufferValue: BehaviorSubject<number>;
+    private _mode: BehaviorSubject<string>;
+    private _value: BehaviorSubject<number>;
+    private _visible: BehaviorSubject<boolean>;
+
+    /**
+     * Constructor
+     *
+     * @param {Router} _router
+     */
+    constructor(
+        private _router: Router
+    )
+    {
+        // Initialize the service
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ 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 this._visible.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // 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))
+            .subscribe(() => {
+                this.show();
+            });
+
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
+            .subscribe(() => {
+                this.hide();
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the progress bar
+     */
+    show(): void
+    {
+        this._visible.next(true);
+    }
+
+    /**
+     * Hide the progress bar
+     */
+    hide(): void
+    {
+        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('sm') {
+        @include media-breakpoint-down('xs') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('sm') {
+                @include media-breakpoint-down('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('sm') {
+                @include media-breakpoint-down('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.scss

@@ -19,6 +19,10 @@
                     display: flex !important;
                     flex: 1;
                     height: 100%;
+
+                    > div {
+                        flex: 1 1 auto !important;
+                    }
                 }
             }
         }

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

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
     display: flex;
     flex-direction: column;
@@ -7,12 +9,18 @@ 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') {
+        min-width: 0 !important;
+        max-width: 80vw !important;
+        width: 80vw !important;
+    }
 
     &.left-positioned {
         left: 0;
@@ -37,12 +45,6 @@ fuse-sidebar {
         position: absolute !important;
         top: 0;
         bottom: 0;
-
-        &:not(.unfolded) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-        }
     }
 
     &.animations-enabled {
@@ -59,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,8 +1,10 @@
-import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation
+} from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/internal/operators';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@@ -40,6 +42,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostBinding('class.locked-open')
     isLockedOpen: boolean;
 
+    // Folded width
+    @Input()
+    foldedWidth: number;
+
+    // Folded auto trigger on hover
+    @Input()
+    foldedAutoTriggerOnHover: boolean;
+
     // Folded unfolded
     @HostBinding('class.unfolded')
     unfolded: boolean;
@@ -48,6 +58,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @Input()
     invisibleOverlay: boolean;
 
+    // Folded changed
+    @Output()
+    foldedChanged: EventEmitter<boolean>;
+
+    // Opened changed
+    @Output()
+    openedChanged: EventEmitter<boolean>;
+
     // Private
     private _folded: boolean;
     private _fuseConfig: any;
@@ -84,8 +102,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     )
     {
         // Set the defaults
+        this.foldedAutoTriggerOnHover = true;
+        this.foldedWidth = 64;
+        this.foldedChanged = new EventEmitter();
+        this.openedChanged = new EventEmitter();
         this.opened = false;
-        // this.folded = false;
         this.position = 'left';
         this.invisibleOverlay = false;
 
@@ -99,7 +120,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
-    // Folded
+    /**
+     * Folded
+     *
+     * @param {boolean} value
+     */
     @Input()
     set folded(value: boolean)
     {
@@ -112,23 +137,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
         // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
         if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
         }
         else
         {
             sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -143,6 +168,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             // Fold the sidebar
             this.fold();
 
+            // Set the folded width
+            this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+            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.addClass(this._elementRef.nativeElement, 'folded');
@@ -153,10 +183,18 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             // Unfold the sidebar
             this.unfold();
 
+            // Remove the folded width
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
             // Remove the style and class
             this._renderer.removeStyle(sibling, styleRule);
             this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
         }
+
+        // Emit the 'foldedChanged' event
+        this.foldedChanged.emit(this.folded);
     }
 
     get folded(): boolean
@@ -282,7 +320,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                 // Get the active status
                 const isActive = this._observableMedia.isActive(this.lockedOpen);
-
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
                 {
@@ -301,6 +338,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     // Force the the opened status to true
                     this.opened = true;
 
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
                     // If the sidebar was folded, forcefully fold it again
                     if ( this._wasFolded )
                     {
@@ -329,6 +369,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     // Force the the opened status to close
                     this.opened = false;
 
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
                     // Hide the sidebar
                     this._hideSidebar();
                 }
@@ -357,23 +400,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
         // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
         if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
         }
         else
         {
             sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -385,6 +428,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Fold the sidebar
         this.fold();
 
+        // Set the folded width
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        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.addClass(this._elementRef.nativeElement, 'folded');
@@ -558,6 +606,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Set the opened status
         this.opened = true;
 
+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
@@ -581,6 +632,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Set the opened status
         this.opened = false;
 
+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
         // Hide the sidebar
         this._hideSidebar();
 
@@ -609,20 +663,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseenter')
     onMouseEnter(): void
     {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        // Only work if the auto trigger is enabled
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Enable the animations
-        this._enableAnimations();
-
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+        this.unfoldTemporarily();
     }
 
     /**
@@ -631,20 +678,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseleave')
     onMouseLeave(): void
     {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        // Only work if the auto trigger is enabled
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Enable the animations
-        this._enableAnimations();
-
-        // Fold the sidebar back
-        this.unfolded = false;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+        this.foldTemporarily();
     }
 
     /**
@@ -703,4 +743,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this.fold();
         }
     }
+
+    /**
+     * Fold the temporarily unfolded sidebar back
+     */
+    foldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Fold the sidebar back
+        this.unfolded = false;
+
+        // Set the folded width
+        const styleValue = this.foldedWidth + 'px';
+
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
+
+        // Remove the folded width
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
 }

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

@@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
 
 import { FuseSidebarComponent } from './sidebar.component';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseSidebarService
 {
     // Private

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">
 
@@ -73,6 +87,20 @@
                             <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                     <!-- TOOLBAR -->
@@ -91,6 +119,14 @@
                             <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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -109,6 +145,31 @@
                             <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"
+                                                    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>
 
                 </ng-container>
@@ -146,6 +207,20 @@
                             <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                     <!-- TOOLBAR -->
@@ -164,6 +239,14 @@
                             <mat-radio-button class="mb-12" value="below">Below</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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -182,6 +265,31 @@
                             <mat-radio-button class="mb-12" value="below">Below</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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                 </ng-container>
@@ -219,6 +327,20 @@
                             <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                     <!-- TOOLBAR -->
@@ -236,6 +358,14 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above 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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -253,6 +383,31 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above 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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                 </ng-container>
@@ -285,6 +440,22 @@
                             <mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant (Vertical):</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                     <!-- TOOLBAR -->
@@ -302,6 +473,14 @@
                             <mat-radio-button class="mb-12" value="below">Below</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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -319,6 +498,31 @@
                             <mat-radio-button class="mb-12" value="above-static">Above Static</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">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    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>
 
                 </ng-container>
@@ -338,35 +542,6 @@
 
         </div>
 
-        <!-- COLORS -->
-        <div class="group">
-
-            <h2>Colors</h2>
-
-            <div class="colors">
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Toolbar Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
-                </div>
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Navbar Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
-                </div>
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Footer Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
-                </div>
-
-            </div>
-
-        </div>
-
     </form>
 
 </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;
@@ -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;
@@ -57,14 +57,11 @@
                     padding: 0 8px;
                     font-size: 16px;
                     font-weight: 500;
-                    background: white;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 h3 {
                     font-size: 14px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                     margin: 24px 0 16px 0;
                     padding: 0;
 
@@ -73,11 +70,6 @@
                     }
                 }
             }
-
-            .colors {
-                display: block !important;
-                width: 100%;
-            }
         }
     }
 }

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,27 +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({
-                    hidden    : new FormControl(),
-                    position  : new FormControl(),
-                    folded    : new FormControl(),
-                    background: 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({
-                    hidden    : new FormControl(),
-                    position  : new FormControl(),
-                    background: new FormControl()
+                toolbar  : this._formBuilder.group({
+                    background           : new FormControl(),
+                    customBackgroundColor: new FormControl(),
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
                 }),
-                footer : this._formBuilder.group({
-                    hidden    : new FormControl(),
-                    position  : new FormControl(),
-                    background: 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
@@ -172,22 +185,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            hidden    : false,
-                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
                         },
-                        toolbar: {
-                            hidden    : false,
-                            position  : 'below-static',
-                            background: 'mat-white-500-bg'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'below-static'
                         },
-                        footer : {
-                            hidden    : false,
-                            position  : 'below-static',
-                            background: 'mat-fuse-dark-900-bg'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'below-static'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -200,22 +221,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            hidden    : false,
-                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
                         },
-                        toolbar: {
-                            hidden    : false,
-                            position  : 'below',
-                            background: 'mat-white-500-bg'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'below'
                         },
-                        footer : {
-                            hidden    : false,
-                            position  : 'below',
-                            background: 'mat-fuse-dark-900-bg'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'below'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -228,22 +257,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            hidden    : false,
-                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            layout             : 'vertical-style-1'
                         },
-                        toolbar: {
-                            hidden    : false,
-                            position  : 'above-static',
-                            background: 'mat-white-500-bg'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'above-static'
                         },
-                        footer : {
-                            hidden    : false,
-                            position  : 'above-static',
-                            background: 'mat-fuse-dark-900-bg'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'above-static'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -256,22 +293,30 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
             {
                 this.form.patchValue({
                     layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            hidden    : false,
-                            position  : 'top',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'top',
+                            variant            : 'vertical-style-1'
                         },
-                        toolbar: {
-                            hidden    : false,
-                            position  : 'above',
-                            background: 'mat-white-500-bg'
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'above'
                         },
-                        footer : {
-                            hidden    : false,
-                            position  : 'above-fixed',
-                            background: 'mat-fuse-dark-900-bg'
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'above-fixed'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
                         }
                     }
                 });
@@ -294,5 +339,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.theme.scss

@@ -0,0 +1,13 @@
+@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);
+        }
+    }
+}

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-mat-sidenav/fuse-mat-sidenav.service.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { MatSidenav } from '@angular/material';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseMatSidenavHelperService
 {
     sidenavInstances: MatSidenav[];

src/@fuse/fuse.module.ts

@@ -1,27 +1,8 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 
-import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
-import { FuseCopierService } from '@fuse/services/copier.service';
-import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
-import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
-import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
+import { FUSE_CONFIG } from '@fuse/services/config.service';
 
-@NgModule({
-    entryComponents: [],
-    providers      : [
-        FuseConfigService,
-        FuseCopierService,
-        FuseMatchMediaService,
-        FuseMatSidenavHelperService,
-        FuseNavigationService,
-        FuseSidebarService,
-        FuseSplashScreenService,
-        FuseTranslationLoaderService
-    ]
-})
+@NgModule()
 export class FuseModule
 {
     constructor(@Optional() @SkipSelf() parentModule: FuseModule)

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,15 +10,12 @@
 // 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";

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";

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

@@ -25,7 +25,7 @@ $grid-breakpoints: (
 
 @mixin media-breakpoint($breakpointName) {
 
-    $mediaQuery: map_get($breakpoints, $breakpointName);
+    $mediaQuery: map-get($breakpoints, $breakpointName);
 
     @if ($mediaQuery != null) {
 

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

@@ -6,11 +6,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,7 +30,7 @@
     background-color: rgba(0, 0, 0, 0.12);
 }
 
-// Fix: "Some idiots using table-cell and inline-table in mat-select"
+// Fix: "Table-cell and inline-table in mat-select"
 .mat-form-field {
 
     &.mat-form-field-type-mat-select {

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

@@ -1,7 +1,26 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@mixin cards-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .fuse-card {
+        background: map-get($background, card);
+
+        .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);
 
@@ -37,13 +56,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
-$matColorsMap: (
-    primary: $primary,
-    accent: $accent,
-    warn: $warn,
+// -----------------------------------------------------------------------------------------------------
+// @ Material colors map
+// -----------------------------------------------------------------------------------------------------
+$matPalettes: (
     red: $mat-red,
     pink: $mat-pink,
     purple: $mat-purple,
@@ -36,82 +65,100 @@ $matColorsMap: (
     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
-$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
-// Text color levels generator mixin
-@mixin generateTextColorLevels($baseTextColor) {
+// -----------------------------------------------------------------------------------------------------
+// @ Text color levels generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-text-color-levels($classes, $contrast) {
 
-    // If the base text color is black...
-    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+    // If the contrast is dark...
+    @if ($contrast == 'dark') {
 
-        i,
-        .icon {
-            color: rgba(0, 0, 0, 0.54);
-        }
+        // Put down the color classes
+        #{$classes} {
 
-        &.secondary-text,
-        .secondary-text {
-            color: rgba(0, 0, 0, 0.54) !important;
-        }
+            i,
+            .icon {
+                color: rgba(0, 0, 0, 0.54);
+            }
 
-        &.hint-text,
-        .hint-text,
-        &.disabled-text,
-        .disabled-text {
-            color: rgba(0, 0, 0, 0.38) !important;
-        }
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(0, 0, 0, 0.54) !important;
+            }
 
-        &.divider,
-        .divider {
-            color: rgba(0, 0, 0, 0.12) !important;
-        }
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }
 
-        .mat-ripple-element {
-            background: rgba(0, 0, 0, 0.1);
+            &.divider,
+            .divider {
+                color: rgba(0, 0, 0, 0.12) !important;
+            }
+
+            .mat-ripple-element {
+                background: rgba(0, 0, 0, 0.1);
+            }
+
+            .adaptive-border-color {
+                border-color: rgba(0, 0, 0, 0.12);
+            }
         }
 
     }
         // If the base text color is white...
     @else {
 
-        i,
-        .icon {
-            color: rgba(255, 255, 255, 1);
-        }
+        // Put down the color classes
+        #{$classes} {
 
-        &.secondary-text,
-        .secondary-text {
-            color: rgba(255, 255, 255, 0.70) !important;
-        }
+            i,
+            .icon {
+                color: rgba(255, 255, 255, 1);
+            }
 
-        &.hint-text,
-        .hint-text,
-        &.disabled-text,
-        .disabled-text {
-            color: rgba(255, 255, 255, 0.50) !important;
-        }
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(255, 255, 255, 0.70) !important;
+            }
 
-        &.divider,
-        .divider {
-            color: rgba(255, 255, 255, 0.12) !important;
-        }
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.50) !important;
+            }
 
-        .mat-ripple-element {
-            background: rgba(255, 255, 255, 0.1);
+            &.divider,
+            .divider {
+                color: rgba(255, 255, 255, 0.12) !important;
+            }
+
+            .mat-ripple-element {
+                background: rgba(255, 255, 255, 0.1);
+            }
+
+            .adaptive-border-color {
+                border-color: rgba(255, 255, 255, 0.12);
+            }
         }
     }
 }
 
-@mixin generateMaterialElementColors($contrastColor) {
+// -----------------------------------------------------------------------------------------------------
+// @ Material element colors generator
+// -----------------------------------------------------------------------------------------------------
+@mixin generate-material-element-colors($classes, $contrast) {
 
-    // If the contrast color is white...
+    // If the contrast color is light...
     $fuseForeground: (
         base: white,
         text: white,
@@ -119,8 +166,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         divider: rgba(white, 0.12),
     );
 
-    // If the contrast color is black...
-    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
+    // If the contrast color is dark...
+    @if ($contrast == 'dark') {
 
         $fuseForeground: (
             base: black,
@@ -129,65 +176,63 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         );
     }
 
-    // Native Input
-    input[type="text"] {
-        color: map_get($fuseForeground, base);
-    }
+    // Put down the color classes
+    #{$classes} {
 
-    // Input
-    .mat-form-field-label {
-        color: map_get($fuseForeground, hint-text);
-    }
+        // Native Input
+        input[type="text"] {
+            color: map-get($fuseForeground, base);
+        }
 
-    .mat-form-field-underline {
-        background-color: map_get($fuseForeground, divider);
-    }
+        // Input
+        .mat-form-field-label {
+            color: map-get($fuseForeground, hint-text);
+        }
 
-    // Select
-    .mat-select-trigger,
-    .mat-select-arrow {
-        color: map_get($fuseForeground, hint-text);
-    }
+        .mat-form-field-underline {
+            background-color: map-get($fuseForeground, divider);
+        }
 
-    .mat-select-underline {
-        background-color: map_get($fuseForeground, divider);
-    }
+        // Select
+        .mat-select-trigger,
+        .mat-select-arrow {
+            color: map-get($fuseForeground, hint-text);
+        }
 
-    .mat-select-disabled .mat-select-value,
-    .mat-select-arrow,
-    .mat-select-trigger {
-        color: map_get($fuseForeground, hint-text);
-    }
+        .mat-select-underline {
+            background-color: map-get($fuseForeground, divider);
+        }
 
-    .mat-select-content,
-    .mat-select-panel-done-animating {
-        background: map_get($background, card);
-    }
+        .mat-select-disabled .mat-select-value,
+        .mat-select-arrow,
+        .mat-select-trigger {
+            color: map-get($fuseForeground, hint-text);
+        }
 
-    .mat-select-value {
-        color: map_get($fuseForeground, text);
+        .mat-select-content,
+        .mat-select-panel-done-animating {
+            //background: map-get($background, card);
+        }
+
+        .mat-select-value {
+            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;
 
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($contrastColor);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($contrastColor);
-
         &[disabled] {
             background-color: rgba($color, .12) !important;
             color: rgba($contrastColor, .26) !important;
@@ -196,14 +241,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
     .#{$colorName}#{$hue}-fg {
         color: $color !important;
-
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($color);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($color);
     }
 
     .#{$colorName}#{$hue}-border {
@@ -227,51 +264,98 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     }
 }
 
-@mixin generateFuseColorClasses($primary, $accent, $warn) {
+// -----------------------------------------------------------------------------------------------------
+// @ Fuse color classes
+// -----------------------------------------------------------------------------------------------------
+@mixin fuse-color-classes($palettes) {
 
-    $colorMap: (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn
-    );
+    // Define contrast lists
+    $light-contrasting-classes: ();
+    $dark-contrasting-classes: ();
 
     // Generate the color classes...
-    @each $name, $map in $colorMap {
+    @each $paletteName, $palette in $palettes {
 
-        @each $hue in $matColorHues {
+        // Get the contrasts map
+        $contrasts: map-get($palette, 'contrast');
 
-            $color: map-get($map, $hue);
-            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
+        @each $hue in $matHues {
 
-            @if ($color != null and $contrastColor != null) {
+            // Get the color and the contrasting color
+            $color: map-get($palette, $hue);
+            $contrast: map-get($contrasts, $hue);
 
-                @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
+            @if ($color != null and $contrast != null) {
+
+                // Generate color classes
+                @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('.#{$paletteName}-#{$hue}'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
+                }
 
                 // Run the generator one more time for default values (500)
-                @if ($hue == 500) {
-                    @include generateColorClasses($name, $color, $contrastColor, '');
+                // 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 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('.#{$paletteName}'), 'comma');
+                    }
+                        // if the contrast color is light
+                    @else {
+                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
+                    }
                 }
             }
         }
-    }
-}
 
-// Generate the color classes...
-@each $colorName, $colorMap in $matColorsMap {
+        // 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') {
 
-    @each $hue in $matColorHues {
+            // Get the color and the contrasting color for the selected
+            // default hue
+            $color: map-get($palette, 'default');
+            $contrast: map-get($palette, 'default-contrast');
 
-        $color: map-get($colorMap, $hue);
-        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
+            // Generate color classes
+            @include generate-color-classes($paletteName, $color, $contrast, '');
 
-        @if ($color != null and $contrastColor != null) {
+            // Add color to the correct list depending on the contrasting color
 
-            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
-
-            // Run the generator one more time for default values (500)
-            @if ($hue == 500) {
-                @include generateColorClasses($colorName, $color, $contrastColor, '');
+            // If the contrast color is dark
+            @if (rgba(black, 1) == rgba($contrast, 1)) {
+                $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('.#{$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 Fuse color classes for default Material palettes
+// -----------------------------------------------------------------------------------------------------
+@include fuse-color-classes($matPalettes);

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

@@ -9,5 +9,15 @@ body {
     margin: 0;
     padding: 0;
     overflow: hidden;
-    background: #F5F5F5;
+}
+
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
 }

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

@@ -1,6 +1,6 @@
-// ######################
-// POSITION HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Position helpers
+// -----------------------------------------------------------------------------------------------------
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -21,9 +21,9 @@
     }
 }
 
-// ####################################
-// ABSOLUTE POSITION ALIGNMENT HELPERS
-// ####################################
+// -----------------------------------------------------------------------------------------------------
+// @ Absolute position alignment helpers
+// -----------------------------------------------------------------------------------------------------
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -48,9 +48,9 @@
     }
 }
 
-// ######################
-// SIZE HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Size helpers
+// -----------------------------------------------------------------------------------------------------
 @each $prop, $abbrev in (height: h, width: w) {
 
     @for $index from 0 through 180 {
@@ -75,9 +75,9 @@
     }
 }
 
-// ######################
-// SPACING HELPERS
-// ######################
+// -----------------------------------------------------------------------------------------------------
+// @ Spacing helpers
+// -----------------------------------------------------------------------------------------------------
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -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/_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;
@@ -11,7 +174,6 @@
     font-size: 17px;
     font-weight: 500;
     text-align: center;
-    color: #FFFFFF;
 
     &.square {
         border-radius: 0;
@@ -58,6 +220,7 @@ mat-icon.status {
 
     &.online {
         color: #4CAF50;
+
         &:before {
             content: "check_circle";
         }
@@ -65,6 +228,7 @@ mat-icon.status {
 
     &.do-not-disturb {
         color: #F44336;
+
         &:before {
             content: "do_not_disturb_on";
         }
@@ -73,6 +237,7 @@ mat-icon.status {
     &.away {
         background-color: #FFC107;
         color: #FFFFFF;
+
         &:before {
             content: "access_time";
         }
@@ -81,17 +246,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 +265,9 @@ mat-icon.status {
     }
 }
 
-/*----------------------------------------------------------------*/
-/*  Navigation - Simple
-/*----------------------------------------------------------------*/
+// -----------------------------------------------------------------------------------------------------
+// @ Navigation - Simple
+// -----------------------------------------------------------------------------------------------------
 .navigation-simple {
 
     .item {
@@ -125,21 +290,12 @@ mat-icon.status {
             font-weight: 500;
             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;
         margin-top: 8px;
-
-        &.light {
-            border-top: 1px solid rgba(255, 255, 255, 0.12);
-        }
     }
 
     mat-divider {
@@ -147,15 +303,14 @@ 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;
 
     .pagination-item {
@@ -168,32 +323,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;
@@ -218,7 +365,6 @@ mat-icon.status {
                     padding-right: 4px;
                     font-size: 24px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 .value {
@@ -230,7 +376,6 @@ mat-icon.status {
                 .period {
                     padding: 0 0 5px 4px;
                     font-size: 17px;
-                    color: rgba(0, 0, 0, 0.54);
                 }
             }
 
@@ -279,7 +424,6 @@ mat-icon.status {
                     padding-right: 4px;
                     font-size: 24px;
                     font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
                 }
 
                 .value {
@@ -293,7 +437,6 @@ mat-icon.status {
                 padding: 0 32px;
                 font-size: 15px;
                 font-weight: 500;
-                color: rgba(0, 0, 0, 0.54);
                 text-align: center;
             }
 
@@ -328,7 +471,6 @@ mat-icon.status {
 
                 .subtitle {
                     font-size: 17px;
-                    color: rgba(0, 0, 0, 0.54);
                     font-weight: 500;
                 }
             }
@@ -357,7 +499,6 @@ mat-icon.status {
             .terms {
                 margin: 32px;
                 font-size: 15px;
-                color: rgba(0, 0, 0, 0.54);
 
                 .term {
                     padding-bottom: 16px;
@@ -375,17 +516,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;
@@ -408,8 +547,6 @@ 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);
                     white-space: nowrap;
 
                     &:first-child {
@@ -429,7 +566,6 @@ table {
 
                 td {
                     padding: 16px 8px;
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                     &:first-child {
                         padding-left: 24px;
@@ -455,10 +591,6 @@ table {
 
                 tr {
                     cursor: pointer;
-
-                    &:hover {
-                        background: rgba(0, 0, 0, 0.03);
-                    }
                 }
             }
         }

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

@@ -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 {
@@ -219,4 +219,26 @@
             }
         }
     }
+
+    // Material style
+    &.material {
+
+        .nav-subheader {
+            border-top: 1px solid rgba(0, 0, 0, 0.12);
+
+            &:first-child {
+                border-top: none;
+            }
+        }
+
+        .nav-item {
+
+            .nav-link {
+                height: 40px;
+                padding: 0 16px;
+                margin: 4px 8px;
+                border-radius: 4px;
+            }
+        }
+    }
 }

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

@@ -1,4 +1,83 @@
-// 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);
+
+                        > .toolbar {
+                            border-bottom-color: map-get($foreground, divider);
+                        }
+                    }
+                }
+            }
+
+            // Left / Right sidebar
+            &.left-sidebar,
+            &.right-sidebar {
+
+                > .center {
+
+                    > .content-card {
+                        background: map-get($background, card);
+
+                        > .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;
@@ -50,6 +129,7 @@ $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 {
@@ -75,7 +155,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         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 +223,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 +247,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -244,6 +326,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 {
@@ -271,7 +354,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         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;
@@ -346,6 +429,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
@@ -358,6 +442,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 +464,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -479,6 +565,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 flex: 1 1 auto;
                 z-index: 3;
                 min-width: 0;
+                width: 100%;
                 @include mat-elevation(7);
 
                 > .header {
@@ -500,16 +587,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 +617,14 @@ $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;
                     }
                 }
             }

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

@@ -36,11 +36,11 @@
     /* General styles */
     app {
 
-        fuse-navbar-vertical,
-        fuse-navbar-horizontal,
-        fuse-toolbar,
-        fuse-footer,
-        fuse-quick-panel,
+        fuse-sidebar,
+        navbar,
+        toolbar,
+        footer,
+        .theme-options-button,
         fuse-theme-options,
         .ps > .ps__rail-x,
         .ps > .ps__rail-y {

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

@@ -20,13 +20,6 @@
     }
 }
 
-html, body {
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
 // Reset non angular-material input's default browser/os styles
 *:not(mat-form-field) {
 

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

@@ -1,3 +1,44 @@
+// -----------------------------------------------------------------------------------------------------
+// @ 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;
@@ -46,7 +87,6 @@ h6, .h6 {
 
 // Links
 a {
-    color: mat-color($accent);
     text-decoration: none;
 
     &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
@@ -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,6 +285,19 @@ 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;
@@ -252,17 +305,9 @@ strong {
     margin: 0 8px;
     font-size: 11px;
     font-weight: 500;
-    color: rgba(0, 0, 0, 0.54);
-    background-color: rgba(0, 0, 0, 0.12);
     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);

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';
@@ -8,7 +8,9 @@ import * as _ from 'lodash';
 // Create the injection token for the custom settings
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseConfigService
 {
     // Private
@@ -91,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/copier.service.ts

@@ -1,14 +1,15 @@
 /**
  * This class is based on the code in the following projects:
- *
- * - https://github.com/zenorocha/select
- * - https://github.com/zenorocha/clipboard.js/
+ * https://github.com/zenorocha/select
+ * https://github.com/zenorocha/clipboard.js/
  *
  * Both released under MIT license - © Zeno Rocha
  */
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseCopierService
 {
     private textarea: HTMLTextAreaElement;

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

@@ -1,8 +1,11 @@
 import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseMatchMediaService
 {
     activeMediaQuery: string;
@@ -36,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,7 +3,11 @@ import { DOCUMENT } from '@angular/common';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { NavigationEnd, Router } from '@angular/router';
 
-@Injectable()
+import { filter, take } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseSplashScreenService
 {
     splashScreenEl: any;
@@ -44,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/services/translation-loader.service.ts

@@ -7,7 +7,9 @@ export interface Locale
     data: Object;
 }
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseTranslationLoaderService
 {
     /**

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

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

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

@@ -7,6 +7,7 @@ export interface FuseNavigationItem
     icon?: string;
     hidden?: boolean;
     url?: string;
+    classes?: string;
     exactMatch?: boolean;
     externalUrl?: boolean;
     openInNewTab?: boolean;

src/app/app.component.html

@@ -1,25 +1,35 @@
+<!-- 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"
+        [ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right',
+                    'side-panel-hidden': fuseConfig.layout.sidepanel.hidden === true}"
         (click)="toggleSidebarOpen('themeOptionsPanel')">
     <mat-icon>settings</mat-icon>
 </button>
@@ -27,3 +37,4 @@
 <fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
     <fuse-theme-options></fuse-theme-options>
 </fuse-sidebar>
+<!-- / THEME OPTIONS PANEL -->

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 :host {
     position: relative;
     display: flex;
@@ -18,9 +20,20 @@
         border-radius: 0;
         margin: 0;
         pointer-events: auto;
-        opacity: .75;
+        opacity: .90;
         z-index: 998;
 
+        &.right-side-panel {
+
+            @include media-breakpoint-up('lg') {
+                right: 70px;
+            }
+        }
+
+        &.side-panel-hidden {
+            right: 0 !important;
+        }
+
         mat-icon {
             animation: rotating 3s linear infinite;
         }

src/app/app.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -20,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>;
@@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {DOCUMENT} document
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {FuseSplashScreenService} _fuseSplashScreenService
      * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
+     * @param {Platform} _platform
      * @param {TranslateService} _translateService
      */
     constructor(
+        @Inject(DOCUMENT) private document: any,
         private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
         private _fuseSidebarService: FuseSidebarService,
         private _fuseSplashScreenService: FuseSplashScreenService,
         private _fuseTranslationLoaderService: FuseTranslationLoaderService,
-        private _translateService: TranslateService
+        private _translateService: TranslateService,
+        private _platform: Platform
     )
     {
         // Get default navigation
@@ -66,6 +72,42 @@ 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.classList.add('is-mobile');
+        }
+
         // Set the private defaults
         this._unsubscribeAll = new Subject();
     }
@@ -83,7 +125,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

@@ -11,7 +11,7 @@ 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';
 
@@ -72,6 +72,7 @@ const appRoutes: Routes = [
 
         // Fuse modules
         FuseModule.forRoot(fuseConfig),
+        FuseProgressBarModule,
         FuseSharedModule,
         FuseSidebarModule,
         FuseThemeOptionsModule,

src/app/app.theme.scss

@@ -0,0 +1,306 @@
+// -----------------------------------------------------------------------------------------------------
+// @ 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(
+    $input: mat-typography-level(16px, 1.125, 400)
+);
+
+// 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";
+
+@import "src/app/main/apps/academy/academy.theme";
+@import "src/app/main/apps/calendar/calendar.theme";
+@import "src/app/main/apps/chat/chat.theme";
+@import "src/app/main/apps/contacts/contacts.theme";
+@import "src/app/main/apps/dashboards/project/project.theme";
+@import "src/app/main/apps/file-manager/file-manager.theme";
+@import "src/app/main/apps/mail/mail.theme";
+@import "src/app/main/apps/mail-ngrx/mail.theme";
+@import "src/app/main/apps/scrumboard/scrumboard.theme";
+@import "src/app/main/apps/todo/todo.theme";
+
+@import "src/app/main/pages/authentication/login/login.theme";
+@import "src/app/main/pages/authentication/login-2/login-2.theme";
+@import "src/app/main/pages/authentication/register/register.theme";
+@import "src/app/main/pages/authentication/register-2/register-2.theme";
+@import "src/app/main/pages/authentication/reset-password/reset-password.theme";
+@import "src/app/main/pages/authentication/reset-password-2/reset-password-2.theme";
+@import "src/app/main/pages/authentication/forgot-password/forgot-password.theme";
+@import "src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme";
+@import "src/app/main/pages/authentication/lock/lock.theme";
+@import "src/app/main/pages/authentication/mail-confirm/mail-confirm.theme";
+@import "src/app/main/pages/coming-soon/coming-soon.theme";
+@import "src/app/main/pages/errors/404/error-404.theme";
+@import "src/app/main/pages/errors/500/error-500.theme";
+@import "src/app/main/pages/maintenance/maintenance.theme";
+@import "src/app/main/pages/pricing/style-1/style-1.theme";
+@import "src/app/main/pages/pricing/style-2/style-2.theme";
+@import "src/app/main/pages/pricing/style-3/style-3.theme";
+@import "src/app/main/pages/profile/tabs/about/about.theme";
+@import "src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme";
+@import "src/app/main/pages/profile/tabs/timeline/timeline.theme";
+@import "src/app/main/pages/faq/faq.theme";
+@import "src/app/main/pages/knowledge-base/knowledge-base.theme";
+
+@import "src/app/main/documentation/components/cards/cards.theme";
+
+@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
+
+// Define a mixin for easier access
+@mixin components-theme($theme) {
+
+    // Layout components
+    @include chat-panel-theme($theme);
+    @include toolbar-theme($theme);
+
+    // Apps
+    @include academy-theme($theme);
+    @include calendar-theme($theme);
+    @include chat-theme($theme);
+    @include contacts-theme($theme);
+    @include dashboards-project-theme($theme);
+    @include file-manager-theme($theme);
+    @include mail-theme($theme);
+    @include mail-ngrx-theme($theme);
+    @include scrumboard-theme($theme);
+    @include todo-theme($theme);
+
+    // Pages
+    @include login-theme($theme);
+    @include login-2-theme($theme);
+    @include register-theme($theme);
+    @include register-2-theme($theme);
+    @include reset-password-theme($theme);
+    @include reset-password-2-theme($theme);
+    @include forgot-password-theme($theme);
+    @include forgot-password-2-theme($theme);
+    @include lock-theme($theme);
+    @include mail-confirm-theme($theme);
+    @include coming-soon-theme($theme);
+    @include error-404-theme($theme);
+    @include error-500-theme($theme);
+    @include maintenance-theme($theme);
+    @include pricing-style-1-theme($theme);
+    @include pricing-style-2-theme($theme);
+    @include pricing-style-3-theme($theme);
+    @include profile-about-theme($theme);
+    @include profile-photos-videos-theme($theme);
+    @include profile-timeline-theme($theme);
+    @include faq-theme($theme);
+    @include knowledge-base-theme($theme);
+
+    // Docs
+    @include docs-components-cards-theme($theme);
+
+    // Example Viewer
+    @include example-viewer-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/chat-panel.ts

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

@@ -6,21 +6,21 @@ export class ChatFakeDb
             'name'  : 'Alice Freeman',
             'avatar': 'assets/images/avatars/alice.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            '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...'
+            '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...',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             'unread': null
         },
         {
@@ -28,7 +28,7 @@ export class ChatFakeDb
             'name'  : 'Blair',
             'avatar': 'assets/images/avatars/Blair.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             'unread': 3
         },
         {
@@ -36,112 +36,112 @@ export class ChatFakeDb
             'name'  : 'Boyle',
             'avatar': 'assets/images/avatars/Boyle.jpg',
             'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...'
+            '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...',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
             'unread': null
         },
         {
@@ -149,7 +149,7 @@ export class ChatFakeDb
             'name'  : 'Shepard',
             'avatar': 'assets/images/avatars/Shepard.jpg',
             'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
             'id'    : '5725a680cd7efa56a45aea5d',
@@ -163,21 +163,21 @@ export class ChatFakeDb
             'name'  : 'Trevino',
             'avatar': 'assets/images/avatars/Trevino.jpg',
             'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+            '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...'
+            '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...'
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         }
     ];
 
@@ -302,6 +302,7 @@ export class ChatFakeDb
                     'contactId'      : '5725a680b3249760ea21de52',
                     'name'           : 'Alice Freeman',
                     'unread'         : 4,
+                    'lastMessage'    : 'You are the worst!',
                     'lastMessageTime': '2017-06-12T02:10:18.931Z'
                 },
                 {
@@ -309,6 +310,7 @@ export class ChatFakeDb
                     'contactId'      : '5725a680b8d240c011dd224b',
                     'name'           : 'Josefina',
                     'unread'         : null,
+                    'lastMessage'    : 'We are losing money! Quick!',
                     'lastMessageTime': '2017-02-18T10:30:18.931Z'
                 },
                 {
@@ -316,6 +318,7 @@ export class ChatFakeDb
                     'contactId'      : '5725a6809413bf8a0a5272b1',
                     'name'           : 'Velazquez',
                     'unread'         : 2,
+                    'lastMessage'    : 'Quickly come to the meeting room 1B, we have a big server issue',
                     'lastMessageTime': '2017-03-18T12:30:18.931Z'
                 }
             ]

src/app/fake-db/dashboard-project.ts

@@ -1622,7 +1622,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Wireframing',
-                            'classes': 'mat-primary-bg',
+                            'classes': 'primary',
                             'icon'   : ''
                         },
                         {
@@ -1654,7 +1654,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Design',
-                            'classes': 'mat-green-bg',
+                            'classes': 'green',
                             'icon'   : ''
                         },
                         {
@@ -1686,7 +1686,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Coding',
-                            'classes': 'mat-red-bg',
+                            'classes': 'red',
                             'icon'   : ''
                         },
                         {
@@ -1718,7 +1718,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Marketing',
-                            'classes': 'mat-accent-bg',
+                            'classes': 'accent',
                             'icon'   : ''
                         },
                         {
@@ -1750,7 +1750,7 @@ export class ProjectDashboardDb
                     [
                         {
                             'value'  : 'Extra',
-                            'classes': 'mat-orange-bg',
+                            'classes': 'orange',
                             'icon'   : ''
                         },
                         {

src/app/fake-db/e-commerce.ts

@@ -1,519 +1,5 @@
 export class ECommerceFakeDb
 {
-    public static dashboard = {
-        'widget1': {
-            'ranges'      : {
-                'DY' : 'Yesterday',
-                'DT' : 'Today',
-                'DTM': 'Tomorrow'
-            },
-            'currentRange': 'DT',
-            'data'        : {
-                'label': 'CONVERSION RATE',
-                'count': {
-                    'DY' : 21,
-                    'DT' : 25,
-                    'DTM': 19
-                },
-                'extra': {
-                    'label': 'Abandoned carts',
-                    'count': {
-                        'DY' : 3,
-                        'DT' : 7,
-                        'DTM': 8
-                    }
-                }
-            },
-            'detail'      : 'You can show some detailed information about this widget in here.'
-        },
-        'widget2': {
-            'title' : 'Average Order Value',
-            'data'  : {
-                'label': '30 DAYS',
-                'count': 21,
-                'extra': {
-                    'label': 'Last year same time',
-                    'count': 14
-                }
-            },
-            'detail': 'You can show some detailed information about this widget in here.'
-        },
-        'widget3': {
-            'title' : 'Online Visitors',
-            'data'  : {
-                'label': 'last 30 minutes',
-                'count': 32,
-                'extra': {
-                    'label': 'Total visitors today',
-                    'count': 998
-                }
-            },
-            'detail': 'You can show some detailed information about this widget in here.'
-        },
-        'widget4': {
-            'title' : 'Profit per Visitor',
-            'data'  : {
-                'label': 'TODAY',
-                'count': '3,7',
-                'extra': {
-                    'label': 'Yesterday',
-                    'count': '2,90'
-                }
-            },
-            'detail': 'You can show some detailed information about this widget in here.'
-        },
-        'widget5': {
-            'title'    : 'Sales',
-            'ranges'   : {
-                'TW': 'This Week',
-                'LW': 'Last Week',
-                '2W': '2 Weeks Ago'
-            },
-            'mainChart': {
-                '2W': [
-                    {
-                        'name'  : 'Mon',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 9
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 37
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Tue',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 12
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 32
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Wed',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 9
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 39
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Thu',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 12
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 27
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Fri',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 7
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 18
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Sat',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 8
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 24
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Sun',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 16
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 20
-                            }
-                        ]
-                    }
-                ],
-                'LW': [
-                    {
-                        'name'  : 'Mon',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 12
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 37
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Tue',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 8
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 24
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Wed',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 7
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 51
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Thu',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 13
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 31
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Fri',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 7
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 29
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Sat',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 6
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 17
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Sun',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 10
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 31
-                            }
-                        ]
-                    }
-                ],
-                'TW': [
-                    {
-                        'name'  : 'Mon',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 11
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 42
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Tue',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 10
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 28
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Wed',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 8
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 43
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Thu',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 11
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 34
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Fri',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 8
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 20
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Sat',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 10
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 25
-                            }
-                        ]
-                    },
-                    {
-                        'name'  : 'Sun',
-                        'series': [
-                            {
-                                'name' : 'Sales',
-                                'value': 17
-                            },
-                            {
-                                'name' : 'Abandoned Carts',
-                                'value': 22
-                            }
-                        ]
-                    }
-                ]
-            }
-        },
-        'widget6': {
-            'title'      : 'Top 5 Categories',
-            'ranges'     : {
-                'TW': 'This Week',
-                'LW': 'Last Week',
-                '2W': '2 Weeks Ago'
-            },
-            'mainChart'  : {
-                '2W': [
-                    {
-                        'name' : 'Women Dresses',
-                        'value': 18
-                    },
-                    {
-                        'name' : 'Men Shoes',
-                        'value': 12
-                    },
-                    {
-                        'name' : 'Women Shoes',
-                        'value': 40
-                    },
-                    {
-                        'name' : 'Women Bags',
-                        'value': 20
-                    },
-                    {
-                        'name' : 'Men T-Shirts',
-                        'value': 10
-                    }
-                ],
-                'LW': [
-                    {
-                        'name' : 'Women Dresses',
-                        'value': 17
-                    },
-                    {
-                        'name' : 'Men Shoes',
-                        'value': 14
-                    },
-                    {
-                        'name' : 'Women Shoes',
-                        'value': 36
-                    },
-                    {
-                        'name' : 'Women Bags',
-                        'value': 23
-                    },
-                    {
-                        'name' : 'Men T-Shirts',
-                        'value': 12
-                    }
-                ],
-                'TW': [
-                    {
-                        'name' : 'Women Dresses',
-                        'value': 13
-                    },
-                    {
-                        'name' : 'Men Shoes',
-                        'value': 16
-                    },
-                    {
-                        'name' : 'Women Shoes',
-                        'value': 34
-                    },
-                    {
-                        'name' : 'Women Bags',
-                        'value': 23
-                    },
-                    {
-                        'name' : 'Men T-Shirts',
-                        'value': 14
-                    }
-                ]
-            },
-            'footerLeft' : {
-                'title': 'Total Sales',
-                'count': {
-                    '2W': 487,
-                    'LW': 526,
-                    'TW': 594
-                }
-            },
-            'footerRight': {
-                'title': 'Sales From Top 5 Categories',
-                'count': {
-                    '2W': 193,
-                    'LW': 260,
-                    'TW': 287
-                }
-            }
-        },
-        'widget7': {
-            'title'    : 'Latest Customers',
-            'ranges'   : {
-                'T' : 'Today',
-                'TM': 'Tomorrow'
-            },
-            'customers': {
-                'T' : [
-                    {
-                        'name'    : 'Abbott Keitch',
-                        'location': 'United States of America'
-                    },
-                    {
-                        'name'    : 'Arnold Matlock',
-                        'location': 'United States of America'
-                    },
-                    {
-                        'name'    : 'Barrera Bradbury',
-                        'location': 'England'
-                    },
-                    {
-                        'name'    : 'Blair Strangeway',
-                        'location': 'Germany'
-                    },
-                    {
-                        'name'    : 'Copeland Redcliff',
-                        'location': 'French'
-                    },
-                    {
-                        'name'    : 'Henderson Cambias',
-                        'location': 'Russia'
-                    },
-                    {
-                        'name'    : 'Lily Peasegood',
-                        'location': 'Mexico'
-                    }
-                ],
-                'TM': [
-                    {
-                        'name'    : 'Boyle Winters',
-                        'location': 'United States of America'
-                    },
-                    {
-                        'name'    : 'Tyson Marshall',
-                        'location': 'United States of America'
-                    },
-                    {
-                        'name'    : 'Reyna Preece',
-                        'location': 'England'
-                    },
-                    {
-                        'name'    : 'Shauna Atherton',
-                        'location': 'Germany'
-                    },
-                    {
-                        'name'    : 'Tillman Lee',
-                        'location': 'French'
-                    },
-                    {
-                        'name'    : 'Velazquez Smethley',
-                        'location': 'Russia'
-                    },
-                    {
-                        'name'    : 'Helen Sheridan',
-                        'location': 'Mexico'
-                    }
-                ]
-            }
-        }
-    };
-
     public static products = [
         {
             'id'              : '1',
@@ -2136,13 +1622,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 13,
                     'name' : 'On pre-order (not paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2016/04/03 10:06:18'
                 },
                 {
                     'id'   : 1,
                     'name' : 'Awaiting check payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/03/17 18:28:37'
                 }
             ],
@@ -2220,13 +1706,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/10/04 08:54:33'
                 },
                 {
                     'id'   : 1,
                     'name' : 'Awaiting check payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/05/03 03:43:04'
                 }
             ],
@@ -2304,13 +1790,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 8,
                     'name' : 'Payment error',
-                    'color': 'mat-red-900-bg',
+                    'color': 'red-900',
                     'date' : '2015/07/02 20:44:34'
                 },
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/03/23 04:59:45'
                 }
             ],
@@ -2388,13 +1874,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2015/10/26 16:12:47'
                 },
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2016/02/06 06:42:37'
                 }
             ],
@@ -2472,13 +1958,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 8,
                     'name' : 'Payment error',
-                    'color': 'mat-red-900-bg',
+                    'color': 'red-900',
                     'date' : '2015/02/01 09:21:46'
                 },
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2015/11/16 04:48:32'
                 }
             ],
@@ -2556,13 +2042,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/11/30 01:04:32'
                 },
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/11/12 21:27:18'
                 }
             ],
@@ -2640,13 +2126,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 11,
                     'name' : 'Awaiting PayPal payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/09/03 18:53:02'
                 },
                 {
                     'id'   : 13,
                     'name' : 'On pre-order (not paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2015/12/13 18:14:40'
                 }
             ],
@@ -2724,13 +2210,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2015/04/29 07:57:43'
                 },
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/04/23 11:14:38'
                 }
             ],
@@ -2808,13 +2294,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 12,
                     'name' : 'Remote payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/07/15 15:48:00'
                 },
                 {
                     'id'   : 14,
                     'name' : 'Awaiting Cash-on-delivery payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/11/08 18:30:15'
                 }
             ],
@@ -2892,13 +2378,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2016/05/02 09:53:55'
                 },
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/07/11 05:33:31'
                 }
             ],
@@ -2976,13 +2462,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 9,
                     'name' : 'On pre-order (paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2016/02/26 14:15:38'
                 },
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2015/10/17 03:32:39'
                 }
             ],
@@ -3060,13 +2546,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 10,
                     'name' : 'Awaiting bank wire payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/09/01 20:50:07'
                 },
                 {
                     'id'   : 12,
                     'name' : 'Remote payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2016/02/13 21:19:04'
                 }
             ],
@@ -3144,13 +2630,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2015/03/31 03:01:12'
                 },
                 {
                     'id'   : 8,
                     'name' : 'Payment error',
-                    'color': 'mat-red-900-bg',
+                    'color': 'red-900',
                     'date' : '2016/03/11 18:53:35'
                 }
             ],
@@ -3228,13 +2714,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 7,
                     'name' : 'Refunded',
-                    'color': 'mat-red-500-bg',
+                    'color': 'red-500',
                     'date' : '2015/12/29 15:34:46'
                 },
                 {
                     'id'   : 11,
                     'name' : 'Awaiting PayPal payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/07/14 19:10:43'
                 }
             ],
@@ -3312,13 +2798,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 1,
                     'name' : 'Awaiting check payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/12/21 10:42:21'
                 },
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2016/02/11 05:58:55'
                 }
             ],
@@ -3396,13 +2882,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 9,
                     'name' : 'On pre-order (paid)',
-                    'color': 'mat-purple-300-bg',
+                    'color': 'purple-300',
                     'date' : '2015/06/20 08:37:46'
                 },
                 {
                     'id'   : 2,
                     'name' : 'Payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/01/01 01:42:21'
                 }
             ],
@@ -3480,13 +2966,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2015/03/23 00:18:52'
                 },
                 {
                     'id'   : 3,
                     'name' : 'Preparing the order',
-                    'color': 'mat-orange-500-bg',
+                    'color': 'orange-500',
                     'date' : '2015/03/22 04:48:12'
                 }
             ],
@@ -3564,13 +3050,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 6,
                     'name' : 'Canceled',
-                    'color': 'mat-pink-500-bg',
+                    'color': 'pink-500',
                     'date' : '2016/03/24 22:56:35'
                 },
                 {
                     'id'   : 4,
                     'name' : 'Shipped',
-                    'color': 'mat-purple-500-bg',
+                    'color': 'purple-500',
                     'date' : '2016/04/09 13:33:26'
                 }
             ],
@@ -3648,13 +3134,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 7,
                     'name' : 'Refunded',
-                    'color': 'mat-red-500-bg',
+                    'color': 'red-500',
                     'date' : '2015/08/10 17:14:57'
                 },
                 {
                     'id'   : 5,
                     'name' : 'Delivered',
-                    'color': 'mat-green-800-bg',
+                    'color': 'green-800',
                     'date' : '2016/03/30 01:38:14'
                 }
             ],
@@ -3732,13 +3218,13 @@ export class ECommerceFakeDb
                 {
                     'id'   : 10,
                     'name' : 'Awaiting bank wire payment',
-                    'color': 'mat-blue-500-bg',
+                    'color': 'blue-500',
                     'date' : '2015/05/19 11:09:56'
                 },
                 {
                     'id'   : 12,
                     'name' : 'Remote payment accepted',
-                    'color': 'mat-green-500-bg',
+                    'color': 'green-500',
                     'date' : '2015/03/27 05:02:33'
                 }
             ],

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

@@ -17,6 +17,7 @@ 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
@@ -33,7 +34,6 @@ export class FakeDbService implements InMemoryDbService
             'calendar': CalendarFakeDb.data,
 
             // E-Commerce
-            'e-commerce-dashboard': ECommerceFakeDb.dashboard,
             'e-commerce-products' : ECommerceFakeDb.products,
             'e-commerce-orders'   : ECommerceFakeDb.orders,
 
@@ -89,6 +89,11 @@ export class FakeDbService implements InMemoryDbService
             // 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/scrumboard.ts

@@ -274,7 +274,7 @@ export class ScrumboardFakeDb
                         }
                     ],
                     'activities'       : [],
-                    'due'              : '2018-09-07T12:00:00.000Z'
+                    'due'              : '2020-09-07T12:00:00.000Z'
                 },
                 {
                     'id'               : 'f6b9d7a9247e5d794a081927',
@@ -565,22 +565,22 @@ export class ScrumboardFakeDb
                 {
                     'id'   : '26022e4129ad3a5sc28b36cd',
                     'name' : 'High Priority',
-                    'color': 'mat-red-500-bg'
+                    'color': 'red-500'
                 },
                 {
                     'id'   : '56027e4119ad3a5dc28b36cd',
                     'name' : 'Design',
-                    'color': 'mat-orange-400-bg'
+                    'color': 'orange-400'
                 },
                 {
                     'id'   : '5640635e19ad3a5dc21416b2',
                     'name' : 'App',
-                    'color': 'mat-blue-600-bg'
+                    'color': 'blue-600'
                 },
                 {
                     'id'   : '6540635g19ad3s5dc31412b2',
                     'name' : 'Feature',
-                    'color': 'mat-green-400-bg'
+                    'color': 'green-400'
                 }
             ]
         },
@@ -769,17 +769,17 @@ export class ScrumboardFakeDb
                 {
                     'id'   : '56027e4119ad3a5dc28b36cd',
                     'name' : 'Design',
-                    'color': 'mat-red-500-bg'
+                    'color': 'red-500'
                 },
                 {
                     'id'   : '5640635e19ad3a5dc21416b2',
                     'name' : 'App',
-                    'color': 'mat-blue-500-bg'
+                    'color': 'blue-500'
                 },
                 {
                     'id'   : '6540635g19ad3s5dc31412b2',
                     'name' : 'Feature',
-                    'color': 'mat-green-400-bg'
+                    'color': 'green-400'
                 }
             ]
         }

src/app/fuse-config/index.ts

@@ -3,31 +3,41 @@ import { FuseConfig } from '@fuse/types';
 /**
  * Default Fuse Configuration
  *
- * You can edit these options to change the default options. All these options also can be changed per component
- * basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more
- * about changing these options per component basis.
+ * You can edit these options to change the default options. All these options also can be
+ * changed per component basis. See `app/main/pages/authentication/login/login.component.ts`
+ * constructor method to learn more about changing these options per component basis.
  */
 
 export const fuseConfig: FuseConfig = {
+    // Color themes can be defined in src/app/app.theme.scss
+    colorTheme      : 'theme-default',
+    customScrollbars: true,
     layout          : {
-        style         : 'vertical-layout-1',
-        width         : 'fullwidth',
-        navbar        : {
-            hidden    : false,
-            position  : 'left',
-            folded    : false,
-            background: 'mat-fuse-dark-700-bg'
+        style    : 'vertical-layout-1',
+        width    : 'fullwidth',
+        navbar   : {
+            primaryBackground  : 'fuse-navy-700',
+            secondaryBackground: 'fuse-navy-900',
+            folded             : false,
+            hidden             : false,
+            position           : 'left',
+            variant            : 'vertical-style-1'
         },
-        toolbar       : {
-            hidden    : false,
-            position  : 'below-static',
-            background: 'mat-white-500-bg'
+        toolbar  : {
+            customBackgroundColor: false,
+            background           : 'fuse-white-500',
+            hidden               : false,
+            position             : 'below-static'
         },
-        footer        : {
-            hidden    : false,
-            position  : 'below-static',
-            background: 'mat-fuse-dark-900-bg'
+        footer   : {
+            customBackgroundColor: true,
+            background           : 'fuse-navy-900',
+            hidden               : false,
+            position             : 'below-fixed'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
         }
-    },
-    customScrollbars: true
+    }
 };

src/app/layout/components/chat-panel/chat-panel.component.html

@@ -0,0 +1,138 @@
+<div class="header mat-elevation-z4 primary" fxLayout="row" fxLayoutAlign="space-between center">
+
+    <ng-container *ngIf="selectedContact === null">
+
+        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
+             (click)="unfoldSidebarTemporarily()">
+            <mat-icon class="s-32 white-fg">chat</mat-icon>
+            <h3 class="ml-12">Team Chat</h3>
+        </div>
+
+    </ng-container>
+
+    <ng-container *ngIf="selectedContact !== null">
+
+        <div class="title" fxLayout="row" fxLayoutAlign="start center">
+            <img [src]="selectedContact.avatar" class="avatar mx-16">
+            <h3 class="text-truncate">{{selectedContact.name}}</h3>
+        </div>
+
+    </ng-container>
+
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
+            fxHide fxShow.gt-md>
+        <mat-icon class="secondary-text s-20">close</mat-icon>
+    </button>
+
+    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
+            fxHide.gt-md>
+        <mat-icon class="secondary-text">close</mat-icon>
+    </button>
+
+</div>
+
+<div class="content">
+
+    <!-- Contacts -->
+    <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+
+        <div *ngFor="let contact of contacts"
+             class="contacts-list-item"
+             [ngClass]="contact.status"
+             [class.active]="contact.id === selectedContact?.id"
+             (click)="toggleChat(contact)">
+
+            <img class="avatar" [src]="contact.avatar"
+                 [matTooltip]="contact.name"
+                 matTooltipPosition="left">
+            <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
+            <div class="status-icon" [ngClass]="contact.status"></div>
+
+        </div>
+
+    </div>
+    <!-- / Contacts -->
+
+    <!-- Chat -->
+    <div id="chat" fxLayout="column" fxFlex="1 1 auto">
+
+        <div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
+
+            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
+
+                <div *ngFor="let message of chat.dialog; let i = index" class="message-row"
+                     [ngClass]="{
+                            'me': message.who === user.id,
+                            'contact': message.who !== user.id,
+                            'first-of-group': isFirstMessageOfGroup(message, i),
+                            'last-of-group': isLastMessageOfGroup(message, i)
+                            }">
+
+                    <img *ngIf="shouldShowContactAvatar(message, i)"
+                         src="{{selectedContact.avatar}}"
+                         class="avatar">
+
+                    <div class="bubble">
+                        <div class="message">{{message.message}}</div>
+                        <div class="time secondary-text">{{message.time | date:'short'}}</div>
+                    </div>
+
+                </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
+
+                <div class="no-messages-icon">
+                    <mat-icon class="s-128 fade-text">chat</mat-icon>
+                </div>
+
+                <div class="no-messages secondary-text">
+                    Start a conversation by typing your message below.
+                </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="!selectedContact">
+
+                <div class="no-contact-selected">
+
+                    <div class="no-contact-icon">
+                        <mat-icon class="s-128 fade-text">chat</mat-icon>
+                    </div>
+
+                    <div class="no-contact secondary-text">
+                        Select a contact to start a conversation.
+                    </div>
+
+                </div>
+
+            </ng-container>
+
+        </div>
+
+        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
+             *ngIf="selectedContact">
+
+            <form #replyForm="ngForm"
+                  (ngSubmit)="reply($event)"
+                  (keydown.enter)="reply($event)"
+                  fxFlex fxLayout="row" fxLayoutAlign="start center">
+
+                <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
+                    <textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
+                              [rows]="1" [matTextareaAutosize]="true"></textarea>
+                </mat-form-field>
+
+                <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
+                    <mat-icon class="secondary-text">send</mat-icon>
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+    <!-- / Chat -->
+
+</div>

src/app/layout/components/chat-panel/chat-panel.component.scss

@@ -0,0 +1,438 @@
+@import "src/@fuse/scss/fuse";
+
+chat-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: 360px;
+    min-width: 360px;
+    max-width: 360px;
+    z-index: 99;
+    overflow: hidden;
+
+    @include media-breakpoint-down('xs') {
+        max-width: none !important;
+        width: 100% !important;
+    }
+
+    .header {
+        position: relative;
+        height: 64px;
+        max-height: 64px;
+        min-height: 64px;
+        z-index: 10;
+
+        .title {
+            cursor: pointer;
+
+            mat-icon {
+                margin-left: 4px;
+            }
+
+            h3 {
+                max-width: 120px;
+                transition: opacity 300ms ease-in-out;
+            }
+        }
+
+    }
+
+    .content {
+        flex: 1 1 100%;
+        min-height: 0;
+    }
+
+    #contacts-list {
+        position: relative;
+        z-index: 5;
+        padding: 16px 0;
+        width: 72px;
+        min-width: 72px;
+        max-width: 72px;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        // Perfect scrollbar
+        .ps__rail-y {
+            width: 3px !important;
+
+            .ps__thumb-y {
+                width: 3px !important;
+            }
+        }
+
+        .contacts-list-item {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+            height: 56px;
+            cursor: pointer;
+
+            &.active {
+                position: relative;
+
+                &:after {
+                    position: absolute;
+                    top: 8px;
+                    right: 0;
+                    bottom: 8px;
+                    content: "";
+                    width: 4px;
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                }
+            }
+
+            &.offline {
+
+                .mat-list-item-content {
+
+                    img {
+                        filter: grayscale(100%);
+                        opacity: 0.7;
+                    }
+
+                    h3 {
+                        opacity: 0.7;
+                    }
+                }
+            }
+
+            .avatar {
+                margin: 0;
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
+            }
+
+            .unread-count {
+                position: absolute;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                min-width: 18px;
+                height: 18px;
+                top: 8px;
+                left: 12px;
+                border-radius: 9px;
+                padding: 0 5px;
+                font-size: 11px;
+                text-align: center;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+            }
+
+            .status-icon {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                bottom: 10px;
+                left: 44px;
+                border: 2px solid;
+                border-radius: 50%;
+
+                &.online {
+                    background-color: #4CAF50;
+                }
+
+                &.do-not-disturb {
+                    background-color: #F44336;
+                }
+
+                &.away {
+                    background-color: #FFC107;
+                }
+
+                &.offline {
+                    background-color: #646464;
+                }
+            }
+        }
+    }
+
+    #chat {
+        position: relative;
+        z-index: 7;
+        flex: 1 1 100%;
+        box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
+
+        .messages {
+            position: relative;
+            padding: 16px 0 40px 40px;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+
+            .message-row {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: flex-end;
+                padding: 0 16px 4px 16px;
+
+                .avatar {
+                    position: absolute;
+                    left: -32px;
+                    margin: 0;
+                }
+
+                .bubble {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 12px;
+                    max-width: 100%;
+
+                    .message {
+                        white-space: pre-wrap;
+                        line-height: 1.2;
+                    }
+
+                    .time {
+                        position: absolute;
+                        display: none;
+                        width: 100%;
+                        font-size: 11px;
+                        margin-top: 8px;
+                        top: 100%;
+                        left: 0;
+                        white-space: nowrap;
+                    }
+                }
+
+                &.contact {
+
+                    .bubble {
+                        border-top-left-radius: 5px;
+                        border-bottom-left-radius: 5px;
+
+                        border-top-right-radius: 20px;
+                        border-bottom-right-radius: 20px;
+
+                        .time {
+                            margin-left: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-left-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-left-radius: 20px;
+                        }
+                    }
+                }
+
+                &.me {
+                    padding-left: 40px;
+
+                    .avatar {
+                        order: 2;
+                        margin: 0 0 0 16px;
+                    }
+
+                    .bubble {
+                        margin-left: auto;
+
+                        border-top-left-radius: 20px;
+                        border-bottom-left-radius: 20px;
+
+                        border-top-right-radius: 5px;
+                        border-bottom-right-radius: 5px;
+
+                        .time {
+                            justify-content: flex-end;
+                            right: 0;
+                            margin-right: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-right-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-right-radius: 20px;
+                        }
+                    }
+                }
+
+                &.contact + .me,
+                &.me + .contact {
+                    padding-top: 20px;
+                    margin-top: 20px;
+                }
+
+                &.first-of-group {
+
+                    .bubble {
+                        border-top-left-radius: 20px;
+                        padding-top: 13px;
+                    }
+                }
+
+                &.last-of-group {
+
+                    .bubble {
+                        border-bottom-left-radius: 20px;
+                        padding-bottom: 13px;
+
+                        .time {
+                            display: flex;
+                        }
+                    }
+                }
+            }
+
+            .no-messages-icon {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                padding: 0 24px;
+                margin-top: -64px;
+                text-align: center;
+            }
+
+            .no-messages {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                padding: 0 16px 24px 16px;
+                text-align: center;
+            }
+
+            .no-contact-selected {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                transform: translateY(-50%);
+                padding: 0 24px;
+                text-align: center;
+
+                .no-contact {
+                    margin-top: 24px;
+                }
+            }
+        }
+
+        .reply-form {
+            position: relative;
+
+            .message-text {
+                padding: 16px 8px;
+                border-top: 1px solid;
+
+                .mat-form-field-wrapper {
+                    padding: 0;
+
+                    .mat-form-field-flex {
+                        padding: 0;
+
+                        .mat-form-field-infix {
+                            padding: 0;
+                            border: none;
+                            border-radius: 20px;
+                            @include mat-elevation(2);
+
+                            textarea {
+                                overflow: hidden;
+                                margin: 16px 48px 16px 16px;
+                                width: calc(100% - 64px);
+                                padding: 0;
+                            }
+                        }
+                    }
+
+                    .mat-form-field-underline {
+                        display: none !important;
+                    }
+                }
+            }
+
+            .send-message-button {
+                position: absolute;
+                right: 16px;
+                bottom: 21px;
+            }
+        }
+    }
+}
+
+fuse-sidebar {
+
+    &.chat-panel {
+        width: 360px;
+        min-width: 360px;
+        max-width: 360px;
+
+        @include media-breakpoint-down('xs') {
+            min-width: 0 !important;
+            max-width: 100vw !important;
+            width: 100vw !important;
+        }
+
+        &.left-chat-panel {
+
+            .header {
+
+                .toggle-sidebar-folded,
+                .toggle-sidebar-open {
+
+                    mat-icon {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        // Folded
+        &.folded {
+
+            chat-panel {
+
+                .header {
+
+                    .title {
+
+                        h3 {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+
+            // Folded unfolded
+            &.unfolded {
+
+                chat-panel {
+
+                    .header {
+
+                        .title {
+
+                            h3 {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/layout/components/chat-panel/chat-panel.component.ts

@@ -0,0 +1,286 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
+
+@Component({
+    selector     : 'chat-panel',
+    templateUrl  : './chat-panel.component.html',
+    styleUrls    : ['./chat-panel.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
+{
+    contacts: any[];
+    chat: any;
+    selectedContact: any;
+    sidebarFolded: boolean;
+    user: any;
+
+    @ViewChild('replyForm')
+    set replyForm(content: NgForm)
+    {
+        this._replyForm = content;
+    }
+
+    @ViewChild('replyInput')
+    set replyInput(content: ElementRef)
+    {
+        this._replyInput = content;
+    }
+
+    @ViewChildren(FusePerfectScrollbarDirective)
+    private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
+
+    // Private
+    private _chatViewScrollbar: FusePerfectScrollbarDirective;
+    private _replyForm: NgForm;
+    private _replyInput: ElementRef;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ChatPanelService} _chatPanelService
+     * @param {HttpClient} _httpClient
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _chatPanelService: ChatPanelService,
+        private _httpClient: HttpClient,
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+        // Set the defaults
+        this.selectedContact = null;
+        this.sidebarFolded = true;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Load the contacts
+        this._chatPanelService.loadContacts().then(() => {
+
+            this.contacts = this._chatPanelService.contacts;
+            this.user = this._chatPanelService.user;
+        });
+
+        // Subscribe to the foldedChanged observable
+        this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((folded) => {
+                this.sidebarFolded = folded;
+            });
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
+            return directive.elementRef.nativeElement.id === 'messages';
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Prepare the chat for the replies
+     */
+    private _prepareChatForReplies(): void
+    {
+        setTimeout(() => {
+
+            // Focus to the reply input
+            // this._replyInput.nativeElement.focus();
+
+            // Scroll to the bottom of the messages list
+            if ( this._chatViewScrollbar )
+            {
+                this._chatViewScrollbar.update();
+
+                setTimeout(() => {
+                    this._chatViewScrollbar.scrollToBottom(0);
+                });
+            }
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Fold the temporarily unfolded sidebar back
+     */
+    foldSidebarTemporarily(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldSidebarTemporarily(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
+    }
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpen(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
+    }
+
+    /**
+     * Decide whether to show or not the contact's avatar in the message row
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    shouldShowContactAvatar(message, i): boolean
+    {
+        return (
+            message.who === this.selectedContact.id &&
+            ((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
+        );
+    }
+
+    /**
+     * Check if the given message is the first message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isFirstMessageOfGroup(message, i): boolean
+    {
+        return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
+    }
+
+    /**
+     * Check if the given message is the last message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isLastMessageOfGroup(message, i): boolean
+    {
+        return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
+    }
+
+    /**
+     * Toggle chat with the contact
+     *
+     * @param contact
+     */
+    toggleChat(contact): void
+    {
+        // If the contact equals to the selectedContact,
+        // that means we will deselect the contact and
+        // unload the chat
+        if ( this.selectedContact && contact.id === this.selectedContact.id )
+        {
+            // Reset
+            this.resetChat();
+        }
+        // Otherwise, we will select the contact, open
+        // the sidebar and start the chat
+        else
+        {
+            // Unfold the sidebar temporarily
+            this.unfoldSidebarTemporarily();
+
+            // Set the selected contact
+            this.selectedContact = contact;
+
+            // Load the chat
+            this._chatPanelService.getChat(contact.id).then((chat) => {
+
+                // Set the chat
+                this.chat = chat;
+
+                // Prepare the chat for the replies
+                this._prepareChatForReplies();
+            });
+        }
+    }
+
+    /**
+     * Remove the selected contact and unload the chat
+     */
+    resetChat(): void
+    {
+        // Set the selected contact as null
+        this.selectedContact = null;
+
+        // Set the chat as null
+        this.chat = null;
+    }
+
+    /**
+     * Reply
+     */
+    reply(event): void
+    {
+        event.preventDefault();
+
+        if ( !this._replyForm.form.value.message )
+        {
+            return;
+        }
+
+        // Message
+        const message = {
+            who    : this.user.id,
+            message: this._replyForm.form.value.message,
+            time   : new Date().toISOString()
+        };
+
+        // Add the message to the chat
+        this.chat.dialog.push(message);
+
+        // Reset the reply form
+        this._replyForm.reset();
+
+        // Update the server
+        this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
+
+            // Prepare the chat for the replies
+            this._prepareChatForReplies();
+        });
+    }
+}

src/app/layout/components/chat-panel/chat-panel.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
+import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
+
+@NgModule({
+    declarations: [
+        ChatPanelComponent
+    ],
+    providers   : [
+        ChatPanelService
+    ],
+    imports     : [
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatTabsModule,
+        MatTooltipModule,
+        MatRippleModule,
+
+        FuseSharedModule
+    ],
+    exports     : [
+        ChatPanelComponent
+    ]
+})
+export class ChatPanelModule
+{
+}

src/app/layout/components/chat-panel/chat-panel.service.ts

@@ -0,0 +1,182 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { FuseUtils } from '@fuse/utils';
+
+@Injectable()
+export class ChatPanelService
+{
+    contacts: any[];
+    chats: any[];
+    user: any;
+
+    /**
+     * Constructor
+     *
+     * @param {HttpClient} _httpClient
+     */
+    constructor(
+        private _httpClient: HttpClient
+    )
+    {
+    }
+
+    /**
+     * Loader
+     *
+     * @returns {Promise<any> | any}
+     */
+    loadContacts(): Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getContacts(),
+                this.getUser()
+            ]).then(
+                ([contacts, user]) => {
+                    this.contacts = contacts;
+                    this.user = user;
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    /**
+     * Get chat
+     *
+     * @param contactId
+     * @returns {Promise<any>}
+     */
+    getChat(contactId): Promise<any>
+    {
+        const chatItem = this.user.chatList.find((item) => {
+            return item.contactId === contactId;
+        });
+
+        // Get the chat
+        return new Promise((resolve, reject) => {
+
+            // If there is a chat with this user, return that.
+            if ( chatItem )
+            {
+                this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
+                    .subscribe((chat) => {
+
+                        // Resolve the promise
+                        resolve(chat);
+
+                    }, reject);
+            }
+            // If there is no chat with this user, create one...
+            else
+            {
+                this.createNewChat(contactId).then(() => {
+
+                    // and then recall the getChat method
+                    this.getChat(contactId).then((chat) => {
+                        resolve(chat);
+                    });
+                });
+            }
+        });
+    }
+
+    /**
+     * Create new chat
+     *
+     * @param contactId
+     * @returns {Promise<any>}
+     */
+    createNewChat(contactId): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+
+            // Generate a new id
+            const chatId = FuseUtils.generateGUID();
+
+            // Prepare the chat object
+            const chat = {
+                id    : chatId,
+                dialog: []
+            };
+
+            // Prepare the chat list entry
+            const chatListItem = {
+                chatId         : chatId,
+                contactId      : contactId,
+                lastMessageTime: '2017-02-18T10:30:18.931Z'
+            };
+
+            // Add new chat list item to the user's chat list
+            this.user.chatList.push(chatListItem);
+
+            // Post the created chat to the server
+            this._httpClient.post('api/chat-panel-chats', {...chat})
+                .subscribe(() => {
+
+                    // Post the updated user data to the server
+                    this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
+                        .subscribe(() => {
+
+                            // Resolve the promise
+                            resolve();
+                        });
+                }, reject);
+        });
+    }
+
+    /**
+     * Update the chat
+     *
+     * @param chatId
+     * @param dialog
+     * @returns {Promise<any>}
+     */
+    updateChat(chatId, dialog): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+
+            const newData = {
+                id    : chatId,
+                dialog: dialog
+            };
+
+            this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
+                .subscribe(updatedChat => {
+                    resolve(updatedChat);
+                }, reject);
+        });
+    }
+
+    /**
+     * Get contacts
+     *
+     * @returns {Promise<any>}
+     */
+    getContacts(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this._httpClient.get('api/chat-panel-contacts')
+                .subscribe((response: any) => {
+                    resolve(response);
+                }, reject);
+        });
+    }
+
+    /**
+     * Get user
+     *
+     * @returns {Promise<any>}
+     */
+    getUser(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this._httpClient.get('api/chat-panel-user')
+                .subscribe((response: any) => {
+                    resolve(response[0]);
+                }, reject);
+        });
+    }
+}

src/app/layout/components/chat-panel/chat-panel.theme.scss

@@ -0,0 +1,82 @@
+@mixin chat-panel-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $is-dark: map-get($theme, is-dark);
+
+    chat-panel {
+
+        #contacts-list {
+            background-color: map-get($background, app-bar);
+
+            .contacts-list-item {
+
+                &.active {
+                    background: map-get($background, hover);
+
+                    &:after {
+                        background-color: map-get($accent, default);
+                    }
+                }
+
+                .unread-count {
+                    background-color: map-get($accent, default);
+                    color: map-get($accent, default-contrast);
+                }
+
+                .status-icon {
+                    border-color: map-get($background, app-bar);
+                }
+            }
+        }
+
+        #chat {
+
+            .messages {
+
+                .message-row {
+
+                    &.contact {
+
+                        .bubble {
+                            background-color: map-get($primary, default);
+                            color: map-get($primary, default-contrast);
+                        }
+                    }
+
+                    &.me {
+
+                        .bubble {
+                            color: rgba(0, 0, 0, 0.87);
+                            background-color: #E0E0E0;
+                        }
+                    }
+                }
+            }
+
+            .reply-form {
+
+                .message-text {
+                    background-color: map-get($background, app-bar);
+                    border-color: map-get($foreground, divider);
+
+                    .mat-form-field-wrapper {
+
+                        .mat-form-field-flex {
+
+                            .mat-form-field-infix {
+                                @if ($is-dark == true) {
+                                    background-color: map-get($background, hover);
+                                } @else {
+                                    background-color: white;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/layout/components/footer/footer.component.html

@@ -2,8 +2,8 @@
 
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
 
-        <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
-           target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
+        <a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
+           target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
             <span>Purchase FUSE (Angular 6+)</span>
@@ -16,7 +16,6 @@
         </div>
 
 
-
     </div>
 
 </mat-toolbar>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.html

@@ -0,0 +1,3 @@
+<div [ngClass]="fuseConfig.layout.navbar.primaryBackground">
+    <fuse-navigation layout="horizontal"></fuse-navigation>
+</div>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss

@@ -0,0 +1,16 @@
+navbar-horizontal-style-1 {
+
+}
+
+navbar {
+
+    &.horizontal-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 56px;
+        max-height: 56px;
+        min-height: 56px;
+    }
+}

src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-horizontal-style-1',
+    templateUrl  : './style-1.component.html',
+    styleUrls    : ['./style-1.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
+{
+    fuseConfig: any;
+    navigation: any;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseConfigService: FuseConfigService,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.fuseConfig = config;
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}

src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarHorizontalStyle1Component } from 'app/layout/components/navbar/horizontal/style-1/style-1.component';
+
+@NgModule({
+    declarations: [
+        NavbarHorizontalStyle1Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarHorizontalStyle1Component
+    ]
+})
+export class NavbarHorizontalStyle1Module
+{
+}

src/app/layout/components/navbar/navbar.component.html

@@ -1,39 +1,11 @@
-<ng-container *ngIf="layout == 'vertical'">
-
-    <div class="navbar-vertical">
-
-        <div class="navbar-header">
-
-            <div class="logo">
-                <img class="logo-icon" src="assets/images/logos/fuse.svg">
-                <span class="logo-text">FUSE</span>
-            </div>
-
-            <button mat-icon-button class="toggle-sidebar-folded"
-                    (click)="toggleSidebarFolded()" fxHide.lt-lg>
-                <mat-icon>menu</mat-icon>
-            </button>
-
-            <button mat-icon-button class="toggle-sidebar-opened"
-                    (click)="toggleSidebarOpened()" fxHide.gt-md>
-                <mat-icon>arrow_back</mat-icon>
-            </button>
-
-        </div>
-
-        <div class="navbar-content" fusePerfectScrollbar
-             [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
-            <fuse-navigation layout="vertical"></fuse-navigation>
-        </div>
-
-    </div>
-
+<ng-container *ngIf="variant === 'horizontal-style-1'">
+    <navbar-horizontal-style-1></navbar-horizontal-style-1>
 </ng-container>
 
-<ng-container *ngIf="layout == 'horizontal'">
-
-    <div class="navbar-horizontal">
-        <fuse-navigation layout="horizontal"></fuse-navigation>
-    </div>
-
+<ng-container *ngIf="variant === 'vertical-style-1'">
+    <navbar-vertical-style-1></navbar-vertical-style-1>
+</ng-container>
+
+<ng-container *ngIf="variant === 'vertical-style-2'">
+    <navbar-vertical-style-2></navbar-vertical-style-2>
 </ng-container>

src/app/layout/components/navbar/navbar.component.scss

@@ -1,81 +1,3 @@
-@import "src/@fuse/scss/fuse";
-
-fuse-sidebar {
-
-    &.folded:not(.unfolded) {
-
-        .navbar-vertical {
-
-            .navbar-header {
-                padding: 0 13px;
-
-                .logo {
-
-                    .logo-text {
-                        opacity: 0;
-                        transition: opacity 200ms ease;
-                    }
-                }
-            }
-        }
-    }
-}
-
 navbar {
 
-    &:not(.top-navbar) {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .navbar-vertical {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-
-        .navbar-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 64px;
-            min-height: 64px;
-            padding: 0 16px 0 24px;
-            transition: padding 200ms ease;
-            background-color: rgba(255, 255, 255, .05);
-            @include mat-elevation(1);
-
-            .logo {
-                display: flex;
-                align-items: center;
-
-                .logo-icon {
-                    width: 38px;
-                    height: 38px;
-                }
-
-                .logo-text {
-                    margin-left: 8px;
-                    font-size: 20px;
-                    font-weight: 300;
-                    letter-spacing: 0.4px;
-                }
-            }
-        }
-
-        .navbar-content {
-            flex: 1 1 auto;
-            overflow-y: auto;
-        }
-    }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

src/app/layout/components/navbar/navbar.component.ts

@@ -1,11 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
-
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+import { Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector     : 'navbar',
@@ -13,125 +6,48 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
     styleUrls    : ['./navbar.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class NavbarComponent implements OnInit, OnDestroy
+export class NavbarComponent
 {
-    // Layout
-    @Input()
-    layout;
-
-    fusePerfectScrollbarUpdateTimeout: any;
-    navigation: any;
-
     // Private
-    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
-    private _unsubscribeAll: Subject<any>;
+    _variant: string;
 
     /**
      * Constructor
      *
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
+     * @param {ElementRef} _elementRef
+     * @param {Renderer2} _renderer
      */
     constructor(
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _router: Router
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
     )
     {
-        // Set the defaults
-        this.layout = 'vertical';
-
         // Set the private defaults
-        this._unsubscribeAll = new Subject();
+        this._variant = 'vertical-style-1';
     }
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
-    // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
-    set directive(theDirective: FusePerfectScrollbarDirective)
+    /**
+     * Variant
+     */
+    get variant(): string
     {
-        if ( !theDirective )
-        {
-            return;
-        }
-
-        this._fusePerfectScrollbar = theDirective;
-
-        this._fuseNavigationService.onItemCollapseToggled
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this._fusePerfectScrollbar.update();
-                }, 310);
-            });
+        return this._variant;
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
+    @Input()
+    set variant(value: string)
     {
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
-            )
-            .subscribe(() => {
-                    if ( this._fuseSidebarService.getSidebar('navbar') )
-                    {
-                        this._fuseSidebarService.getSidebar('navbar').close();
-                    }
-                }
-            );
+        // Remove the old class name
+        this._renderer.removeClass(this._elementRef.nativeElement, this.variant);
 
-        // Get current navigation
-        this._fuseNavigationService.onNavigationChanged
-            .pipe(filter(value => value !== null))
-            .subscribe(() => {
-                this.navigation = this._fuseNavigationService.getCurrentNavigation();
-            });
-    }
+        // Store the variant value
+        this._variant = value;
 
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        if ( this.fusePerfectScrollbarUpdateTimeout )
-        {
-            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
-        }
-
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle sidebar opened status
-     */
-    toggleSidebarOpened(): void
-    {
-        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
-    }
-
-    /**
-     * Toggle sidebar folded status
-     */
-    toggleSidebarFolded(): void
-    {
-        this._fuseSidebarService.getSidebar('navbar').toggleFold();
+        // Add the new class name
+        this._renderer.addClass(this._elementRef.nativeElement, value);
     }
 }

src/app/layout/components/navbar/navbar.module.ts

@@ -1,21 +1,22 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
 
-import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
+import { NavbarHorizontalStyle1Module } from 'app/layout/components/navbar/horizontal/style-1/style-1.module';
+import { NavbarVerticalStyle1Module } from 'app/layout/components/navbar/vertical/style-1/style-1.module';
+import { NavbarVerticalStyle2Module } from 'app/layout/components/navbar/vertical/style-2/style-2.module';
 
 @NgModule({
     declarations: [
         NavbarComponent
     ],
     imports     : [
-        MatButtonModule,
-        MatIconModule,
-
         FuseSharedModule,
-        FuseNavigationModule
+
+        NavbarHorizontalStyle1Module,
+        NavbarVerticalStyle1Module,
+        NavbarVerticalStyle2Module
     ],
     exports     : [
         NavbarComponent