Merge changes from 'master' into 'skeleton'

Updated changelog
2025-12-22 23:47:07 +00:00 · 2019-05-30 14:32:51 +03:00 · 2019-05-30 14:27:19 +03:00 · 2019-05-30 13:18:15 +03:00 · 2019-05-30 12:30:10 +03:00 · 2019-05-30 11:48:22 +03:00
182 changed files with 16879 additions and 12075 deletions
--- a/16
+++ b/16
@@ -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
--- a/3
+++ b/3
@@ -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
--- a/README.md
+++ b/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

--- a/angular.json
+++ b/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"
@@ -48,7 +48,14 @@
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
-                            "buildOptimizer": true
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "4mb",
+                                    "maximumError": "6mb"
+                                }
+                            ]
                        },
                        "ec": {
                            "sourceMap": true,
@@ -93,50 +100,41 @@
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
-                        "styles": [
-                            "styles.scss"
-                        ],
-                        "scripts": [],
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
-                        ]
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
-                            "src/tsconfig.app.json",
-                            "src/tsconfig.spec.json"
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
-                }
-            }
-        },
-        "fuse-e2e": {
-            "root": "e2e/",
-            "projectType": "application",
-            "architect": {
+                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "fuse:serve"
-                    }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": [
-                            "**/node_modules/**"
-                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "fuse:serve:production"
+                        }
                    }
                }
            }
--- a/16
+++ b/16
@@ -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'.
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@@ -1,14 +1,14 @@
-import { Fuse2Page } from './app.po';
+import { FusePage } from './app.po';

-describe('Fuse2 App', () => {
-    let page: Fuse2Page;
+describe('Fuse App', () => {
+    let page: FusePage;

    beforeEach(() => {
-        page = new Fuse2Page();
+        page = new FusePage();
    });

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

    trigger('fadeInOut', [
-        state('0', style({
-            display: 'none',
+        state('0, void', style({
            opacity: 0
        })),
-        state('1', style({
-            display: 'block',
+        state('1, *', style({
            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',
-            display: 'none'
+            height: '0px'
        })),
        state('1', style({
-            height : '*',
-            display: 'block'
+            height: '*'
        })),
        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('* => *', [
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
+++ b/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',
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
+++ b/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';

--- a/src/@fuse/components/demo/demo-content/demo-content.component.html
+++ b/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>
--- a/src/@fuse/components/demo/demo.module.ts
+++ b/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';
--- a/src/@fuse/components/highlight/highlight.component.ts
+++ b/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
--- a/src/@fuse/components/material-color-picker/material-color-picker.module.ts
+++ b/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';

--- a/src/@fuse/components/navigation/navigation.component.ts
+++ b/src/@fuse/components/navigation/navigation.component.ts
@@ -1,14 +1,15 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';

@Component({
-    selector     : 'fuse-navigation',
-    templateUrl  : './navigation.component.html',
-    styleUrls    : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    selector       : 'fuse-navigation',
+    templateUrl    : './navigation.component.html',
+    styleUrls      : ['./navigation.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseNavigationComponent implements OnInit
 {
@@ -22,9 +23,12 @@ export class FuseNavigationComponent implements OnInit
    private _unsubscribeAll: Subject<any>;

    /**
-     * Constructor
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
     */
    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService
    )
    {
@@ -48,7 +52,24 @@ export class FuseNavigationComponent implements OnInit
        this._fuseNavigationService.onNavigationChanged
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(() => {
+
+                // Load the navigation
                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
            });
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
    }
 }
--- a/src/@fuse/components/navigation/navigation.module.ts
+++ b/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';

--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/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);
    }
 }
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts
+++ b/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();
    }

--- a/src/@fuse/components/navigation/vertical/group/group.component.ts
+++ b/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();
    }

 }
--- a/src/@fuse/components/navigation/vertical/item/item.component.ts
+++ b/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();
    }
 }
--- a/src/@fuse/components/progress-bar/progress-bar.module.ts
+++ b/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';

--- a/src/@fuse/components/search-bar/search-bar.component.scss
+++ b/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;
                }
--- a/src/@fuse/components/search-bar/search-bar.module.ts
+++ b/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';

--- a/src/@fuse/components/shortcuts/shortcuts.component.html
+++ b/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">

--- a/src/@fuse/components/shortcuts/shortcuts.component.scss
+++ b/src/@fuse/components/shortcuts/shortcuts.component.scss
@@ -2,7 +2,7 @@

 :host {

-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {

        #fuse-shortcuts {

--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -1,5 +1,5 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+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 ( cookieExists )
+        if ( this._cookieService.check('FUSE2.shortcuts') )
        {
            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',
-                    'type' : 'item',
-                    'icon' : 'today',
-                    'url'  : '/apps/calendar'
+                    title: 'Calendar',
+                    type : 'item',
+                    icon : 'today',
+                    url  : '/apps/calendar'
                },
                {
-                    'title': 'Mail',
-                    'type' : 'item',
-                    'icon' : 'email',
-                    'url'  : '/apps/mail'
+                    title: 'Mail',
+                    type : 'item',
+                    icon : 'email',
+                    url  : '/apps/mail'
                },
                {
-                    'title': 'Contacts',
-                    'type' : 'item',
-                    'icon' : 'account_box',
-                    'url'  : '/apps/contacts'
+                    title: 'Contacts',
+                    type : 'item',
+                    icon : 'account_box',
+                    url  : '/apps/contacts'
                },
                {
-                    'title': 'To-Do',
-                    'type' : 'item',
-                    'icon' : 'check_box',
-                    'url'  : '/apps/todo'
+                    title: 'To-Do',
+                    type : 'item',
+                    icon : 'check_box',
+                    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();
                }
--- a/src/@fuse/components/shortcuts/shortcuts.module.ts
+++ b/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';
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/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;
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/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');
    }

--- a/src/@fuse/components/theme-options/theme-options.component.scss
+++ b/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;

--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/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',
-            'title'   : 'Custom Function',
-            'type'    : 'group',
-            'icon'    : 'settings',
-            'children': [
+            id      : 'custom-function',
+            title   : 'Custom Function',
+            type    : 'group',
+            icon    : 'settings',
+            children: [
                {
-                    'id'      : 'customize',
-                    'title'   : 'Customize',
-                    'type'    : 'item',
-                    'icon'    : 'settings',
-                    'function': () => {
+                    id      : 'customize',
+                    title   : 'Customize',
+                    type    : 'item',
+                    icon    : 'settings',
+                    function: () => {
                        this.toggleSidebarOpen('themeOptionsPanel');
                    }
                }
--- a/src/@fuse/components/theme-options/theme-options.module.ts
+++ b/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 {
-    MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+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';
--- a/src/@fuse/components/widget/widget.component.scss
+++ b/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;
--- a/src/@fuse/components/widget/widget.theme.scss
+++ b/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);
        }
    }
 }
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
+++ b/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 { ObservableMedia } from '@angular/flex-layout';
+import { MatSidenav } from '@angular/material/sidenav';
+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';
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
+++ b/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'
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/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 { filter, takeUntil } from 'rxjs/operators';
+import { fromEvent, Subject } from 'rxjs';
+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;
-
-        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
+        const left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth;
+        this.animateScrolling('scrollLeft', left - (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 {number} value
-     * @param {number} speed
+     * @param target
+     * @param value
+     * @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;
-
-                        // PS has weird event sending order, this is a workaround for that
-                        this.update();
-
-                        this.update();
+                        this.animateScrolling(target, value, 0);
                    }
                    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);
                    }
                }
            };
--- a/src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces.ts
+++ b/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;
+    }
+}
--- a/src/@fuse/scss/core.scss
+++ b/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
--- a/src/@fuse/scss/fuse.scss
+++ b/src/@fuse/scss/fuse.scss
@@ -2,4 +2,4 @@
@import '~@angular/material/theming';

 // Breakpoint mixins
-@import "mixins/breakpoints";
+@import "partials/breakpoints";
--- a/src/@fuse/scss/mixins/_breakpoints.scss
+++ b/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;
-    }
-}
--- a/src/@fuse/scss/partials/_angular-material-fix.scss
+++ b/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 {
--- a/src/@fuse/scss/partials/_breakpoints.scss
+++ b/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
+        }
+    }
+}
--- a/src/@fuse/scss/partials/_cards.scss
+++ b/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;
-    @include mat-elevation(2);
+    border-radius: 8px;
+    border: 1px solid;

    &.variable-width {
        min-width: 0;
--- a/src/@fuse/scss/partials/_colors.scss
+++ b/src/@fuse/scss/partials/_colors.scss
@@ -47,25 +47,25 @@
 // @ Material colors map
 // -----------------------------------------------------------------------------------------------------
 $matPalettes: (
-    red: $mat-red,
-    pink: $mat-pink,
-    purple: $mat-purple,
-    deep-purple: $mat-deep-purple,
-    indigo: $mat-indigo,
-    blue: $mat-blue,
-    light-blue: $mat-light-blue,
-    cyan: $mat-cyan,
-    teal: $mat-teal,
-    green: $mat-green,
-    light-green: $mat-light-green,
-    lime: $mat-lime,
-    yellow: $mat-yellow,
-    amber: $mat-amber,
-    orange: $mat-orange,
-    deep-orange: $mat-deep-orange,
-    brown: $mat-brown,
-    grey: $mat-grey,
-    blue-grey: $mat-blue-grey
+    'red': $mat-red,
+    'pink': $mat-pink,
+    'purple': $mat-purple,
+    'deep-purple': $mat-deep-purple,
+    'indigo': $mat-indigo,
+    'blue': $mat-blue,
+    'light-blue': $mat-light-blue,
+    'cyan': $mat-cyan,
+    'teal': $mat-teal,
+    'green': $mat-green,
+    'light-green': $mat-light-green,
+    'lime': $mat-lime,
+    'yellow': $mat-yellow,
+    'amber': $mat-amber,
+    'orange': $mat-orange,
+    'deep-orange': $mat-deep-orange,
+    'brown': $mat-brown,
+    'grey': $mat-grey,
+    'blue-grey': $mat-blue-grey
 );

 // Material color hues list
--- a/src/@fuse/scss/partials/_general.scss
+++ b/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;
+}
--- a/src/@fuse/scss/partials/_global.scss
+++ b/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);
-    }
-}
--- a/src/@fuse/scss/partials/_helpers.scss
+++ b/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) {

--- a/src/@fuse/scss/partials/_icons.scss
+++ b/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 {

--- a/src/@fuse/scss/partials/_material.scss
+++ b/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: #FFFFFF;
+        color: #FFC107;

        &: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 {
--- a/src/@fuse/scss/partials/_navigation.scss
+++ b/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 {
+    // Material 2 style
+    &.material2,
+    .material2 & {

        .nav-subheader {
-            border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-            &:first-child {
-                border-top: none;
-            }
+            height: 40px;
        }

+        .nav-group {
+
+            > .group-title {
+                height: 40px;
+            }
+        }
        .nav-item {

            .nav-link {
                height: 40px;
-                padding: 0 16px;
-                margin: 4px 8px;
-                border-radius: 4px;
+                padding: 0 12px 0 24px;
+                border-radius: 0 20px 20px 0;
+                margin-right: 16px;
            }
        }
    }
--- a/src/@fuse/scss/partials/_page-layouts.scss
+++ b/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 {
--- a/src/@fuse/scss/partials/_print.scss
+++ b/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;
        }
--- a/src/@fuse/scss/partials/_reset.scss
+++ b/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;
-}
--- a/src/@fuse/scss/partials/_scrollbars.scss
+++ b/src/@fuse/scss/partials/_scrollbars.scss
@@ -12,12 +12,12 @@ body:not(.is-mobile) {

    ::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.37);
+        border-radius: 12px;
    }

    ::-webkit-scrollbar-thumb:active {
-        box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
-        border-radius: 24px;
+        box-shadow: inset 0 0 0 12px rgba(0, 0, 0, 0.54);
+        border-radius: 12px;
    }
 }
--- a/src/@fuse/scss/partials/_toolbar.scss
+++ b/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;
-    }
-}
--- a/src/@fuse/scss/partials/_typography.scss
+++ b/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);
    }
-}
+}
--- a/src/@fuse/scss/partials/plugins/_ngx-datatable.scss
+++ b/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";
-}
+}
--- a/src/@fuse/services/config.service.ts
+++ b/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) )
                {
--- a/src/@fuse/services/match-media.service.ts
+++ b/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()
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -23,6 +23,17 @@
        opacity: .90;
        z-index: 998;

+        &.right-side-panel {
+
+            @include media-breakpoint('gt-md') {
+                right: 70px;
+            }
+        }
+
+        &.side-panel-hidden {
+            right: 0 !important;
+        }
+
        mat-icon {
            animation: rotating 3s linear infinite;
        }
@@ -37,4 +48,4 @@
        min-width: 360px;
        max-width: 360px;
    }
-}
+}
--- a/src/app/app.component.ts
+++ b/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
--- a/src/app/app.module.ts
+++ b/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 { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';

--- a/src/app/app.theme.scss
+++ b/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
@@ -223,4 +227,4 @@ body.theme-pink-dark {
    );

    @include fuse-color-classes($palettes);
-}
+}
--- a/src/app/layout/components/content/content.module.ts
+++ b/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
    ]
 })
--- a/src/app/layout/components/footer/footer.component.html
+++ b/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>
--- a/src/app/layout/components/footer/footer.module.ts
+++ b/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';

--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts
+++ b/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';
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
+++ b/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>
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/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;
+                                    }
+                                }
+                            }
                        }
                    }
                }
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
+++ b/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');
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
+                        this._fusePerfectScrollbar.scrollToElement('navbar .nav-link.active', -120);
                    });
                }
            );
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.module.ts
+++ b/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';
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
+++ b/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;
+                                }
+                            }
+                        }
+                    }
                }
            }
        }
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
+++ b/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');
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
+                        this._fusePerfectScrollbar.scrollToElement('navbar .nav-link.active', -120);
                    });
                }
            );
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.module.ts
+++ b/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';
--- a/src/app/layout/components/quick-panel/quick-panel.module.ts
+++ b/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';

--- a/src/app/layout/components/toolbar/toolbar.component.html
+++ b/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>
--- a/src/app/layout/components/toolbar/toolbar.component.scss
+++ b/src/app/layout/components/toolbar/toolbar.component.scss
@@ -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;
        }
    }
--- a/src/app/layout/components/toolbar/toolbar.component.ts
+++ b/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',
-                'icon' : 'icon-checkbox-marked-circle',
-                'color': '#4CAF50'
+                title: 'Online',
+                icon : 'icon-checkbox-marked-circle',
+                color: '#4CAF50'
            },
            {
-                'title': 'Away',
-                'icon' : 'icon-clock',
-                'color': '#FFC107'
+                title: 'Away',
+                icon : 'icon-clock',
+                color: '#FFC107'
            },
            {
-                'title': 'Do not Disturb',
-                'icon' : 'icon-minus-circle',
-                'color': '#F44336'
+                title: 'Do not Disturb',
+                icon : 'icon-minus-circle',
+                color: '#F44336'
            },
            {
-                'title': 'Invisible',
-                'icon' : 'icon-checkbox-blank-circle-outline',
-                'color': '#BDBDBD'
+                title: 'Invisible',
+                icon : 'icon-checkbox-blank-circle-outline',
+                color: '#BDBDBD'
            },
            {
-                'title': 'Offline',
-                'icon' : 'icon-checkbox-blank-circle-outline',
-                'color': '#616161'
+                title: 'Offline',
+                icon : 'icon-checkbox-blank-circle-outline',
+                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});
    }

    /**
--- a/src/app/layout/components/toolbar/toolbar.module.ts
+++ b/src/app/layout/components/toolbar/toolbar.module.ts
@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';

 import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
--- a/src/app/layout/components/toolbar/toolbar.theme.scss
+++ b/src/app/layout/components/toolbar/toolbar.theme.scss
@@ -2,7 +2,10 @@

    $foreground: map-get($theme, foreground);

-    .toolbar-separator {
-        background: map-get($foreground, divider);
+    toolbar {
+
+        .toolbar-separator {
+            background: map-get($foreground, divider);
+        }
    }
 }
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -78,7 +78,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
--- a/src/app/layout/horizontal/layout-1/layout-1.module.ts
+++ b/src/app/layout/horizontal/layout-1/layout-1.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatSidenavModule } from '@angular/material';
+import { MatSidenavModule } from '@angular/material/sidenav';

 import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
@@ -129,4 +129,4 @@
        <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
    </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
@@ -129,4 +129,4 @@
        <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
    </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -76,7 +76,7 @@
 <!-- / QUICK PANEL -->

 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->

 <!-- TOOLBAR -->
@@ -115,4 +115,4 @@
        <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
    </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->
--- a/src/assets/icons/flags/tr.png
+++ b/src/assets/icons/flags/tr.png
--- a/src/assets/icons/flags/us.png
+++ b/src/assets/icons/flags/us.png
--- a/src/assets/icons/material-icons/outline/fonts/material-outline-icons.svg
+++ b/src/assets/icons/material-icons/outline/fonts/material-outline-icons.svg
--- a/src/assets/icons/material-icons/outline/fonts/material-outline-icons.ttf
+++ b/src/assets/icons/material-icons/outline/fonts/material-outline-icons.ttf
--- a/src/assets/icons/material-icons/outline/fonts/material-outline-icons.woff
+++ b/src/assets/icons/material-icons/outline/fonts/material-outline-icons.woff
--- a/src/assets/icons/material-icons/outline/style.css
+++ b/src/assets/icons/material-icons/outline/style.css
--- a/src/assets/images/backgrounds/header-bg.png
+++ b/src/assets/images/backgrounds/header-bg.png
--- a/src/assets/images/backgrounds/autumn.jpg
+++ b/src/assets/images/backgrounds/autumn.jpg
--- a/src/assets/images/backgrounds/spring.jpg
+++ b/src/assets/images/backgrounds/spring.jpg
--- a/src/assets/images/backgrounds/summer.jpg
+++ b/src/assets/images/backgrounds/summer.jpg
--- a/src/assets/images/backgrounds/winter.jpg
+++ b/src/assets/images/backgrounds/winter.jpg
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sercan	455e7f6f47	Merge changes from 'master' into 'skeleton'	2019-05-30 14:32:51 +03:00
sercan	2f2b302cb6	Updated changelog	2019-05-30 14:27:19 +03:00
sercan	8b358cc6ff	Updated changelog Updated web-animations-js package to make it compatible with Angular 8	2019-05-30 13:18:15 +03:00
sercan	8bd1e58db5	Small adjustments	2019-05-30 12:30:10 +03:00
sercan	9db5f0b04a	Updated existing Angular Material examples	2019-05-30 11:48:22 +03:00
sercan	226f3fb440	Updated existing Angular Material examples	2019-05-30 11:44:28 +03:00
sercan	bb3764aaff	Added new Angular Material examples	2019-05-30 11:37:35 +03:00
sercan	7ec117202d	Updated existing Angular Material examples	2019-05-30 11:09:43 +03:00
sercan	f1e1ddc236	Updated Angular & Angular Components to 8.0.0 Updated various other libraries to their latest versions Updated various project files for better Angular 8 support	2019-05-30 10:47:34 +03:00
sercan	bc2fc44bcf	(Animations) Added *ngIf support to the fadeInOut animation	2019-03-20 13:32:46 +03:00
sercan	4ce34b2234	Fixed: Tabbed page widths are not spanning to entire layout card	2019-02-19 09:56:05 +03:00
sercan	838132ce68	Merge 'master' into skeleton	2019-01-17 07:31:40 +03:00
sercan	8c555a1fb5	Updated the changelog	2019-01-17 07:30:26 +03:00
sercan	3827b10fc5	Fixed: Flex layout ObservableMedia is depreciated	2019-01-17 07:29:39 +03:00
sercan	6f3ce4059d	Updated Angular to 7.2.1 Updated various other packages	2019-01-17 07:29:07 +03:00
sercan	8dbd71f122	Updated Angular to 7.2.0 Updated Angular Material to 7.2.1 Updated AngularCLI related files (Calendar) Small style tweak	2019-01-09 13:55:58 +03:00
sercan	5870131ab2	(Layouts) Close the html comment properly	2019-01-02 10:34:49 +03:00
sercan	c764089061	(Layouts) Close the html comment properly	2019-01-02 10:34:02 +03:00
sercan	a7cf8c236b	Changelog updates	2019-01-02 10:33:22 +03:00
sercan	79d2ed8cfe	Fixed: ngx datatable sort arrow icons are not working correctly and they are not aligned Small comment tweak	2019-01-02 10:05:21 +03:00
sercan	84696aed79	Updated packages and version number	2019-01-02 10:04:31 +03:00
sercan	44550ecdd8	Import cleanup	2018-11-27 11:11:07 +03:00
sercan	68bd4436f4	Fixed: 'draggable' cannot be set to false. Closes #100	2018-11-27 10:47:55 +03:00
sercan	6db86a6b25	Use 'ResolveEnd' to reset the config. Closes #101	2018-11-27 10:44:11 +03:00
sercan	9523e3724a	Merge 'master' into 'skeleton'	2018-11-16 10:31:26 +03:00
sercan	8e4e4bf401	Updated the changelog navigation item badge	2018-11-16 10:29:35 +03:00
sercan	b184c839da	Updated Angular, Angular Material and various other packages Upadte the changelog Increased the Fuse version	2018-11-16 10:21:37 +03:00
sercan	017ce59254	(FuseNavigation) Trigger observables on item add (Docs) Fixed Material Color Picker input for the documentation	2018-11-16 09:53:31 +03:00
sercan	842cb37fcb	Fixed: Wrong link to the fuse-config service docs page Removed no-redundant-jsdoc rule from the tslint	2018-10-24 11:20:05 +03:00
sercan	3c45bd49e4	Merge branch 'master' into skeleton	2018-10-19 10:45:10 +03:00
sercan	430fe0c0c1	Fixed: Forgot to change the font families	2018-10-19 10:43:48 +03:00
sercan	1850fd7eb1	Merge branch 'master' into skeleton	2018-10-19 10:19:57 +03:00
sercan	8118f94b50	Small tweaks	2018-10-19 10:19:39 +03:00
sercan	bc2b4aefac	Merge 'master' into skeleton	2018-10-19 09:04:15 +03:00
sercan	83ba318fb7	Updated the main config files	2018-10-19 08:59:46 +03:00
sercan	1dd59db09f	Added images for Angular Material examples	2018-10-19 08:59:35 +03:00
sercan	60ab983730	Updated Angular Material elements Updated the changelog	2018-10-19 00:31:01 +03:00
sercan	6fadc29e4c	Updated Angular, Angular Material and various other libraries	2018-10-19 00:30:39 +03:00
sercan	4da339cef1	(FusePerfectScrollbar) Unbind 'keydown' events of the PerfectScrollbar instances. This fixes the Angular Material inputs' high CPU usage.. The real problem is in the Angular Material library but we cannot do anything about it so we have removed the keyboard events of the PerfectScrollbar which resolves this years long issue.	2018-10-12 23:59:03 +03:00
sercan	cbd1c3e21c	(Mail) Small tweaks (Mail-ngrx) Small tweaks (FAQ) Small tweaks (KnowledgeBase) Small tweaks	2018-10-11 20:03:57 +03:00
sercan	e67887f379	(Mail-ngrx) Fixed a small issue	2018-10-11 19:28:06 +03:00
sercan	eeed00b30e	(E-Commerce) Matched search fields styles to the rest of the apps (Contacts) Search field doesn't span to the full width of its container	2018-10-11 19:27:38 +03:00
sercan	06c8903f91	(Navigation) Added missing icon for UI/Cards menu	2018-10-10 12:25:01 +03:00
sercan	23b943a765	Modernizations	2018-10-10 12:20:12 +03:00
sercan	8961d75241	(FuseNavigation) Merge the subscriptions (FuseNavigationDocs) Updated the docs	2018-10-08 19:01:49 +03:00
sercan	ab7bd882a0	(FuseNavigation) Moved the changeDetection strategy to OnPush to improve the performance and allow for huge amounts of navigation items (FuseNavigation) Use service to update the menu items (FuseNavigationDocs) Updated the docs	2018-10-08 12:36:15 +03:00
sercan	63bd95ea1e	(Coming Soon) Simplified the form error messages	2018-10-04 12:21:46 +03:00
sercan	98297ea787	Fuse Modernization continues...	2018-10-04 12:14:54 +03:00
sercan	5251a6305f	Used 'Muli' as the primary font Increased the font-weight 500s to 600s Small tweaks	2018-09-24 11:18:07 +03:00
sercan	790549a92d	Update Angular, Angular Material and various other packages Set the Fuse version to 7.0.0	2018-09-21 12:21:58 +03:00
sercan	0643d8c348	(Global) Use 'Nunito' as a primary font (Global) Use outline Material Icons (Global) Removed some unnecessary styles and moved some of them to the related places	2018-09-21 12:21:04 +03:00
sercan	c2d5a5a2a5	(Scrumboard) Fixed: Undefined matDialogRef (Calendar) Fixed: Undefined matDialogRef (Calendar) Updated angular-calendar	2018-09-21 11:38:11 +03:00
Sercan Yemen	94275c507f	Fixed: Extra padding on print layout because of the sidebar	2018-09-03 11:34:02 +03:00
Sercan Yemen	31b4c300f0	Updated the changelog navigation item tag	2018-08-30 11:20:04 +03:00