Updated changelog

Updated web-animations-js package to make it compatible with Angular 8

CREDITS

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

LICENSE

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

README.md

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

angular.json

@@ -4,24 +4,24 @@
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
-            "root": "",
-            "sourceRoot": "src",
             "projectType": "application",
-            "prefix": "app",
             "schematics": {
                 "@schematics/angular:component": {
-                    "styleext": "scss"
+                    "style": "scss"
                 }
             },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
-                        "outputPath": "dist",
+                        "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.app.json",
+                        "tsConfig": "tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
                             "src/assets",
@@ -49,7 +49,14 @@
                             "aot": true,
                             "extractLicenses": true,
                             "vendorChunk": false,
-                            "buildOptimizer": true
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "4mb",
+                                    "maximumError": "6mb"
+                                }
+                            ]
                         },
                         "ec": {
                             "sourceMap": true,
@@ -94,24 +101,25 @@
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
+                        "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
+                        "karmaConfig": "karma.conf.js",
-                        "styles": [
-                            "styles.scss"
-                        ],
-                        "scripts": [],
                         "assets": [
                             "src/favicon.ico",
                             "src/assets"
-                        ]
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
                     }
                 },
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": [
-                            "src/tsconfig.app.json",
+                            "tsconfig.app.json",
-                            "src/tsconfig.spec.json"
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
                         ],
                         "exclude": [
                             "**/node_modules/**",
@@ -119,29 +127,17 @@
                             "**/src/assets/angular-material-examples/**/*"
                         ]
                     }
-                }
+                },
-            }
-        },
-        "fuse-e2e": {
-            "root": "e2e/",
-            "projectType": "application",
-            "architect": {
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
                         "protractorConfig": "e2e/protractor.conf.js",
                         "devServerTarget": "fuse:serve"
-                    }
+                    },
-                },
+                    "configurations": {
-                "lint": {
+                        "production": {
-                    "builder": "@angular-devkit/build-angular:tslint",
+                            "devServerTarget": "fuse:serve:production"
-                    "options": {
+                        }
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
-                        ]
                     }
                 }
             }

browserslist

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+# Googlebot uses an older version of Chrome
+# For additional information see: https://developers.google.com/search/docs/guides/rendering
+
+> 0.5%
+last 2 versions
+Firefox ESR
+Chrome 41 # Support for Googlebot
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

e2e/src/app.e2e-spec.ts

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

e2e/src/app.po.ts

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

karma.conf.js

@@ -17,8 +17,8 @@ module.exports = function (config)
             clearContext: false // leave Jasmine Spec Runner output visible in browser
         },
         coverageIstanbulReporter: {
-            dir                  : require('path').join(__dirname, '../coverage'),
+            dir                  : require('path').join(__dirname, './coverage/fuse'),
-            reports              : ['html', 'lcovonly'],
+            reports              : ['html', 'lcovonly', 'text-summary'],
             fixWebpackSourcePaths: true
         },
         reporters               : ['progress', 'kjhtml'],
@@ -27,6 +27,7 @@ module.exports = function (config)
         logLevel                : config.LOG_INFO,
         autoWatch               : true,
         browsers                : ['Chrome'],
-        singleRun               : false
+        singleRun               : false,
+        restartOnFileChange     : true
     });
-};
+};

package.json

@@ -1,89 +1,88 @@
 {
-  "name": "fuse",
+    "name": "fuse",
-  "version": "6.3.0",
+    "version": "8.0.0",
-  "license": "https://themeforest.net/licenses/terms/regular",
+    "license": "https://themeforest.net/licenses/terms/regular",
-  "scripts": {
+    "scripts": {
-    "ng": "ng",
+        "ng": "ng",
-    "start": "ng serve --open",
+        "start": "ng serve --open",
-    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+        "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",
+        "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": "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-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+        "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+        "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
-    "test": "ng test",
+        "test": "ng test",
-    "lint": "ng lint",
+        "lint": "ng lint",
-    "e2e": "ng e2e",
+        "e2e": "ng e2e",
-    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
-  },
+    },
-  "private": true,
+    "private": true,
-  "dependencies": {
+    "dependencies": {
-    "@agm/core": "1.0.0-beta.3",
+        "@agm/core": "1.0.0-beta.5",
-    "@angular/animations": "6.1.4",
+        "@angular/animations": "8.0.0",
-    "@angular/cdk": "6.4.6",
+        "@angular/cdk": "8.0.0",
-    "@angular/common": "6.1.4",
+        "@angular/common": "8.0.0",
-    "@angular/compiler": "6.1.4",
+        "@angular/compiler": "8.0.0",
-    "@angular/core": "6.1.4",
+        "@angular/core": "8.0.0",
-    "@angular/flex-layout": "6.0.0-beta.16",
+        "@angular/flex-layout": "8.0.0-beta.26",
-    "@angular/forms": "6.1.4",
+        "@angular/forms": "8.0.0",
-    "@angular/http": "6.1.4",
+        "@angular/material": "8.0.0",
-    "@angular/material": "6.4.6",
+        "@angular/material-moment-adapter": "8.0.0",
-    "@angular/material-moment-adapter": "6.4.6",
+        "@angular/platform-browser": "8.0.0",
-    "@angular/platform-browser": "6.1.4",
+        "@angular/platform-browser-dynamic": "8.0.0",
-    "@angular/platform-browser-dynamic": "6.1.4",
+        "@angular/router": "8.0.0",
-    "@angular/router": "6.1.4",
+        "@ngrx/effects": "8.0.0-beta.2",
-    "@ngrx/effects": "6.1.0",
+        "@ngrx/router-store": "8.0.0-beta.2",
-    "@ngrx/router-store": "6.1.0",
+        "@ngrx/store": "8.0.0-beta.2",
-    "@ngrx/store": "6.1.0",
+        "@ngrx/store-devtools": "8.0.0-beta.2",
-    "@ngrx/store-devtools": "6.1.0",
+        "@ngx-translate/core": "11.0.1",
-    "@ngx-translate/core": "10.0.2",
+        "@swimlane/dragula": "3.8.0",
-    "@swimlane/dragula": "3.7.3",
+        "@swimlane/ngx-charts": "11.1.0",
-    "@swimlane/ngx-charts": "9.0.0",
+        "@swimlane/ngx-datatable": "15.0.0",
-    "@swimlane/ngx-datatable": "13.1.0",
+        "@swimlane/ngx-dnd": "7.0.0",
-    "@swimlane/ngx-dnd": "5.0.6",
+        "@types/prismjs": "1.16.0",
-    "@types/prismjs": "1.9.0",
+        "angular-calendar": "0.27.8",
-    "angular-calendar": "0.25.2",
+        "angular-in-memory-web-api": "0.8.0",
-    "angular-in-memory-web-api": "0.6.1",
+        "chart.js": "2.8.0",
-    "chart.js": "2.7.2",
+        "classlist.js": "1.1.20150312",
-    "classlist.js": "1.1.20150312",
+        "d3": "5.9.2",
-    "core-js": "2.5.7",
+        "date-fns": "1.30.1",
-    "d3": "5.7.0",
+        "hammerjs": "2.0.8",
-    "hammerjs": "2.0.8",
+        "lodash": "4.17.11",
-    "lodash": "4.17.10",
+        "moment": "2.24.0",
-    "moment": "2.22.2",
+        "ng2-charts": "2.2.4",
-    "ng2-charts": "1.6.0",
+        "ngrx-store-freeze": "0.2.4",
-    "ngrx-store-freeze": "0.2.4",
+        "ngx-color-picker": "7.5.0",
-    "ngx-color-picker": "6.6.0",
+        "ngx-cookie-service": "2.2.0",
-    "ngx-cookie-service": "1.0.10",
+        "perfect-scrollbar": "1.4.0",
-    "perfect-scrollbar": "1.4.0",
+        "prismjs": "1.16.0",
-    "prismjs": "1.15.0",
+        "rxjs": "6.5.2",
-    "rxjs": "6.2.2",
+        "web-animations-js": "github:angular/web-animations-js#release_pr208",
-    "rxjs-compat": "6.2.2",
+        "zone.js": "0.9.1"
-    "web-animations-js": "2.3.1",
+    },
-    "zone.js": "0.8.26"
+    "devDependencies": {
-  },
+        "@angular/cli": "8.0.0",
-  "devDependencies": {
+        "@angular/compiler-cli": "8.0.0",
-    "@angular/cli": "6.1.5",
+        "@angular/language-service": "8.0.0",
-    "@angular/compiler-cli": "6.1.4",
+        "@angular-devkit/build-angular": "0.800.0",
-    "@angular/language-service": "6.1.4",
+        "@angularclass/hmr": "2.1.3",
-    "@angular-devkit/build-angular": "0.7.5",
+        "@types/jasmine": "3.3.13",
-    "@angularclass/hmr": "2.1.3",
+        "@types/jasminewd2": "2.0.6",
-    "@types/jasmine": "2.8.8",
+        "@types/lodash": "4.14.132",
-    "@types/jasminewd2": "2.0.3",
+        "@types/node": "8.9.5",
-    "@types/lodash": "4.14.116",
+        "codelyzer": "5.0.1",
-    "@types/node": "8.9.5",
+        "jasmine-core": "3.4.0",
-    "codelyzer": "4.2.1",
+        "jasmine-spec-reporter": "4.2.1",
-    "jasmine-core": "2.99.1",
+        "karma": "4.1.0",
-    "jasmine-spec-reporter": "4.2.1",
+        "karma-chrome-launcher": "2.2.0",
-    "karma": "1.7.1",
+        "karma-coverage-istanbul-reporter": "2.0.5",
-    "karma-chrome-launcher": "2.2.0",
+        "karma-jasmine": "2.0.1",
-    "karma-coverage-istanbul-reporter": "2.0.2",
+        "karma-jasmine-html-reporter": "1.4.2",
-    "karma-jasmine": "1.1.2",
+        "protractor": "5.4.2",
-    "karma-jasmine-html-reporter": "0.2.2",
+        "ts-node": "7.0.1",
-    "protractor": "5.4.0",
+        "tslib": "1.9.3",
-    "ts-node": "5.0.1",
+        "tslint": "5.15.0",
-    "tslint": "5.9.1",
+        "typescript": "3.4.5",
-    "typescript": "2.7.2",
+        "webpack-bundle-analyzer": "3.3.2"
-    "webpack-bundle-analyzer": "2.13.1"
+    }
-  }
 }

src/@fuse/animations/index.ts

@@ -51,26 +51,23 @@ export const fuseAnimations = [
     ]),
 
     trigger('fadeInOut', [
-        state('0', style({
+        state('0, void', style({
-            display: 'none',
             opacity: 0
         })),
-        state('1', style({
+        state('1, *', style({
-            display: 'block',
             opacity: 1
         })),
         transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in'))
+        transition('0 => 1', animate('300ms ease-in')),
+        transition('void <=> *', animate('300ms ease-in'))
     ]),
 
     trigger('slideInOut', [
         state('0', style({
-            height : '0px',
+            height: '0px'
-            display: 'none'
         })),
         state('1', style({
-            height : '*',
+            height: '*'
-            display: 'block'
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
@@ -120,17 +117,15 @@ export const fuseAnimations = [
                     })
                 )
             ]
-        ),
+        )
     ]),
 
     trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateX(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -139,11 +134,9 @@ export const fuseAnimations = [
     trigger('slideInRight', [
         state('void', style({
             transform: 'translateX(100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateX(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -152,11 +145,9 @@ export const fuseAnimations = [
     trigger('slideInTop', [
         state('void', style({
             transform: 'translateY(-100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateY(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -166,11 +157,9 @@ export const fuseAnimations = [
         state('void',
             style({
                 transform: 'translateY(100%)',
-                display  : 'none'
             })),
         state('*', style({
             transform: 'translateY(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -190,7 +179,7 @@ export const fuseAnimations = [
     // -----------------------------------------------------------------------------------------------------
     // @ Router animations
     // -----------------------------------------------------------------------------------------------------
-    
+
     trigger('routerTransitionLeft', [
 
         transition('* => *', [

src/@fuse/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
     selector   : 'fuse-confirm-dialog',

src/@fuse/components/confirm-dialog/confirm-dialog.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatDialogModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
 

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

@@ -37,7 +37,7 @@
         velit.
     </p>
 
-    <img class="mt-24 w-100-p" src="assets/images/etc/early-sunrise.jpg" style="max-width: 640px">
+    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
 
     <p class="mt-8 mb-24 secondary-text">
         <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>

src/@fuse/components/demo/demo.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { MatDividerModule, MatListModule } from '@angular/material';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
 
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';

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

@@ -13,7 +13,7 @@ import '@fuse/components/highlight/prism-languages';
 export class FuseHighlightComponent implements OnInit, OnDestroy
 {
     // Source
-    @ContentChild('source')
+    @ContentChild('source', {static: true})
     source: ElementRef;
 
     // Lang

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

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FusePipesModule } from '@fuse/pipes/pipes.module';
 

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

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

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

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule, MatRippleModule } from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
 
 import { TranslateModule } from '@ngx-translate/core';
 

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { FuseProgressBarComponent } from './progress-bar.component';
 

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

@@ -9,7 +9,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }

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

@@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseSearchBarComponent } from './search-bar.component';
 

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

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

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

@@ -2,7 +2,7 @@
 
 :host {
 
-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {
 
         #fuse-shortcuts {
 

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

@@ -1,5 +1,5 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -12,7 +12,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
     templateUrl: './shortcuts.component.html',
     styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsComponent implements OnInit, OnDestroy
+export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
 {
     shortcutItems: any[];
     navigationItems: any[];
@@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     @Input()
     navigation: any;
 
-    @ViewChild('searchInput')
+    @ViewChild('searchInput', {static: false})
     searchInputField;
 
-    @ViewChild('shortcuts')
+    @ViewChild('shortcuts', {static: false})
     shortcutsEl: ElementRef;
 
     // Private
@@ -35,17 +35,17 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
-     * @param {Renderer2} _renderer
      * @param {CookieService} _cookieService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseNavigationService} _fuseNavigationService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
+     * @param {Renderer2} _renderer
      */
     constructor(
         private _cookieService: CookieService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseNavigationService: FuseNavigationService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
         private _renderer: Renderer2
     )
     {
@@ -70,9 +70,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         // Get the navigation items and flatten them
         this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
 
-        const cookieExists = this._cookieService.check('FUSE2.shortcuts');
+        if ( this._cookieService.check('FUSE2.shortcuts') )
-
-        if ( cookieExists )
         {
             this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
         }
@@ -81,36 +79,41 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             // User's shortcut items
             this.shortcutItems = [
                 {
-                    'title': 'Calendar',
+                    title: 'Calendar',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'today',
+                    icon : 'today',
-                    'url'  : '/apps/calendar'
+                    url  : '/apps/calendar'
                 },
                 {
-                    'title': 'Mail',
+                    title: 'Mail',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'email',
+                    icon : 'email',
-                    'url'  : '/apps/mail'
+                    url  : '/apps/mail'
                 },
                 {
-                    'title': 'Contacts',
+                    title: 'Contacts',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'account_box',
+                    icon : 'account_box',
-                    'url'  : '/apps/contacts'
+                    url  : '/apps/contacts'
                 },
                 {
-                    'title': 'To-Do',
+                    title: 'To-Do',
-                    'type' : 'item',
+                    type : 'item',
-                    'icon' : 'check_box',
+                    icon : 'check_box',
-                    'url'  : '/apps/todo'
+                    url  : '/apps/todo'
                 }
             ];
         }
 
+    }
+
+    ngAfterViewInit(): void
+    {
+        // Subscribe to media changes
         this._fuseMatchMediaService.onMediaChange
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe(() => {
-                if ( this._observableMedia.isActive('gt-sm') )
+                if ( this._mediaObserver.isActive('gt-sm') )
                 {
                     this.hideMobileShortcutsPanel();
                 }

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

@@ -2,7 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CookieService } from 'ngx-cookie-service';
 
 import { FuseShortcutsComponent } from './shortcuts.component';

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

@@ -16,7 +16,7 @@ fuse-sidebar {
     z-index: 1000;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         min-width: 0 !important;
         max-width: 80vw !important;
         width: 80vw !important;

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

@@ -1,8 +1,8 @@
 import {
-    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -87,7 +87,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseSidebarService} _fuseSidebarService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      * @param {Renderer2} _renderer
      */
     constructor(
@@ -97,7 +97,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         private _fuseConfigService: FuseConfigService,
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseSidebarService: FuseSidebarService,
-        private _observableMedia: ObservableMedia,
+        private _mediaObserver: MediaObserver,
         private _renderer: Renderer2
     )
     {
@@ -174,7 +174,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
             // Set the style and class
-            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+            this._renderer.setStyle(sibling, styleRule, styleValue);
             this._renderer.addClass(this._elementRef.nativeElement, 'folded');
         }
         // If unfolded...
@@ -319,7 +319,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             .subscribe(() => {
 
                 // Get the active status
-                const isActive = this._observableMedia.isActive(this.lockedOpen);
+                const isActive = this._mediaObserver.isActive(this.lockedOpen);
+
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
                 {
@@ -434,7 +435,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
 
         // Set the style and class
-        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+        this._renderer.setStyle(sibling, styleRule, styleValue);
         this._renderer.addClass(this._elementRef.nativeElement, 'folded');
     }
 

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

@@ -30,7 +30,7 @@ fuse-theme-options {
 
             .title {
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 padding-left: 4px;
             }
         }
@@ -56,12 +56,12 @@ fuse-theme-options {
                     margin: 0;
                     padding: 0 8px;
                     font-size: 16px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 h3 {
                     font-size: 14px;
-                    font-weight: 500;
+                    font-weight: 600;
                     margin: 24px 0 16px 0;
                     padding: 0;
 

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

@@ -118,7 +118,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 // Reset the form values based on the
                 // selected layout style
                 this._resetFormValues(value);
-
             });
 
         // Subscribe to the form value changes
@@ -132,17 +131,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
         // Add customize nav item that opens the bar programmatically
         const customFunctionNavItem = {
-            'id'      : 'custom-function',
+            id      : 'custom-function',
-            'title'   : 'Custom Function',
+            title   : 'Custom Function',
-            'type'    : 'group',
+            type    : 'group',
-            'icon'    : 'settings',
+            icon    : 'settings',
-            'children': [
+            children: [
                 {
-                    'id'      : 'customize',
+                    id      : 'customize',
-                    'title'   : 'Customize',
+                    title   : 'Customize',
-                    'type'    : 'item',
+                    type    : 'item',
-                    'icon'    : 'settings',
+                    icon    : 'settings',
-                    'function': () => {
+                    function: () => {
                         this.toggleSidebarOpen('themeOptionsPanel');
                     }
                 }

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

@@ -2,9 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import {
+import { MatButtonModule } from '@angular/material/button';
-    MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule
+import { MatCheckboxModule } from '@angular/material/checkbox';
-} from '@angular/material';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 import { FuseDirectivesModule } from '@fuse/directives/directives';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';

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

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

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

@@ -8,6 +8,7 @@
         > .fuse-widget-front,
         > .fuse-widget-back {
             background: map-get($background, card);
+            border-color: map-get($foreground, divider);
         }
     }
 }

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

@@ -1,6 +1,6 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -30,13 +30,13 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
      * @param {FuseMatchMediaService} _fuseMatchMediaService
      * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
      * @param {MatSidenav} _matSidenav
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
         private _fuseMatchMediaService: FuseMatchMediaService,
         private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
         private _matSidenav: MatSidenav,
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -58,7 +58,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
         // Register the sidenav to the service
         this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);
 
-        if ( this._observableMedia.isActive(this.matIsLockedOpen) )
+        if ( this.matIsLockedOpen && this._mediaObserver.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.matIsLockedOpen) )
+                if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
                 {
                     this.isLockedOpen = true;
                     this._matSidenav.mode = 'side';

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Injectable({
     providedIn: 'root'

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

@@ -1,23 +1,24 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { Subject } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import PerfectScrollbar from 'perfect-scrollbar';
 import * as _ from 'lodash';
-
+import { FusePerfectScrollbarGeometry, FusePerfectScrollbarPosition } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces';
 import { FuseConfigService } from '@fuse/services/config.service';
 
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
     isInitialized: boolean;
     isMobile: boolean;
-    ps: PerfectScrollbar;
+    ps: PerfectScrollbar | any;
 
     // Private
+    private _animation: number | null;
     private _enabled: boolean | '';
     private _debouncedUpdate: any;
     private _options: any;
@@ -43,6 +44,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.isMobile = false;
 
         // Set the private defaults
+        this._animation = null;
         this._enabled = false;
         this._debouncedUpdate = _.debounce(this.update, 150);
         this._options = {
@@ -65,6 +67,15 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
     {
         // Merge the options
         this._options = _.merge({}, this._options, value);
+
+        // Destroy and re-init the PerfectScrollbar to update its options
+        setTimeout(() => {
+            this._destroy();
+        });
+
+        setTimeout(() => {
+            this._init();
+        });
     }
 
     get fusePerfectScrollbarOptions(): any
@@ -120,6 +131,24 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to window resize event
+        fromEvent(window, 'resize')
+            .pipe(
+                takeUntil(this._unsubscribeAll),
+                debounceTime(150)
+            )
+            .subscribe(() => {
+
+                // Update the PerfectScrollbar
+                this.update();
+            });
+    }
+
     /**
      * After view init
      */
@@ -200,6 +229,19 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
             ...this.fusePerfectScrollbarOptions
         });
+
+        // Unbind 'keydown' events of PerfectScrollbar since it causes an extremely
+        // high CPU usage on Angular Material inputs.
+        // Loop through all the event elements of this PerfectScrollbar instance
+        this.ps.event.eventElements.forEach((eventElement) => {
+
+            // If we hit to the element with a 'keydown' event...
+            if ( typeof eventElement.handlers['keydown'] !== 'undefined' )
+            {
+                // Unbind it
+                eventElement.element.removeEventListener('keydown', eventElement.handlers['keydown'][0]);
+            }
+        });
     }
 
     /**
@@ -279,6 +321,71 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ngOnDestroy();
     }
 
+    /**
+     * Returns the geometry of the scrollable element
+     *
+     * @param prefix
+     */
+    geometry(prefix: string = 'scroll'): FusePerfectScrollbarGeometry
+    {
+        return new FusePerfectScrollbarGeometry(
+            this.elementRef.nativeElement[prefix + 'Left'],
+            this.elementRef.nativeElement[prefix + 'Top'],
+            this.elementRef.nativeElement[prefix + 'Width'],
+            this.elementRef.nativeElement[prefix + 'Height']
+        );
+    }
+
+    /**
+     * Returns the position of the scrollable element
+     *
+     * @param absolute
+     */
+    position(absolute: boolean = false): FusePerfectScrollbarPosition
+    {
+        if ( !absolute && this.ps )
+        {
+            return new FusePerfectScrollbarPosition(
+                this.ps.reach.x || 0,
+                this.ps.reach.y || 0
+            );
+        }
+        else
+        {
+            return new FusePerfectScrollbarPosition(
+                this.elementRef.nativeElement.scrollLeft,
+                this.elementRef.nativeElement.scrollTop
+            );
+        }
+    }
+
+    /**
+     * Scroll to
+     *
+     * @param x
+     * @param y
+     * @param speed
+     */
+    scrollTo(x: number, y?: number, speed?: number): void
+    {
+        if ( y == null && speed == null )
+        {
+            this.animateScrolling('scrollTop', x, speed);
+        }
+        else
+        {
+            if ( x != null )
+            {
+                this.animateScrolling('scrollLeft', x, speed);
+            }
+
+            if ( y != null )
+            {
+                this.animateScrolling('scrollTop', y, speed);
+            }
+        }
+    }
+
     /**
      * Scroll to X
      *
@@ -331,9 +438,8 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
      */
     scrollToRight(offset?: number, speed?: number): void
     {
-        const width = this.elementRef.nativeElement.scrollWidth;
+        const left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth;
-
+        this.animateScrolling('scrollLeft', left - (offset || 0), speed);
-        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
     }
 
     /**
@@ -344,27 +450,64 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
      */
     scrollToBottom(offset?: number, speed?: number): void
     {
-        const height = this.elementRef.nativeElement.scrollHeight;
+        const top = this.elementRef.nativeElement.scrollHeight - this.elementRef.nativeElement.clientHeight;
+        this.animateScrolling('scrollTop', top - (offset || 0), speed);
+    }
 
-        this.animateScrolling('scrollTop', height - (offset || 0), speed);
+    /**
+     * Scroll to element
+     *
+     * @param qs
+     * @param offset
+     * @param speed
+     */
+    scrollToElement(qs: string, offset?: number, speed?: number): void
+    {
+        const element = this.elementRef.nativeElement.querySelector(qs);
+
+        if ( !element )
+        {
+            return;
+        }
+
+        const elementPos = element.getBoundingClientRect();
+        const scrollerPos = this.elementRef.nativeElement.getBoundingClientRect();
+
+        if ( this.elementRef.nativeElement.classList.contains('ps--active-x') )
+        {
+            const currentPos = this.elementRef.nativeElement['scrollLeft'];
+            const position = elementPos.left - scrollerPos.left + currentPos;
+
+            this.animateScrolling('scrollLeft', position + (offset || 0), speed);
+        }
+
+        if ( this.elementRef.nativeElement.classList.contains('ps--active-y') )
+        {
+            const currentPos = this.elementRef.nativeElement['scrollTop'];
+            const position = elementPos.top - scrollerPos.top + currentPos;
+
+            this.animateScrolling('scrollTop', position + (offset || 0), speed);
+        }
     }
 
     /**
      * Animate scrolling
      *
-     * @param {string} target
+     * @param target
-     * @param {number} value
+     * @param value
-     * @param {number} speed
+     * @param speed
      */
     animateScrolling(target: string, value: number, speed?: number): void
     {
-        if ( !speed )
+        if ( this._animation )
+        {
+            window.cancelAnimationFrame(this._animation);
+            this._animation = null;
+        }
+
+        if ( !speed || typeof window === 'undefined' )
         {
             this.elementRef.nativeElement[target] = value;
-
-            // PS has weird event sending order, this is a workaround for that
-            this.update();
-            this.update();
         }
         else if ( value !== this.elementRef.nativeElement[target] )
         {
@@ -376,9 +519,8 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp) => {
+            const step = (newTimestamp: number) => {
                 scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
-
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 
                 // Only continue animation if scroll position has not changed
@@ -386,20 +528,17 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
                 {
                     if ( scrollCount >= Math.PI )
                     {
-                        this.elementRef.nativeElement[target] = value;
+                        this.animateScrolling(target, value, 0);
-
-                        // PS has weird event sending order, this is a workaround for that
-                        this.update();
-
-                        this.update();
                     }
                     else
                     {
-                        this.elementRef.nativeElement[target] = oldValue = newValue;
+                        this.elementRef.nativeElement[target] = newValue;
 
+                        // On a zoomed out page the resulting offset may differ
+                        oldValue = this.elementRef.nativeElement[target];
                         oldTimestamp = newTimestamp;
 
-                        window.requestAnimationFrame(step);
+                        this._animation = window.requestAnimationFrame(step);
                     }
                 }
             };

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

@@ -0,0 +1,28 @@
+export class FusePerfectScrollbarGeometry
+{
+    public x: number;
+    public y: number;
+
+    public w: number;
+    public h: number;
+
+    constructor(x: number, y: number, w: number, h: number)
+    {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+    }
+}
+
+export class FusePerfectScrollbarPosition
+{
+    public x: number | 'start' | 'end';
+    public y: number | 'start' | 'end';
+
+    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end')
+    {
+        this.x = x;
+        this.y = y;
+    }
+}

src/@fuse/scss/core.scss

@@ -17,11 +17,10 @@
 @include mat-core();
 
 // Partials
-@import "partials/reset";
 @import "partials/normalize";
 @import "partials/scrollbars";
 @import "partials/helpers";
-@import "partials/global";
+@import "partials/general";
 @import "partials/icons";
 @import "partials/colors";
 @import "partials/material";
@@ -32,7 +31,6 @@
 @import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
-@import "partials/toolbar";
 @import "partials/print";
 
 // Plugins

src/@fuse/scss/fuse.scss

@@ -2,4 +2,4 @@
 @import '~@angular/material/theming';
 
 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "partials/breakpoints";

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

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

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

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

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

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

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

@@ -8,6 +8,7 @@
 
     .fuse-card {
         background: map-get($background, card);
+        border-color: map-get($foreground, divider);
 
         .card-divider {
             border-top: 1px solid map-get($foreground, divider);
@@ -21,8 +22,8 @@
 .fuse-card {
     max-width: 320px;
     min-width: 320px;
-    border-radius: 2px;
+    border-radius: 8px;
-    @include mat-elevation(2);
+    border: 1px solid;
 
     &.variable-width {
         min-width: 0;

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

@@ -47,25 +47,25 @@
 // @ Material colors map
 // -----------------------------------------------------------------------------------------------------
 $matPalettes: (
-    red: $mat-red,
+    'red': $mat-red,
-    pink: $mat-pink,
+    'pink': $mat-pink,
-    purple: $mat-purple,
+    'purple': $mat-purple,
-    deep-purple: $mat-deep-purple,
+    'deep-purple': $mat-deep-purple,
-    indigo: $mat-indigo,
+    'indigo': $mat-indigo,
-    blue: $mat-blue,
+    'blue': $mat-blue,
-    light-blue: $mat-light-blue,
+    'light-blue': $mat-light-blue,
-    cyan: $mat-cyan,
+    'cyan': $mat-cyan,
-    teal: $mat-teal,
+    'teal': $mat-teal,
-    green: $mat-green,
+    'green': $mat-green,
-    light-green: $mat-light-green,
+    'light-green': $mat-light-green,
-    lime: $mat-lime,
+    'lime': $mat-lime,
-    yellow: $mat-yellow,
+    'yellow': $mat-yellow,
-    amber: $mat-amber,
+    'amber': $mat-amber,
-    orange: $mat-orange,
+    'orange': $mat-orange,
-    deep-orange: $mat-deep-orange,
+    'deep-orange': $mat-deep-orange,
-    brown: $mat-brown,
+    'brown': $mat-brown,
-    grey: $mat-grey,
+    'grey': $mat-grey,
-    blue-grey: $mat-blue-grey
+    'blue-grey': $mat-blue-grey
 );
 
 // Material color hues list

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

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

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

@@ -1,23 +0,0 @@
-html,
-body {
-    display: flex;
-    flex: 1 0 auto;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}
-
-body {
-
-    // Boxed
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-
-        @include mat-elevation(8);
-    }
-}

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

@@ -1,11 +1,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Position helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .position#{$infix}-relative {
             position: relative;
@@ -24,11 +24,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Absolute position alignment helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         .align#{$infix}-top {
             top: 0;
@@ -78,11 +78,11 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Spacing helpers
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
 
-    @include media-breakpoint-up($breakpoint) {
+    @include media-breakpoint($materialBreakpoint) {
 
-        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+        $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
 
         @each $prop, $abbrev in (margin: m, padding: p) {
 

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

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

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

@@ -172,7 +172,7 @@
     margin: 0 8px 0 0;
     border-radius: 50%;
     font-size: 17px;
-    font-weight: 500;
+    font-weight: 600;
     text-align: center;
 
     &.square {
@@ -230,13 +230,12 @@ mat-icon.status {
         color: #F44336;
 
         &:before {
-            content: "do_not_disturb_on";
+            content: "remove_circle_outline";
         }
     }
 
     &.away {
-        background-color: #FFC107;
+        color: #FFC107;
-        color: #FFFFFF;
 
         &:before {
             content: "access_time";
@@ -245,7 +244,6 @@ mat-icon.status {
 
     &.offline {
         color: #646464;
-        background-color: #FFFFFF;
 
         &:before {
             content: "not_interested";
@@ -287,14 +285,14 @@ mat-icon.status {
 
         .title {
             font-size: 13px;
-            font-weight: 500;
+            font-weight: 600;
             line-height: 1;
         }
     }
 
     .subheader {
         font-size: 13px;
-        font-weight: 500;
+        font-weight: 600;
         margin-top: 8px;
     }
 
@@ -310,8 +308,9 @@ mat-icon.status {
     position: relative;
     display: inline-flex;
     flex-direction: row;
-    @include mat-elevation(1);
     padding: 0 8px;
+    border-radius: 4px;
+    @include mat-elevation(1);
 
     .pagination-item {
         display: flex;
@@ -364,7 +363,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -406,14 +405,14 @@ mat-icon.status {
                 left: 50%;
                 transform: translateX(-50%);
                 font-size: 11px;
-                font-weight: 500;
+                font-weight: 600;
                 padding: 6px 8px;
             }
 
             .package-type {
                 padding: 48px 32px 24px 32px;
                 font-size: 20px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -423,7 +422,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 24px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -436,7 +435,7 @@ mat-icon.status {
             .period {
                 padding: 0 32px;
                 font-size: 15px;
-                font-weight: 500;
+                font-weight: 600;
                 text-align: center;
             }
 
@@ -471,7 +470,7 @@ mat-icon.status {
 
                 .subtitle {
                     font-size: 17px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
             }
 
@@ -481,7 +480,7 @@ mat-icon.status {
                 .currency {
                     padding-right: 4px;
                     font-size: 15px;
-                    font-weight: 500;
+                    font-weight: 600;
                 }
 
                 .value {
@@ -546,7 +545,7 @@ table {
 
                 th {
                     padding: 16px 8px;
-                    font-weight: 500;
+                    font-weight: 600;
                     white-space: nowrap;
 
                     &:first-child {

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

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

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

@@ -18,6 +18,7 @@
 
                     > .content-card {
                         background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
 
                         > .toolbar {
                             border-bottom-color: map-get($foreground, divider);
@@ -34,6 +35,7 @@
 
                     > .content-card {
                         background: map-get($background, card);
+                        border-radius: 8px 8px 0 0;
 
                         > .toolbar {
                             border-bottom-color: map-get($foreground, divider);
@@ -79,15 +81,11 @@
 // @ Page Layouts
 // -----------------------------------------------------------------------------------------------------
 $carded-header-height: 200px !default;
-$carded-header-height-sm: 160px !default;
 $carded-toolbar-height: 64px !default;
-
 $header-height: 120px !default;
-$header-height-sm: 100px !default;
 
-// Calculate toolbarless header height
+// Calculate toolbar-less carded header height
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
-$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
 .page-layout {
     position: relative;
@@ -109,10 +107,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             right: 0;
             left: 0;
             height: $carded-header-height;
-
-            @include media-breakpoint-down('sm') {
-                height: $carded-header-height-sm;
-            }
         }
 
         // Fullwidth
@@ -136,12 +130,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height-without-toolbar !important;
                     min-height: $carded-header-height-without-toolbar !important;
                     max-height: $carded-header-height-without-toolbar !important;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm !important;
-                        min-height: $carded-header-height-without-toolbar-sm !important;
-                        max-height: $carded-header-height-without-toolbar-sm !important;
-                    }
                 }
 
                 > .content-card {
@@ -149,7 +137,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 0 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
@@ -185,6 +173,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                             > .mat-tab-group {
                                 overflow: hidden;
+                                width: 100%;
 
                                 .mat-tab-header {
 
@@ -303,12 +292,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height;
                     min-height: $carded-header-height;
                     max-height: $carded-header-height;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-sm;
-                        min-height: $carded-header-height-sm;
-                        max-height: $carded-header-height-sm;
-                    }
                 }
 
                 .content {
@@ -334,12 +317,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     height: $carded-header-height-without-toolbar;
                     min-height: $carded-header-height-without-toolbar;
                     max-height: $carded-header-height-without-toolbar;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm;
-                        min-height: $carded-header-height-without-toolbar-sm;
-                        max-height: $carded-header-height-without-toolbar-sm;
-                    }
                 }
 
                 > .content-card {
@@ -347,7 +324,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     flex-direction: column;
                     flex: 1 1 auto;
                     overflow: hidden;
-                    @include mat-elevation(7);
+                    @include mat-elevation(1);
 
                     > .toolbar {
                         display: flex;
@@ -379,7 +356,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     width: calc(100% - 32px);
                     min-width: 0;
 
-                    @include media-breakpoint-down('md') {
+                    @include media-breakpoint('lt-lg') {
                         width: calc(100% - 64px);
                     }
 
@@ -566,7 +543,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 z-index: 3;
                 min-width: 0;
                 width: 100%;
-                @include mat-elevation(7);
+                @include mat-elevation(1);
 
                 > .header {
                     height: $header-height;
@@ -625,6 +602,11 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         flex: 1 1 auto;
                         overflow: auto;
                         -webkit-overflow-scrolling: touch;
+
+                        > .content {
+                            border-radius: 8px;
+                            @include mat-elevation(1);
+                        }
                     }
                 }
             }
@@ -685,7 +667,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         min-height: 100%;
     }
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
 
         // Smaller margins
         &.carded {

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

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

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

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

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

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

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

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

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

@@ -41,7 +41,7 @@
 // -----------------------------------------------------------------------------------------------------
 html {
     font-size: 62.5%;
-    font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
+    font-family: 'Muli', 'Helvetica Neue', 'Arial', sans-serif;
     line-height: 1.4 !important;
     letter-spacing: -0.1px !important;
 }
@@ -89,7 +89,7 @@ h6, .h6 {
 a {
     text-decoration: none;
 
-    &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
+    &:not(.mat-button):not(.mat-raised-button):not(.mat-flat-button):not(.mat-stroked-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
 
         &:hover, &:active {
             text-decoration: underline;
@@ -304,7 +304,7 @@ strong {
     padding: 4px 8px;
     margin: 0 8px;
     font-size: 11px;
-    font-weight: 500;
+    font-weight: 600;
     white-space: nowrap;
 }
 
@@ -399,6 +399,10 @@ strong {
                 li {
                     margin-bottom: 6px;
                     letter-spacing: 0.015em;
+
+                    ul {
+                        margin-top: 6px;
+                    }
                 }
             }
         }
@@ -433,4 +437,4 @@ strong {
         border-left-color: #03A9F4;
         color: rgba(0, 0, 0, 0.87);
     }
-}
+}

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

@@ -95,6 +95,11 @@
                 min-height: 48px;
                 font-size: 13px;
                 padding: 0 24px;
+
+                .datatable-header-cell-template-wrap {
+                    display: inline-flex;
+                    align-items: center;
+                }
             }
         }
 
@@ -172,7 +177,7 @@
 }
 
 [class*="datatable-icon-"] {
-    font-family: 'Material Icons';
+    font-family: 'material-outline-icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
@@ -204,11 +209,11 @@
 }
 
 .datatable-icon-up:before {
-    content: "keyboard_arrow_up";
+    content: "arrow_drop_up";
 }
 
 .datatable-icon-down:before {
-    content: "keyboard_arrow_down";
+    content: "arrow_drop_down";
 }
 
 .datatable-icon-sort:before {
@@ -249,4 +254,4 @@
 
 .datatable-icon-prev:before {
     content: "skip_previous";
-}
+}

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

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { Router, RoutesRecognized } from '@angular/router';
+import { ResolveEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -96,7 +96,7 @@ export class FuseConfigService
         // 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 RoutesRecognized))
+            .pipe(filter(event => event instanceof ResolveEnd))
             .subscribe(() => {
                 if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
                 {

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

@@ -1,4 +1,4 @@
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@@ -14,10 +14,10 @@ export class FuseMatchMediaService
     /**
      * Constructor
      *
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
-        private _observableMedia: ObservableMedia
+        private _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -39,7 +39,7 @@ export class FuseMatchMediaService
      */
     private _init(): void
     {
-        this._observableMedia.asObservable()
+        this._mediaObserver.media$
             .pipe(
                 debounceTime(500),
                 distinctUntilChanged()

src/app/app.component.scss

@@ -25,7 +25,7 @@
 
         &.right-side-panel {
 
-            @include media-breakpoint-up('lg') {
+            @include media-breakpoint('gt-md') {
                 right: 70px;
             }
         }

src/app/app.component.ts

@@ -73,9 +73,12 @@ export class AppComponent implements OnInit, OnDestroy
         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.
@@ -97,9 +100,9 @@ export class AppComponent implements OnInit, OnDestroy
          */
 
         /**
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          * ngxTranslate Fix End
-         * ------------------------------------------------------------------
+         * ----------------------------------------------------------------------------------------------------
          */
 
         // Add is-mobile class to the body if the platform is mobile

src/app/app.module.ts

@@ -4,7 +4,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';

src/app/app.theme.scss

@@ -61,9 +61,13 @@ $custom_palettes: (
 // @ Typography
 // -----------------------------------------------------------------------------------------------------
 
-// Force the input field font sizes to 16px
+// Angular Material typography
 $typography: mat-typography-config(
-    $input: mat-typography-level(16px, 1.125, 400)
+    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
+    $title: mat-typography-level(20px, 32px, 600),
+    $body-2: mat-typography-level(14px, 24px, 600),
+    $button: mat-typography-level(14px, 14px, 600),
+    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 );
 
 // Setup the typography
@@ -82,6 +86,8 @@ $typography: mat-typography-config(
 @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/e-commerce/orders/orders.theme";
+@import "src/app/main/apps/e-commerce/products/products.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";
@@ -108,10 +114,12 @@ $typography: mat-typography-config(
 @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/search/classic/search-classic.theme";
+@import "src/app/main/pages/search/modern/search-modern.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/ui/cards/cards.theme";
 
 @import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
 
@@ -128,6 +136,8 @@ $typography: mat-typography-config(
     @include chat-theme($theme);
     @include contacts-theme($theme);
     @include dashboards-project-theme($theme);
+    @include e-commerce-orders-theme($theme);
+    @include e-commerce-products-theme($theme);
     @include file-manager-theme($theme);
     @include mail-theme($theme);
     @include mail-ngrx-theme($theme);
@@ -155,11 +165,13 @@ $typography: mat-typography-config(
     @include profile-about-theme($theme);
     @include profile-photos-videos-theme($theme);
     @include profile-timeline-theme($theme);
+    @include search-classic-theme($theme);
+    @include search-modern-theme($theme);
     @include faq-theme($theme);
     @include knowledge-base-theme($theme);
 
-    // Docs
+    // UI
-    @include docs-components-cards-theme($theme);
+    @include ui-cards-theme($theme);
 
     // Example Viewer
     @include example-viewer-theme($theme);
@@ -303,4 +315,4 @@ body.theme-pink-dark {
     );
 
     @include fuse-color-classes($palettes);
-}
+}

src/app/fake-db/calendar.ts

@@ -20,10 +20,10 @@ export class CalendarFakeDb
                     start    : subDays(startOfDay(new Date()), 1),
                     end      : addDays(new Date(), 1),
                     title    : 'A 3 day event',
-                    allDay   : false,
+                    allDay   : true,
                     color    : {
-                        primary  : '#ad2121',
+                        primary  : '#F44336',
-                        secondary: '#FAE3E3'
+                        secondary: '#FFCDD2'
                     },
                     resizable: {
                         beforeStart: true,
@@ -40,8 +40,8 @@ export class CalendarFakeDb
                     title    : 'An event with no end date',
                     allDay   : false,
                     color    : {
-                        primary  : '#e3bc08',
+                        primary  : '#FF9800',
-                        secondary: '#FDF1BA'
+                        secondary: '#FFE0B2'
                     },
                     resizable: {
                         beforeStart: true,
@@ -59,7 +59,7 @@ export class CalendarFakeDb
                     title    : 'A long event that spans 2 months',
                     allDay   : false,
                     color    : {
-                        primary  : '#1e90ff',
+                        primary  : '#1E90FF',
                         secondary: '#D1E8FF'
                     },
                     resizable: {
@@ -78,8 +78,8 @@ export class CalendarFakeDb
                     title    : 'A draggable and resizable event',
                     allDay   : false,
                     color    : {
-                        primary  : '#e3bc08',
+                        primary  : '#673AB7',
-                        secondary: '#FDF1BA'
+                        secondary: '#D1C4E9'
                     },
                     resizable: {
                         beforeStart: true,

src/app/fake-db/contacts.ts

@@ -12,7 +12,7 @@ export class ContactsFakeDb
             'email'   : 'abbott@withinpixels.com',
             'phone'   : '+1-202-555-0175',
             'address' : '933 8th Street Stamford, CT 06902',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -26,7 +26,7 @@ export class ContactsFakeDb
             'email'   : 'arnold@withinpixels.com',
             'phone'   : '+1-202-555-0141',
             'address' : '906 Valley Road Michigan City, IN 46360',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -40,7 +40,7 @@ export class ContactsFakeDb
             'email'   : 'barrera@withinpixels.com',
             'phone'   : '+1-202-555-0196',
             'address' : '183 River Street Passaic, NJ 07055',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -54,7 +54,7 @@ export class ContactsFakeDb
             'email'   : 'blair@withinpixels.com',
             'phone'   : '+1-202-555-0118',
             'address' : '143 Jones Street Eau Claire, WI 54701',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -68,7 +68,7 @@ export class ContactsFakeDb
             'email'   : 'boyle@withinpixels.com',
             'phone'   : '+1-202-555-0177',
             'address' : '218 Pearl Street Brandon, FL 33510',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -82,7 +82,7 @@ export class ContactsFakeDb
             'email'   : 'christy@withinpixels.com',
             'phone'   : '+1-202-555-0136',
             'address' : '329 Bridge Street Desoto, TX 75115',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -96,7 +96,7 @@ export class ContactsFakeDb
             'email'   : 'copeland@withinpixels.com',
             'phone'   : '+1-202-555-0107',
             'address' : '956 6th Avenue North Bergen, NJ 0704',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -110,7 +110,7 @@ export class ContactsFakeDb
             'email'   : 'estes@withinpixels.com',
             'phone'   : '+1-202-555-0113',
             'address' : '664 York Street Cambridge, MA 02138',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -124,7 +124,7 @@ export class ContactsFakeDb
             'email'   : 'harper@withinpixels.com',
             'phone'   : '+1-202-555-0173',
             'address' : '738 Route 11 Cornelius, NC 28031',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -138,7 +138,7 @@ export class ContactsFakeDb
             'email'   : 'helen@withinpixels.com',
             'phone'   : '+1-202-555-0163',
             'address' : '194 Washington Avenue Saint Petersburg, FL 33702',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -152,7 +152,7 @@ export class ContactsFakeDb
             'email'   : 'henderson@withinpixels.com',
             'phone'   : '+1-202-555-0151',
             'address' : '686 Roosevelt Avenue Oviedo, FL 32765',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -166,7 +166,7 @@ export class ContactsFakeDb
             'email'   : 'josefina@withinpixels.com',
             'phone'   : '+1-202-555-0160',
             'address' : '202 Hartford Road Lynchburg, VA 24502',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -180,7 +180,7 @@ export class ContactsFakeDb
             'email'   : 'katina@withinpixels.com',
             'phone'   : '+1-202-555-0186',
             'address' : '219 Woodland Road Valrico, FL 33594',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -194,7 +194,7 @@ export class ContactsFakeDb
             'email'   : 'lily@withinpixels.com',
             'phone'   : '+1-202-555-0115',
             'address' : '305 Willow Drive Superior, WI 54880',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -208,7 +208,7 @@ export class ContactsFakeDb
             'email'   : 'mai@withinpixels.com',
             'phone'   : '+1-202-555-0199',
             'address' : '148 Heather Lane Mcminnville, TN 37110',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -222,7 +222,7 @@ export class ContactsFakeDb
             'email'   : 'nancy@withinpixels.com',
             'phone'   : '+1-202-555-0120',
             'address' : '345 Laurel Lane Union City, NJ 07087',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -236,7 +236,7 @@ export class ContactsFakeDb
             'email'   : 'nora@withinpixels.com',
             'phone'   : '+1-202-555-0172',
             'address' : '572 Rose Street Summerfield, FL 34491',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -250,7 +250,7 @@ export class ContactsFakeDb
             'email'   : 'odessa@withinpixels.com',
             'phone'   : '+1-202-555-0190',
             'address' : '527 Jefferson Court Conyers, GA 30012',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -264,7 +264,7 @@ export class ContactsFakeDb
             'email'   : 'reyna@withinpixels.com',
             'phone'   : '+1-202-555-0116',
             'address' : '297 Strawberry Lane Faribault, MN 55021',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -278,7 +278,7 @@ export class ContactsFakeDb
             'email'   : 'shauna@withinpixels.com',
             'phone'   : '+1-202-555-0159',
             'address' : '928 Canterbury Court Pittsburgh, PA 15206',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -292,7 +292,7 @@ export class ContactsFakeDb
             'email'   : 'shepard@withinpixels.com',
             'phone'   : '+1-202-555-0173',
             'address' : '904 Ridge Road Pickerington, OH 43147',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -306,7 +306,7 @@ export class ContactsFakeDb
             'email'   : 'tillman@withinpixels.com',
             'phone'   : '+1-202-555-0183',
             'address' : '447 Charles Street Dorchester, MA 02125',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -320,7 +320,7 @@ export class ContactsFakeDb
             'email'   : 'trevino@withinpixels.com',
             'phone'   : '+1-202-555-0138',
             'address' : '84 Valley View Road Norman, OK 73072',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -334,7 +334,7 @@ export class ContactsFakeDb
             'email'   : 'tyson@withinpixels.com',
             'phone'   : '+1-202-555-0146',
             'address' : '204 Clark Street Monsey, NY 10952',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         },
         {
@@ -348,7 +348,7 @@ export class ContactsFakeDb
             'email'   : 'velezquez@withinpixels.com',
             'phone'   : '+1-202-555-0146',
             'address' : '261 Cleveland Street Riverside, NJ 08075',
-            'birthday': null,
+            'birthday': '',
             'notes'   : ''
         }
     ];

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

@@ -4,7 +4,7 @@ export class AnalyticsDashboardDb
         widget1: {
             chartType: 'line',
             datasets : {
-                '2015': [
+                '2016': [
                     {
                         label: 'Sales',
                         data : [1.9, 3, 3.4, 2.2, 2.9, 3.9, 2.5, 3.8, 4.1, 3.8, 3.2, 2.9],
@@ -12,7 +12,7 @@ export class AnalyticsDashboardDb
 
                     }
                 ],
-                '2016': [
+                '2017': [
                     {
                         label: 'Sales',
                         data : [2.2, 2.9, 3.9, 2.5, 3.8, 3.2, 2.9, 1.9, 3, 3.4, 4.1, 3.8],
@@ -20,7 +20,7 @@ export class AnalyticsDashboardDb
 
                     }
                 ],
-                '2017': [
+                '2018': [
                     {
                         label: 'Sales',
                         data : [3.9, 2.5, 3.8, 4.1, 1.9, 3, 3.8, 3.2, 2.9, 3.4, 2.2, 2.9],

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

@@ -77,8 +77,7 @@ export class FakeDbService implements InMemoryDbService
             'profile-about'        : ProfileFakeDb.about,
 
             // Search
-            'search-classic': SearchFakeDb.classic,
+            'search': SearchFakeDb.search,
-            'search-table'  : SearchFakeDb.table,
 
             // FAQ
             'faq': FaqFakeDb.data,

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

@@ -48,7 +48,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Shopping list',
@@ -61,7 +61,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Invoices',
@@ -74,7 +74,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Crash logs',
@@ -87,7 +87,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'System logs',
@@ -100,7 +100,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Prices',
@@ -113,7 +113,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Anabelle Manual',
@@ -126,7 +126,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         },
         {
             'name'     : 'Steam summer sale budget',
@@ -139,7 +139,7 @@ export class FileManagerFakeDb
             'extention': '',
             'location' : 'My Files > Documents',
             'offline'  : true,
-            'preview'  : 'assets/images/etc/sample-file-preview.jpg'
+            'preview'  : 'assets/images/file-manager/sample-file-preview.jpg'
         }
     ];
 

src/app/fake-db/invoice.ts

@@ -15,8 +15,8 @@ export class InvoiceFakeDb
             'email'  : 'johndoe@mail.com'
         },
         'number'  : 'P9-0004',
-        'date'    : 'Jul 19, 2015',
+        'date'    : 'Jul 19, 2018',
-        'dueDate' : 'Aug 24, 2015',
+        'dueDate' : 'Aug 24, 2018',
         'services': [
             {
                 'title'    : 'Prototype & Design',

src/app/fake-db/mail.ts

@@ -25,23 +25,22 @@ export class MailFakeDb
                 {
                     'type'    : 'image',
                     'fileName': 'flowers',
-                    'preview' : 'assets/images/etc/flowers-thumb.jpg',
+                    'preview' : 'assets/images/mail/attachment-1.jpg',
                     'url'     : '',
                     'size'    : '1.1Mb'
                 },
                 {
                     'type'    : 'image',
                     'fileName': 'snow',
-                    'preview' : 'assets/images/etc/snow-thumb.jpg',
+                    'preview' : 'assets/images/mail/attachment-2.jpg',
                     'url'     : '',
                     'size'    : '380kb'
                 },
                 {
                     'type'    : 'image',
                     'fileName': 'sunrise',
-                    'preview' : 'assets/images/etc/sunrise-thumb.jpg',
+                    'preview' : 'assets/images/mail/attachment-3.jpg',
-                    'url'     : 'assets/images/etc/early-sunrise.jpg',
+                    'size': '17Mb'
-                    'size'    : '17Mb'
                 }
             ],
             'labels'        : [

src/app/fake-db/profile.ts

@@ -16,7 +16,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/andrew.jpg'
                 },
                 'message': 'sent you a message.',
-                'time'   : 'June 10,2015'
+                'time'   : 'June 10,2018'
             },
             {
                 'user'   : {
@@ -24,7 +24,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/garry.jpg'
                 },
                 'message': 'shared a public post with your group.',
-                'time'   : 'June 9,2015'
+                'time'   : 'June 9,2018'
             },
             {
                 'user'   : {
@@ -32,7 +32,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/carl.jpg'
                 },
                 'message': 'wants to play Fallout Shelter with you.',
-                'time'   : 'June 8,2015'
+                'time'   : 'June 8,2018'
             },
             {
                 'user'   : {
@@ -40,7 +40,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/jane.jpg'
                 },
                 'message': 'started following you.',
-                'time'   : 'June 7,2015'
+                'time'   : 'June 7,2018'
             },
             {
                 'user'   : {
@@ -48,7 +48,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/james.jpg'
                 },
                 'message': 'sent you a message.',
-                'time'   : 'June 6,2015'
+                'time'   : 'June 6,2018'
             },
             {
                 'user'   : {
@@ -56,7 +56,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/joyce.jpg'
                 },
                 'message': 'shared a photo with you.',
-                'time'   : 'June 5,2015'
+                'time'   : 'June 5,2018'
             },
             {
                 'user'   : {
@@ -64,7 +64,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/vincent.jpg'
                 },
                 'message': 'shared a photo with you.',
-                'time'   : 'June 4,2015'
+                'time'   : 'June 4,2018'
             }
         ],
         posts     : [
@@ -80,7 +80,7 @@ export class ProfileFakeDb
                 'share'   : 21,
                 'media'   : {
                     'type'   : 'image',
-                    'preview': 'assets/images/etc/early-sunrise.jpg'
+                    'preview': 'assets/images/profile/morain-lake.jpg'
                 },
                 'comments': [
                     {
@@ -88,7 +88,7 @@ export class ProfileFakeDb
                             'name'  : 'Alice Freeman',
                             'avatar': 'assets/images/avatars/alice.jpg'
                         },
-                        'time'   : 'June 10, 2015',
+                        'time'   : 'June 10, 2018',
                         'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
                     }
                 ]
@@ -99,17 +99,17 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/andrew.jpg'
                 },
                 'message' : 'Hey, man! Check this, it’s pretty awesome!',
-                'time'    : 'June 12, 2015',
+                'time'    : 'June 12, 2018',
                 'type'    : 'article',
                 'like'    : 98,
                 'share'   : 6,
                 'article' : {
-                    'title'   : 'The Fallout 4 Pip-Boy Edition Is Back In Stock Now',
+                    'title'   : 'Never stop changing!',
-                    'subtitle': 'Kotaku',
+                    'subtitle': 'John Westrock',
-                    'excerpt' : 'The Fallout 4 Pip-Boy edition is back in stock at Gamestop, for all 3 platforms. Additionally, Walmart also has it in stock for the PS4 and Xbox One as of this writing, as does Best Buy.',
+                    'excerpt' : 'John Westrock\'s new photo album called \'Never stop changing\' is published! It features more than 200 photos that will take you right in.',
                     'media'   : {
                         'type'   : 'image',
-                        'preview': 'assets/images/etc/fallout.jpg'
+                        'preview': 'assets/images/profile/never-stop-changing.jpg'
                     }
                 },
                 'comments': [
@@ -118,7 +118,7 @@ export class ProfileFakeDb
                             'name'  : 'Alice Freeman',
                             'avatar': 'assets/images/avatars/alice.jpg'
                         },
-                        'time'   : 'June 10, 2015',
+                        'time'   : 'June 10, 2018',
                         'message': 'That’s a wonderful place. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat.'
                     }
                 ]
@@ -129,7 +129,7 @@ export class ProfileFakeDb
                     'avatar': 'assets/images/avatars/carl.jpg'
                 },
                 'message': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et eleifend ligula. Fusce posuere in sapien ac facilisis. Etiam sit amet justo non felis ornare feugiat. Aenean lorem ex, ultrices sit amet ligula sed...',
-                'time'   : 'June 10, 2015',
+                'time'   : 'June 10, 2018',
                 'type'   : 'something',
                 'like'   : 4,
                 'share'  : 1
@@ -139,130 +139,130 @@ export class ProfileFakeDb
 
     public static photosVideos = [
         {
-            'name' : 'June 2015',
+            'name' : 'June 2018',
             'info' : '5 Photos',
             'media': [
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'A Walk Amongst Friends',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Braies Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Fall Glow',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'First Snow',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/first-snow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Lago di Braies',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                 }
             ]
         },
         {
-            'name' : 'May 2015',
+            'name' : 'May 2018',
             'info' : '7 Photos, 3 Videos',
             'media': [
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'Lago di Sorapis',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Morain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Never Stop Changing',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'Reaching',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/reaching-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Yosemite',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/yosemite-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'A Walk Amongst Friends',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Braies Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Fall Glow',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/fall-glow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'First Snow',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/first-snow-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Lago di Braies',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/lago-di-braies-small.jpg'
                 }
             ]
         },
         {
-            'name' : 'April 2015',
+            'name' : 'April 2018',
-            'info' : '5 Photos',
+            'info' : '7 Photos',
             'media': [
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'Lago di Sorapis',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/lago-di-sorapis-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Morain Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/morain-lake-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Hot air balloons',
+                    'title'  : 'Never Stop Changing',
-                    'preview': 'assets/images/etc/air-balloons.jpg'
+                    'preview': 'assets/images/profile/never-stop-changing-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Cactus',
+                    'title'  : 'Reaching',
-                    'preview': 'assets/images/etc/cactus.jpg'
+                    'preview': 'assets/images/profile/reaching-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Road Trip',
+                    'title'  : 'Yosemite',
-                    'preview': 'assets/images/etc/road-trip.jpg'
+                    'preview': 'assets/images/profile/yosemite-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Sunset',
+                    'title'  : 'A Walk Amongst Friends',
-                    'preview': 'assets/images/etc/mountain-sunset.jpg'
+                    'preview': 'assets/images/profile/a-walk-amongst-friends-small.jpg'
                 },
                 {
                     'type'   : 'photo',
-                    'title'  : 'Mountain Lake',
+                    'title'  : 'Braies Lake',
-                    'preview': 'assets/images/etc/mountain-lake.jpg'
+                    'preview': 'assets/images/profile/braies-lake-small.jpg'
                 }
             ]
         }
@@ -270,10 +270,10 @@ export class ProfileFakeDb
 
     public static about = {
         'general': {
-            'gender'   : 'Female',
+            'gender'   : 'Male',
-            'birthday' : 'May 8th, 1988',
+            'birthday' : 'February 30th, 1974',
             'locations': [
-                'Istanbul, Turkey',
+                'London, UK',
                 'New York, USA'
             ],
             'about'    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget pharetra felis, sed ullamcorper dui. Sed et elementum neque. Vestibulum pellente viverra ultrices. Etiam justo augue, vehicula ac gravida a, interdum sit amet nisl. Integer vitae nisi id nibh dictum mollis in vitae tortor.'
@@ -308,19 +308,16 @@ export class ProfileFakeDb
         },
         'groups' : [
             {
-                'logo'    : 'assets/images/logos/android.png',
                 'name'    : 'Android',
                 'category': 'Technology',
                 'members' : '1.856.546'
             },
             {
-                'logo'    : 'assets/images/logos/google.png',
                 'name'    : 'Google',
                 'category': 'Web',
                 'members' : '1.226.121'
             },
             {
-                'logo'    : 'assets/images/logos/fallout.png',
                 'name'    : 'Fallout',
                 'category': 'Games',
                 'members' : '526.142'

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

@@ -3,11 +3,11 @@ export class QuickPanelFakeDb
     public static notes = [
         {
             'title' : 'Best songs to listen while working',
-            'detail': 'Last edit: May 8th, 2015'
+            'detail': 'Last edit: May 8th, 2018'
         },
         {
             'title' : 'Useful subreddits',
-            'detail': 'Last edit: January 12th, 2015'
+            'detail': 'Last edit: January 12th, 2018'
         }
     ];
 

src/app/fake-db/scrumboard.ts

@@ -94,14 +94,14 @@ export class ScrumboardFakeDb
                             'id'  : '67027cahbe3b52ecf2dc631c',
                             'name': 'mail.jpg',
                             'src' : 'assets/images/scrumboard/mail.jpg',
-                            'time': 'Added Nov 3 at 15:22AM',
+                            'time': 'Nov 3 at 15:22AM',
                             'type': 'image'
                         },
                         {
                             'id'  : '56027cfcbe1b72ecf1fc452a',
                             'name': 'calendar.jpg',
                             'src' : 'assets/images/scrumboard/calendar.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         }
                     ],
@@ -383,14 +383,14 @@ export class ScrumboardFakeDb
                             'id'  : '12027cafbe3b52ecf2ef632c',
                             'name': 'header-.jpg',
                             'src' : 'assets/images/scrumboard/header-1.jpg',
-                            'time': 'Added Nov 3 at 15:22AM',
+                            'time': 'Nov 3 at 15:22AM',
                             'type': 'image'
                         },
                         {
                             'id'  : '55027ced1e1a12ecf1fced2a',
                             'name': 'header-2.jpg',
                             'src' : 'assets/images/scrumboard/header-2.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         }
                     ],
@@ -628,13 +628,13 @@ export class ScrumboardFakeDb
                             'id'  : '56027cfcbe1b72ecf1fc452a',
                             'name': 'calendar-app-design.jpg',
                             'src' : 'assets/images/scrumboard/calendar.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         },
                         {
                             'id'  : '67027cahbe3b52ecf2dc631c',
                             'url' : 'assets/images/scrumboard/calendar.jpg',
-                            'time': 'Added Nov 3 at 15:22AM',
+                            'time': 'Nov 3 at 15:22AM',
                             'type': 'link'
                         }
                     ],
@@ -730,7 +730,7 @@ export class ScrumboardFakeDb
                             'id'  : '5603a2ae2bbd55bb2db57478',
                             'name': 'mail-app-design.jpg',
                             'src' : 'assets/images/scrumboard/mail.jpg',
-                            'time': 'Added Nov 1 at 12:34PM',
+                            'time': 'Nov 1 at 12:34PM',
                             'type': 'image'
                         }
                     ],

src/app/fake-db/search.ts

@@ -1,6 +1,6 @@
 export class SearchFakeDb
 {
-    public static classic = [
+    public static search = [
         {
             'title'  : 'Dynamically Procrastinate B2C',
             'url'    : 'ourwebaddress.com/articles/procrastinate',
@@ -43,97 +43,4 @@ export class SearchFakeDb
         }
     ];
 
-    public static table = [
-        {
-            'name'     : 'Airi Satou',
-            'position' : 'Accountant',
-            'office'   : 'Tokyo',
-            'age'      : '33',
-            'startDate': '2008/11/28',
-            'salary'   : '162700',
-            'email'    : 'a.satou@mail.com'
-        },
-        {
-            'name'     : 'Angellica Ramos',
-            'position' : 'Chief Executive Officer (CEO)',
-            'office'   : 'London',
-            'age'      : '47',
-            'startDate': '2009/10/09',
-            'salary'   : '1200000',
-            'email'    : 'a.ramos@mail.com'
-        },
-        {
-            'name'     : 'Ashton Cox',
-            'position' : 'Hunior Technical Author',
-            'office'   : 'San Fransisco',
-            'age'      : '66',
-            'startDate': '2009/01/12',
-            'salary'   : '86000',
-            'email'    : 'a.cox@mail.com'
-        },
-        {
-            'name'     : 'Bradley Greer',
-            'position' : 'Software Engineer',
-            'office'   : 'London',
-            'age'      : '41',
-            'startDate': '2012/10/13',
-            'salary'   : '132000',
-            'email'    : 'b.greer@mail.com'
-        },
-        {
-            'name'     : 'Brenden Wagner',
-            'position' : 'Software Engineer',
-            'office'   : 'San Fransisco',
-            'age'      : '28',
-            'startDate': '2011/06/07',
-            'salary'   : '206850',
-            'email'    : 'b.wagner@mail.com'
-        },
-        {
-            'name'     : 'Brielle Williamson',
-            'position' : 'Integration Specialist',
-            'office'   : 'New York',
-            'age'      : '61',
-            'startDate': '2012/12/02',
-            'salary'   : '372000',
-            'email'    : 'b.williamson@mail.com'
-        },
-        {
-            'name'     : 'Bruno Nash',
-            'position' : 'Software Engineer',
-            'office'   : 'London',
-            'age'      : '38',
-            'startDate': '2011/05/03',
-            'salary'   : '163500',
-            'email'    : 'b.nash@mail.com'
-        },
-        {
-            'name'     : 'Caesar Vance',
-            'position' : 'Pre-Sales Support',
-            'office'   : 'New York',
-            'age'      : '21',
-            'startDate': '2011/12/12',
-            'salary'   : '106450',
-            'email'    : 'c.vance@mail.com'
-        },
-        {
-            'name'     : 'Cara Stevens',
-            'position' : 'Sales Assistant',
-            'office'   : 'New York',
-            'age'      : '46',
-            'startDate': '2011/12/06',
-            'salary'   : '145600',
-            'email'    : 'c.stevens@mail.com'
-        },
-        {
-            'name'     : 'Cedric Kelly',
-            'position' : 'Senior Javascript Developer',
-            'office'   : 'Edinburg',
-            'age'      : '22',
-            'startDate': '2012/03/29',
-            'salary'   : '433060',
-            'email'    : 'c.kelly@mail.com'
-        }
-    ];
-
 }

src/app/fake-db/todo.ts

@@ -5,7 +5,7 @@ export class TodoFakeDb
             'id'       : '561551bd7fe2ff461101c192',
             'title'    : 'Proident tempor est nulla irure ad est',
             'notes'    : 'Id nulla nulla proident deserunt deserunt proident in quis. Cillum reprehenderit labore id anim laborum.',
-            'startDate': 'Wednesday, January 29, 2014 3:17 PM',
+            'startDate': 'Wednesday, January 29, 2017 3:17 PM',
             'dueDate'  : null,
             'completed': false,
             'starred'  : false,
@@ -17,8 +17,8 @@ export class TodoFakeDb
             'id'       : '561551bd4ac1e7eb77a3a750',
             'title'    : 'Magna quis irure quis ea pariatur laborum',
             'notes'    : '',
-            'startDate': 'Sunday, February 1, 2015 1:30 PM',
+            'startDate': 'Sunday, February 1, 2018 1:30 PM',
-            'dueDate'  : 'Friday, December 30, 2016 10:07 AM',
+            'dueDate'  : 'Friday, December 30, 2019 10:07 AM',
             'completed': false,
             'starred'  : false,
             'important': true,
@@ -29,7 +29,7 @@ export class TodoFakeDb
             'id'       : '561551bd917bfec2ddef2d49',
             'title'    : 'Ullamco duis commodo sint ad aliqua aute',
             'notes'    : 'Sunt laborum enim nostrud ea fugiat cillum mollit aliqua exercitation ad elit.',
-            'startDate': 'Friday, April 11, 2014 3:43 AM',
+            'startDate': 'Friday, April 11, 2017 3:43 AM',
             'dueDate'  : 'Wednesday, July 26, 2017 11:14 AM',
             'completed': false,
             'starred'  : true,
@@ -41,7 +41,7 @@ export class TodoFakeDb
             'id'       : '561551bdeeb2fd6877e18c29',
             'title'    : 'Eiusmod non occaecat pariatur Lorem in ex',
             'notes'    : 'Nostrud anim mollit incididunt qui qui sit commodo duis. Anim amet irure aliquip duis nostrud sit quis fugiat ullamco non dolor labore. Lorem sunt voluptate laboris culpa proident. Aute eiusmod aliqua exercitation irure exercitation qui laboris mollit occaecat eu occaecat fugiat.',
-            'startDate': 'Wednesday, May 7, 2014 4:14 AM',
+            'startDate': 'Wednesday, May 7, 2017 4:14 AM',
             'dueDate'  : 'Friday, December 15, 2017 4:01 AM',
             'completed': true,
             'starred'  : true,
@@ -53,8 +53,8 @@ export class TodoFakeDb
             'id'       : '561551bdf38eae0134ae43d4',
             'title'    : 'Lorem magna cillum consequat consequat mollit',
             'notes'    : 'Velit ipsum proident ea incididunt et. Consectetur eiusmod laborum voluptate duis occaecat ullamco sint enim proident.',
-            'startDate': 'Sunday, August 23, 2015 11:19 PM',
+            'startDate': 'Sunday, August 23, 2018 11:19 PM',
-            'dueDate'  : 'Friday, July 8, 2016 10:49 AM',
+            'dueDate'  : 'Friday, July 8, 2019 10:49 AM',
             'completed': false,
             'starred'  : false,
             'important': false,
@@ -65,7 +65,7 @@ export class TodoFakeDb
             'id'       : '561551bd32f1588c814a0ccd',
             'title'    : 'Quis irure cupidatat ad consequat reprehenderit excepteur',
             'notes'    : 'Esse nisi mollit aliquip mollit aute consequat adipisicing. Do excepteur dolore proident cupidatat pariatur irure consequat incididunt.',
-            'startDate': 'Sunday, June 7, 2015 10:49 AM',
+            'startDate': 'Sunday, June 7, 2018 10:49 AM',
             'dueDate'  : 'Monday, January 9, 2017 8:34 AM',
             'completed': false,
             'starred'  : true,
@@ -77,8 +77,8 @@ export class TodoFakeDb
             'id'       : '561551bd0bb4b08ca77038ef',
             'title'    : 'Officia voluptate tempor ut mollit ea cillum',
             'notes'    : 'Deserunt veniam reprehenderit do elit magna ut.',
-            'startDate': 'Saturday, October 18, 2014 4:25 AM',
+            'startDate': 'Saturday, October 18, 2017 4:25 AM',
-            'dueDate'  : 'Sunday, August 21, 2016 10:48 PM',
+            'dueDate'  : 'Sunday, August 21, 2019 10:48 PM',
             'completed': true,
             'starred'  : false,
             'important': false,
@@ -89,8 +89,8 @@ export class TodoFakeDb
             'id'       : '561551bdf84eec913835ebe5',
             'title'    : 'Sit exercitation cupidatat minim est ipsum excepteur',
             'notes'    : '',
-            'startDate': 'Friday, August 8, 2014 5:45 AM',
+            'startDate': 'Friday, August 8, 2017 5:45 AM',
-            'dueDate'  : 'Wednesday, June 15, 2016 1:53 PM',
+            'dueDate'  : 'Wednesday, June 15, 2019 1:53 PM',
             'completed': true,
             'starred'  : false,
             'important': true,
@@ -101,8 +101,8 @@ export class TodoFakeDb
             'id'       : '561551bd2047cc709af0f670',
             'title'    : 'Sunt fugiat officia nisi minim sunt duis',
             'notes'    : 'Eiusmod eiusmod sint aliquip exercitation cillum. Magna nulla officia ex consectetur ea ad excepteur in qui.',
-            'startDate': 'Monday, July 13, 2015 1:55 PM',
+            'startDate': 'Monday, July 13, 2018 1:55 PM',
-            'dueDate'  : 'Thursday, March 3, 2016 2:26 PM',
+            'dueDate'  : 'Thursday, March 3, 2019 2:26 PM',
             'completed': false,
             'starred'  : false,
             'important': false,
@@ -120,8 +120,8 @@ export class TodoFakeDb
             'id'       : '561551bd73d1a627e97005ce',
             'title'    : 'Non cupidatat enim quis aliquip minim laborum',
             'notes'    : 'Qui cillum eiusmod nostrud sunt dolore velit nostrud labore voluptate ad dolore. Eu Lorem anim pariatur aliqua. Ullamco ut dolor velit esse occaecat dolore eu cillum commodo qui. Nulla dolor consequat voluptate magna ut commodo magna consectetur non aute proident.',
-            'startDate': 'Tuesday, November 11, 2014 6:36 PM',
+            'startDate': 'Tuesday, November 11, 2017 6:36 PM',
-            'dueDate'  : 'Tuesday, August 9, 2016 7:18 AM',
+            'dueDate'  : 'Tuesday, August 9, 2019 7:18 AM',
             'completed': false,
             'starred'  : false,
             'important': false,
@@ -132,8 +132,8 @@ export class TodoFakeDb
             'id'       : '561551bd8f7d793ded0a2353',
             'title'    : 'Dolor ex occaecat magna labore laboris qui',
             'notes'    : 'Incididunt qui excepteur eiusmod elit cillum occaecat voluptate cillum nostrud. Dolor ullamco ullamco eiusmod do sunt adipisicing pariatur. In esse esse labore id reprehenderit sint do. Pariatur culpa dolor tempor qui excepteur duis do anim minim ipsum.',
-            'startDate': 'Monday, June 9, 2014 3:15 PM',
+            'startDate': 'Monday, June 9, 2017 3:15 PM',
-            'dueDate'  : 'Wednesday, October 19, 2016 3:38 PM',
+            'dueDate'  : 'Wednesday, October 19, 2019 3:38 PM',
             'completed': false,
             'starred'  : false,
             'important': true,
@@ -144,7 +144,7 @@ export class TodoFakeDb
             'id'       : '561551bdaa586f72d0be02cc',
             'title'    : 'Ex nisi amet id dolore nostrud esse',
             'notes'    : '',
-            'startDate': 'Thursday, January 15, 2015 6:11 PM',
+            'startDate': 'Thursday, January 15, 2018 6:11 PM',
             'dueDate'  : 'Sunday, August 20, 2017 10:02 AM',
             'completed': false,
             'starred'  : true,
@@ -156,7 +156,7 @@ export class TodoFakeDb
             'id'       : '561551bd9f1c2de5b27f537b',
             'title'    : 'In dolor velit labore dolore ex eiusmod',
             'notes'    : '',
-            'startDate': 'Monday, March 10, 2014 12:50 AM',
+            'startDate': 'Monday, March 10, 2017 12:50 AM',
             'dueDate'  : 'Thursday, January 26, 2017 3:10 PM',
             'completed': false,
             'starred'  : false,
@@ -168,7 +168,7 @@ export class TodoFakeDb
             'id'       : '561551bd26e21bb5e85b35cb',
             'title'    : 'Sunt voluptate aliquip exercitation minim magna sit',
             'notes'    : '',
-            'startDate': 'Tuesday, March 24, 2015 10:54 PM',
+            'startDate': 'Tuesday, March 24, 2018 10:54 PM',
             'dueDate'  : 'Wednesday, August 23, 2017 5:35 PM',
             'completed': false,
             'starred'  : false,
@@ -180,7 +180,7 @@ export class TodoFakeDb
             'id'       : '561551bd719860cf0ad2011a',
             'title'    : 'Nisi et ullamco minim ea proident tempor',
             'notes'    : 'Dolor veniam dolor cillum Lorem magna nisi in occaecat nulla dolor ea eiusmod.',
-            'startDate': 'Friday, February 14, 2014 10:03 AM',
+            'startDate': 'Friday, February 14, 2017 10:03 AM',
             'dueDate'  : 'Saturday, July 8, 2017 11:54 PM',
             'completed': false,
             'starred'  : true,
@@ -192,8 +192,8 @@ export class TodoFakeDb
             'id'       : '561551bd49d800c243264a91',
             'title'    : 'Sit ipsum mollit cupidatat adipisicing officia aliquip',
             'notes'    : '',
-            'startDate': 'Wednesday, December 10, 2014 9:25 AM',
+            'startDate': 'Wednesday, December 10, 2017 9:25 AM',
-            'dueDate'  : 'Friday, March 25, 2016 12:29 AM',
+            'dueDate'  : 'Friday, March 25, 2019 12:29 AM',
             'completed': true,
             'starred'  : false,
             'important': false,
@@ -204,8 +204,8 @@ export class TodoFakeDb
             'id'       : '561551bd061990eaf40fb64f',
             'title'    : 'Amet sunt et quis amet commodo quis',
             'notes'    : 'Nulla dolore consequat aliqua sint consequat elit qui occaecat et.',
-            'startDate': 'Saturday, March 1, 2014 3:59 PM',
+            'startDate': 'Saturday, March 1, 2017 3:59 PM',
-            'dueDate'  : 'Saturday, November 7, 2015 2:00 PM',
+            'dueDate'  : 'Saturday, November 7, 2018 2:00 PM',
             'completed': false,
             'starred'  : false,
             'important': true,
@@ -216,7 +216,7 @@ export class TodoFakeDb
             'id'       : '561551be81d05fa94711e7f3',
             'title'    : 'Ut eiusmod ex ea eiusmod culpa incididunt',
             'notes'    : 'Fugiat non incididunt officia ex incididunt occaecat. Voluptate nostrud culpa aliquip mollit incididunt non dolore.',
-            'startDate': 'Monday, February 2, 2015 3:07 PM',
+            'startDate': 'Monday, February 2, 2018 3:07 PM',
             'dueDate'  : 'Saturday, October 14, 2017 6:57 AM',
             'completed': false,
             'starred'  : false,
@@ -228,8 +228,8 @@ export class TodoFakeDb
             'id'       : '561551be05c093a80e0c8d05',
             'title'    : 'Proident reprehenderit laboris pariatur ut et nisi',
             'notes'    : 'Reprehenderit proident ut ad cillum quis velit quis aliqua ut aliquip tempor ullamco.',
-            'startDate': 'Sunday, June 14, 2015 4:40 AM',
+            'startDate': 'Sunday, June 14, 2018 4:40 AM',
-            'dueDate'  : 'Wednesday, February 10, 2016 10:47 AM',
+            'dueDate'  : 'Wednesday, February 10, 2019 10:47 AM',
             'completed': true,
             'starred'  : true,
             'important': true,
@@ -240,8 +240,8 @@ export class TodoFakeDb
             'id'       : '561551be3bb43a5bd431c2fc',
             'title'    : 'Aliqua aliquip aliquip aliquip et exercitation aute',
             'notes'    : 'Adipisicing Lorem tempor ex anim. Labore tempor laboris nostrud dolore voluptate ullamco. Fugiat ex deserunt anim minim esse velit laboris aute ea duis incididunt. Elit irure id Lorem incididunt laborum aliquip consectetur est irure sunt. Ut labore anim nisi aliqua tempor laborum nulla cillum. Duis irure consequat cillum magna cillum eiusmod ut. Et exercitation voluptate quis deserunt elit quis dolor deserunt ex ex esse ex.',
-            'startDate': 'Saturday, May 3, 2014 1:32 AM',
+            'startDate': 'Saturday, May 3, 2017 1:32 AM',
-            'dueDate'  : 'Monday, September 12, 2016 9:16 PM',
+            'dueDate'  : 'Monday, September 12, 2019 9:16 PM',
             'completed': true,
             'starred'  : false,
             'important': true,

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

@@ -4,7 +4,7 @@
 
         <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
              (click)="unfoldSidebarTemporarily()">
-            <mat-icon class="s-32 white-fg">chat</mat-icon>
+            <mat-icon class="s-32 fuse-white-fg">chat</mat-icon>
             <h3 class="ml-12">Team Chat</h3>
         </div>
 

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

@@ -10,7 +10,7 @@ chat-panel {
     z-index: 99;
     overflow: hidden;
 
-    @include media-breakpoint-down('xs') {
+    @include media-breakpoint('xs') {
         max-width: none !important;
         width: 100% !important;
     }
@@ -381,7 +381,7 @@ fuse-sidebar {
         min-width: 360px;
         max-width: 360px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             min-width: 0 !important;
             max-width: 100vw !important;
             width: 100vw !important;

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

@@ -23,25 +23,17 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     sidebarFolded: boolean;
     user: any;
 
-    @ViewChild('replyForm')
+    @ViewChild('replyForm', {static: false})
-    set replyForm(content: NgForm)
+    private _replyForm: NgForm;
-    {
-        this._replyForm = content;
-    }
 
-    @ViewChild('replyInput')
+    @ViewChild('replyInput', {static: false})
-    set replyInput(content: ElementRef)
+    private _replyInput: ElementRef;
-    {
-        this._replyInput = content;
-    }
 
     @ViewChildren(FusePerfectScrollbarDirective)
     private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
 
     // Private
     private _chatViewScrollbar: FusePerfectScrollbarDirective;
-    private _replyForm: NgForm;
-    private _replyInput: ElementRef;
     private _unsubscribeAll: Subject<any>;
 
     /**

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

@@ -1,5 +1,11 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

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

@@ -11,9 +11,9 @@ import { ContentComponent } from 'app/layout/components/content/content.componen
     ],
     imports     : [
         RouterModule,
-        FuseSharedModule,
+        FuseSharedModule
     ],
-    exports: [
+    exports     : [
         ContentComponent
     ]
 })

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

@@ -6,7 +6,7 @@
            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>
+            <span>Purchase FUSE (Angular 8+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
@@ -15,7 +15,6 @@
             <a mat-button routerLink="/documentation/changelog">Changelog</a>
         </div>
 
-
     </div>
 
 </mat-toolbar>

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

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

@@ -36,7 +36,7 @@
     </div>
 
     <div class="navbar-content">
-        <fuse-navigation layout="vertical"></fuse-navigation>
+        <fuse-navigation class="material2" layout="vertical"></fuse-navigation>
     </div>
 
 </div>

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

@@ -61,6 +61,19 @@ fuse-sidebar {
 
                         .navbar-content {
                             padding-top: 0;
+
+                            // Material 2 specific style
+                            .material2 {
+
+                                .nav-item {
+
+                                    .nav-link {
+                                        border-radius: 20px;
+                                        margin: 0 12px;
+                                        padding: 0 12px;
+                                    }
+                                }
+                            }
                         }
                     }
                 }

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

@@ -47,7 +47,7 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
     // -----------------------------------------------------------------------------------------------------
 
     // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
+    @ViewChild(FusePerfectScrollbarDirective, {static: true})
     set directive(theDirective: FusePerfectScrollbarDirective)
     {
         if ( !theDirective )
@@ -75,16 +75,7 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
             )
             .subscribe(() => {
                     setTimeout(() => {
-                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+                        this._fusePerfectScrollbar.scrollToElement('navbar .nav-link.active', -120);
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
                     });
                 }
             );

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -22,6 +22,22 @@ fuse-sidebar {
                             }
                         }
                     }
+
+                    .navbar-content {
+
+                        // Material 2 specific style
+                        .material2 {
+
+                            .nav-item {
+
+                                .nav-link {
+                                    border-radius: 20px;
+                                    margin: 0 12px;
+                                    padding: 0 12px;
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }

src/app/layout/components/navbar/vertical/style-2/style-2.component.ts

@@ -47,7 +47,7 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
     // -----------------------------------------------------------------------------------------------------
 
     // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
+    @ViewChild(FusePerfectScrollbarDirective, {static: true})
     set directive(theDirective: FusePerfectScrollbarDirective)
     {
         if ( !theDirective )
@@ -75,16 +75,7 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
             )
             .subscribe(() => {
                     setTimeout(() => {
-                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+                        this._fusePerfectScrollbar.scrollToElement('navbar .nav-link.active', -120);
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
                     });
                 }
             );

src/app/layout/components/navbar/vertical/style-2/style-2.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

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

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
-import { MatDividerModule, MatListModule, MatSlideToggleModule } from '@angular/material';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

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

@@ -63,7 +63,7 @@
                     class="language-button"
                     [matMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">
-                    <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
+                    <img class="flag mr-8" [src]="'assets/icons/flags/'+selectedLanguage.flag+'.png'">
                     <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
                 </div>
             </button>
@@ -72,7 +72,7 @@
 
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <span fxLayout="row" fxLayoutAlign="start center">
-                        <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
+                        <img class="flag mr-16" [src]="'assets/icons/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </span>
                 </button>

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

@@ -12,8 +12,8 @@ toolbar {
 
     .mat-toolbar {
         position: relative;
-        background: inherit;
+        background: inherit !important;
-        color: inherit;
+        color: inherit !important;
     }
 
     .logo {
@@ -33,7 +33,7 @@ toolbar {
         min-width: 64px;
         height: 64px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
     }
@@ -47,7 +47,7 @@ toolbar {
         height: 64px;
         width: 1px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
     }

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

@@ -45,29 +45,29 @@ export class ToolbarComponent implements OnInit, OnDestroy
         // Set the defaults
         this.userStatusOptions = [
             {
-                'title': 'Online',
+                title: 'Online',
-                'icon' : 'icon-checkbox-marked-circle',
+                icon : 'icon-checkbox-marked-circle',
-                'color': '#4CAF50'
+                color: '#4CAF50'
             },
             {
-                'title': 'Away',
+                title: 'Away',
-                'icon' : 'icon-clock',
+                icon : 'icon-clock',
-                'color': '#FFC107'
+                color: '#FFC107'
             },
             {
-                'title': 'Do not Disturb',
+                title: 'Do not Disturb',
-                'icon' : 'icon-minus-circle',
+                icon : 'icon-minus-circle',
-                'color': '#F44336'
+                color: '#F44336'
             },
             {
-                'title': 'Invisible',
+                title: 'Invisible',
-                'icon' : 'icon-checkbox-blank-circle-outline',
+                icon : 'icon-checkbox-blank-circle-outline',
-                'color': '#BDBDBD'
+                color: '#BDBDBD'
             },
             {
-                'title': 'Offline',
+                title: 'Offline',
-                'icon' : 'icon-checkbox-blank-circle-outline',
+                icon : 'icon-checkbox-blank-circle-outline',
-                'color': '#616161'
+                color: '#616161'
             }
         ];
 
@@ -109,7 +109,7 @@ export class ToolbarComponent implements OnInit, OnDestroy
             });
 
         // Set the selected language from default languages
-        this.selectedLanguage = _.find(this.languages, {'id': this._translateService.currentLang});
+        this.selectedLanguage = _.find(this.languages, {id: this._translateService.currentLang});
     }
 
     /**