Angular 10 compatibility update

Update package.json

.browserslistrc

@@ -0,0 +1,12 @@
+# 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
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

README.md

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

angular.json

@@ -4,24 +4,25 @@
     "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",
+                        "aot": true,
+                        "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",
@@ -31,7 +32,19 @@
                             "src/styles.scss"
                         ],
                         "scripts": [],
-                        "showCircularDependencies": false
+                        "showCircularDependencies": false,
+                        "allowedCommonJsDependencies": [
+                            "lodash",
+                            "@swimlane/dragula",
+                            "chart.js",
+                            "angular-calendar",
+                            "calendar-utils/date-adapters/date-fns",
+                            "contra/emitter",
+                            "crossvent",
+                            "dom-plane",
+                            "dom-set",
+                            "@mattlewis92/dom-autoscroller"
+                        ]
                     },
                     "configurations": {
                         "production": {
@@ -53,16 +66,32 @@
                             "budgets": [
                                 {
                                     "type": "initial",
-                                    "maximumWarning": "2mb",
-                                    "maximumError": "5mb"
+                                    "maximumWarning": "4mb",
+                                    "maximumError": "6mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
                                 }
                             ]
                         },
                         "ec": {
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
                             "sourceMap": true,
                             "extractCss": true
                         },
                         "hmr": {
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
                             "fileReplacements": [
                                 {
                                     "replace": "src/environments/environment.ts",
@@ -101,24 +130,25 @@
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
-                        "styles": [
-                            "src/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/**",
@@ -126,14 +156,7 @@
                             "**/src/assets/angular-material-examples/**/*"
                         ]
                     }
-                }
-            }
-        },
-        "fuse-e2e": {
-            "root": "e2e/",
-            "projectType": "application",
-            "prefix": "",
-            "architect": {
+                },
                 "e2e": {
                     "builder": "@angular-devkit/build-angular:protractor",
                     "options": {
@@ -145,17 +168,6 @@
                             "devServerTarget": "fuse:serve:production"
                         }
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
-                        ]
-                    }
                 }
             }
         }

e2e/protractor.conf.js

@@ -1,8 +1,12 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const {SpecReporter} = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
     allScriptsTimeout: 11000,
     specs            : [
@@ -24,8 +28,8 @@ exports.config = {
     onPrepare()
     {
         require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.e2e.json')
+            project: require('path').join(__dirname, './tsconfig.json')
         });
         jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
     }
-};
+};

e2e/src/app.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { FusePage } from './app.po';
+import { browser, logging } from 'protractor';
 
 describe('Fuse App', () => {
     let page: FusePage;
@@ -11,4 +12,12 @@ describe('Fuse App', () => {
         page.navigateTo();
         expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
     });
+
+    afterEach(async () => {
+        // Assert that there are no errors emitted from the browser
+        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+        expect(logs).not.toContain(jasmine.objectContaining({
+            level: logging.Level.SEVERE
+        } as logging.Entry));
+    });
 });

e2e/src/app.po.ts

@@ -1,11 +1,14 @@
 import { browser, by, element } from 'protractor';
 
-export class FusePage {
-    navigateTo(): any {
-        return browser.get('/');
+export class FusePage
+{
+    navigateTo(): Promise<any>
+    {
+        return browser.get('/') as Promise<any>;
     }
 
-    getParagraphText(): any {
-        return element(by.css('app #main')).getText();
+    getParagraphText(): Promise<string>
+    {
+        return element(by.css('app #main')).getText() as Promise<string>;
     }
 }

e2e/tsconfig.e2e.json

@@ -1,13 +1,13 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
+    "extends": "../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
+}

e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfig.base.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/e2e",
+        "module": "commonjs",
+        "target": "es2018",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
+}

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
     });
-};
+};

package.json

@@ -1,90 +1,84 @@
 {
-  "name": "fuse",
-  "version": "7.0.1",
-  "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": "7.0.4",
-    "@angular/cdk": "7.0.4",
-    "@angular/common": "7.0.4",
-    "@angular/compiler": "7.0.4",
-    "@angular/core": "7.0.4",
-    "@angular/flex-layout": "7.0.0-beta.19",
-    "@angular/forms": "7.0.4",
-    "@angular/http": "7.0.4",
-    "@angular/material": "7.0.4",
-    "@angular/material-moment-adapter": "7.0.4",
-    "@angular/platform-browser": "7.0.4",
-    "@angular/platform-browser-dynamic": "7.0.4",
-    "@angular/router": "7.0.4",
-    "@ngrx/effects": "6.1.2",
-    "@ngrx/router-store": "6.1.2",
-    "@ngrx/store": "6.1.2",
-    "@ngrx/store-devtools": "6.1.2",
-    "@ngx-translate/core": "11.0.1",
-    "@swimlane/dragula": "3.7.3",
-    "@swimlane/ngx-charts": "10.0.0",
-    "@swimlane/ngx-datatable": "14.0.0",
-    "@swimlane/ngx-dnd": "6.0.0",
-    "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.26.4",
-    "angular-in-memory-web-api": "0.7.0",
-    "chart.js": "2.7.3",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.7",
-    "d3": "5.7.0",
-    "date-fns": "1.29.0",
-    "hammerjs": "2.0.8",
-    "lodash": "4.17.11",
-    "moment": "2.22.2",
-    "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "7.0.2",
-    "ngx-cookie-service": "2.0.0",
-    "perfect-scrollbar": "1.4.0",
-    "prismjs": "1.15.0",
-    "rxjs": "6.3.3",
-    "rxjs-compat": "6.3.3",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.26"
-  },
-  "devDependencies": {
-    "@angular/cli": "7.0.6",
-    "@angular/compiler-cli": "7.0.4",
-    "@angular/language-service": "7.0.4",
-    "@angular-devkit/build-angular": "0.10.6",
-    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.11",
-    "@types/jasminewd2": "2.0.6",
-    "@types/lodash": "4.14.118",
-    "@types/node": "8.9.5",
-    "codelyzer": "4.5.0",
-    "jasmine-core": "2.99.1",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "3.0.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.4",
-    "karma-jasmine": "1.1.2",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.4.1",
-    "ts-node": "7.0.1",
-    "tslint": "5.11.0",
-    "typescript": "3.1.6",
-    "webpack-bundle-analyzer": "3.0.3"
-  }
+    "name": "fuse",
+    "version": "10.0.0",
+    "license": "https://themeforest.net/licenses/terms/regular",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --open",
+        "start:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --open",
+        "build": "ng build",
+        "build:prod": "ng build --prod",
+        "build:prod:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e",
+        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+    },
+    "private": true,
+    "dependencies": {
+        "@agm/core": "1.1.0",
+        "@angular/animations": "10.0.5",
+        "@angular/cdk": "10.1.0",
+        "@angular/common": "10.0.5",
+        "@angular/compiler": "10.0.5",
+        "@angular/core": "10.0.5",
+        "@angular/flex-layout": "10.0.0-beta.32",
+        "@angular/forms": "10.0.5",
+        "@angular/material": "10.1.0",
+        "@angular/material-moment-adapter": "10.1.0",
+        "@angular/platform-browser": "10.0.5",
+        "@angular/platform-browser-dynamic": "10.0.5",
+        "@angular/router": "10.0.5",
+        "@ngrx/effects": "8.6.0",
+        "@ngrx/router-store": "8.6.0",
+        "@ngrx/store": "8.6.0",
+        "@ngrx/store-devtools": "8.6.0",
+        "@ngx-translate/core": "13.0.0",
+        "@swimlane/dragula": "3.8.0",
+        "@swimlane/ngx-charts": "14.0.0",
+        "@swimlane/ngx-datatable": "17.1.0",
+        "@swimlane/ngx-dnd": "8.1.2",
+        "@types/prismjs": "1.16.1",
+        "angular-calendar": "0.28.16",
+        "angular-in-memory-web-api": "0.11.0",
+        "chart.js": "2.9.3",
+        "classlist.js": "1.1.20150312",
+        "d3": "5.16.0",
+        "date-fns": "2.15.0",
+        "lodash": "4.17.19",
+        "moment": "2.27.0",
+        "ng2-charts": "2.3.2",
+        "ngrx-store-freeze": "0.2.4",
+        "ngx-color-picker": "9.1.0",
+        "ngx-cookie-service": "3.1.2",
+        "perfect-scrollbar": "1.5.0",
+        "prismjs": "1.20.0",
+        "rxjs": "6.6.0",
+        "tslib": "2.0.0",
+        "web-animations-js": "2.3.2",
+        "zone.js": "0.10.3"
+    },
+    "devDependencies": {
+        "@angular/cli": "10.0.4",
+        "@angular/compiler-cli": "10.0.5",
+        "@angular/language-service": "10.0.5",
+        "@angular-devkit/build-angular": "0.1000.4",
+        "@types/jasmine": "3.5.2",
+        "@types/jasminewd2": "2.0.8",
+        "@types/lodash": "4.14.149",
+        "@types/node": "12.12.6",
+        "codelyzer": "6.0.0",
+        "jasmine-core": "3.5.0",
+        "jasmine-spec-reporter": "5.0.2",
+        "karma": "5.1.0",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-coverage-istanbul-reporter": "3.0.3",
+        "karma-jasmine": "3.3.1",
+        "karma-jasmine-html-reporter": "1.5.4",
+        "protractor": "7.0.0",
+        "ts-node": "8.3.0",
+        "tslint": "6.1.2",
+        "typescript": "3.9.7",
+        "webpack-bundle-analyzer": "3.8.0"
+    }
 }

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('* => *', [

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

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

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

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

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

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

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

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

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

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

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

@@ -66,4 +66,4 @@
 
     </div>
 
-</ng-container>
+</ng-container>

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

@@ -45,4 +45,4 @@
         </span>
     </ng-template>
 
-</ng-container>
+</ng-container>

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

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

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

@@ -203,23 +203,30 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
      */
     isChildrenOf(parent, item): boolean
     {
-        if ( !parent.children )
+        const children = parent.children;
+
+        if ( !children )
         {
             return false;
         }
 
-        if ( parent.children.indexOf(item) !== -1 )
+        if ( children.indexOf(item) > -1 )
         {
             return true;
         }
 
-        for ( const children of parent.children )
+        for ( const child of children )
         {
-            if ( children.children )
+            if ( child.children )
             {
-                return this.isChildrenOf(children, item);
+                if ( this.isChildrenOf(child, item) )
+                {
+                    return true;
+                }
             }
         }
+
+        return false;
     }
 
     /**
@@ -232,22 +239,24 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
      */
     isUrlInChildren(parent, url): boolean
     {
-        if ( !parent.children )
+        const children = parent.children;
+
+        if ( !children )
         {
             return false;
         }
 
-        for ( let i = 0; i < parent.children.length; i++ )
+        for ( const child of children )
         {
-            if ( parent.children[i].children )
+            if ( child.children )
             {
-                if ( this.isUrlInChildren(parent.children[i], url) )
+                if ( this.isUrlInChildren(child, url) )
                 {
                     return true;
                 }
             }
 
-            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
+            if ( child.url === url || url.includes(child.url) )
             {
                 return true;
             }

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

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

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

@@ -45,4 +45,4 @@
         </span>
     </ng-template>
 
-</ng-container>
+</ng-container>

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

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

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

@@ -74,7 +74,7 @@
                 }
 
                 .fuse-search-bar-collapser {
-                    display: flex;
+                    display: inline-block;
                 }
             }
         }

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

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

src/@fuse/components/shortcuts/shortcuts.component.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[];
@@ -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
     )
     {
@@ -79,37 +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();
                 }

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

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

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

@@ -2,7 +2,7 @@ import {
     ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
 } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { ObservableMedia } from '@angular/flex-layout';
+import { 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
     )
     {
@@ -319,7 +319,7 @@ 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 )

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

@@ -131,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');
                     }
                 }

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

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

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

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

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

@@ -1,23 +1,24 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { Subject } from 'rxjs';
-import { 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 | 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
      */
@@ -292,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
      *
@@ -344,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);
     }
 
     /**
@@ -357,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] )
         {
@@ -389,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
@@ -399,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);
                     }
                 }
             };

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

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

src/@fuse/fuse.module.ts

@@ -13,7 +13,7 @@ export class FuseModule
         }
     }
 
-    static forRoot(config): ModuleWithProviders
+    static forRoot(config): ModuleWithProviders<FuseModule>
     {
         return {
             ngModule : FuseModule,

src/@fuse/scss/core.scss

@@ -2,7 +2,7 @@
 // to the core Fuse and Angular Material mixins
 
 // ngx-datatable
-@import '~@swimlane/ngx-datatable/release/themes/material';
+@import '~@swimlane/ngx-datatable/themes/material';
 
 // Perfect scrollbar
 @import '~perfect-scrollbar/css/perfect-scrollbar';

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

@@ -48,11 +48,6 @@ button {
     font-size: 16px;
 }
 
-.mat-pseudo-checkbox-checked:after {
-    width: 14px !important;
-    height: 7px !important;
-}
-
 // Fix: "Input underlines has wrong color opacity value"
 .mat-form-field-underline {
     background-color: rgba(0, 0, 0, 0.12);
@@ -118,4 +113,4 @@ mat-chip {
 // Fix: Mat-card-image requires a bigger width than 100%
 .mat-card-image {
     max-width: none !important;
-}
+}

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

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

@@ -173,6 +173,7 @@ $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-h
 
                             > .mat-tab-group {
                                 overflow: hidden;
+                                width: 100%;
 
                                 .mat-tab-header {
 

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;
+                }
             }
         }
 
@@ -139,7 +144,7 @@
             .datatable-footer-inner {
                 padding: 0 24px;
 
-                @include media-breakpoint('sm') {
+                @include media-breakpoint('lt-md') {
                     flex-direction: column;
                     padding: 16px 0;
                     height: auto !important;
@@ -161,7 +166,18 @@
                         li {
 
                             a {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
                                 text-decoration: none !important;
+
+                                i {
+                                    width: 20px;
+                                    min-width: 20px;
+                                    height: 20px;
+                                    min-height: 20px;
+                                    padding: 0;
+                                }
                             }
                         }
                     }
@@ -172,7 +188,7 @@
 }
 
 [class*="datatable-icon-"] {
-    font-family: 'Material Icons';
+    font-family: 'material-outline-icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
@@ -204,11 +220,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 +265,4 @@
 
 .datatable-icon-prev:before {
     content: "skip_previous";
-}
+}

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

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { Router, RoutesRecognized } from '@angular/router';
+import { ResolveEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { filter } from 'rxjs/operators';
@@ -96,7 +96,7 @@ export class FuseConfigService
         // Reload the default layout config on every RoutesRecognized event
         // if the current layout config is different from the default one
         this._router.events
-            .pipe(filter(event => event instanceof RoutesRecognized))
+            .pipe(filter(event => event instanceof ResolveEnd))
             .subscribe(() => {
                 if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) )
                 {

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

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

src/app/app.component.ts

@@ -86,17 +86,17 @@ export class AppComponent implements OnInit, OnDestroy
          * This is related to ngxTranslate module and below there is a temporary fix while we
          * are moving the multi language implementation over to the Angular's core language
          * service.
-         **/
+         */
 
         // Set the default language to 'en' and then back to 'tr'.
         // '.use' cannot be used here as ngxTranslate won't switch to a language that's already
         // been selected and there is no way to force it, so we overcome the issue by switching
         // the default language back and forth.
         /**
-         setTimeout(() => {
-            this._translateService.setDefaultLang('en');
-            this._translateService.setDefaultLang('tr');
-         });
+         * setTimeout(() => {
+         * this._translateService.setDefaultLang('en');
+         * this._translateService.setDefaultLang('tr');
+         * });
          */
 
         /**

src/app/app.module.ts

@@ -4,10 +4,10 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { TranslateModule } from '@ngx-translate/core';
-import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -23,23 +23,19 @@ import { LayoutModule } from 'app/layout/layout.module';
 const appRoutes: Routes = [
     {
         path        : 'apps',
-        loadChildren: './main/apps/apps.module#AppsModule'
+        loadChildren: () => import('./main/apps/apps.module').then(m => m.AppsModule)
     },
     {
         path        : 'pages',
-        loadChildren: './main/pages/pages.module#PagesModule'
+        loadChildren: () => import('./main/pages/pages.module').then(m => m.PagesModule)
     },
     {
         path        : 'ui',
-        loadChildren: './main/ui/ui.module#UIModule'
+        loadChildren: () => import('./main/ui/ui.module').then(m => m.UIModule)
     },
     {
         path        : 'documentation',
-        loadChildren: './main/documentation/documentation.module#DocumentationModule'
-    },
-    {
-        path        : 'angular-material-elements',
-        loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
+        loadChildren: () => import('./main/documentation/documentation.module').then(m => m.DocumentationModule)
     },
     {
         path      : '**',

src/app/app.theme.scss

@@ -61,7 +61,7 @@ $custom_palettes: (
 // @ Typography
 // -----------------------------------------------------------------------------------------------------
 
-// Force the input field font sizes to 16px
+// Angular Material typography
 $typography: mat-typography-config(
     $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
     $title: mat-typography-level(20px, 32px, 600),
@@ -121,8 +121,6 @@ $typography: mat-typography-config(
 
 @import "src/app/main/ui/cards/cards.theme";
 
-@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
-
 // Define a mixin for easier access
 @mixin components-theme($theme) {
 
@@ -172,9 +170,6 @@ $typography: mat-typography-config(
 
     // UI
     @include ui-cards-theme($theme);
-
-    // Example Viewer
-    @include example-viewer-theme($theme);
 }
 
 // -----------------------------------------------------------------------------------------------------

src/app/fake-db/calendar.ts

@@ -1,13 +1,4 @@
-import {
-    startOfDay,
-    endOfDay,
-    subDays,
-    addDays,
-    endOfMonth,
-    isSameDay,
-    isSameMonth,
-    addHours
-} from 'date-fns';
+import { addDays, addHours, endOfDay, endOfMonth, startOfDay, subDays } from 'date-fns';
 
 export class CalendarFakeDb
 {
@@ -37,7 +28,8 @@ export class CalendarFakeDb
                 },
                 {
                     start    : startOfDay(new Date()),
-                    title    : 'An event with no end date',
+                    end      : endOfDay(new Date()),
+                    title    : 'An event',
                     allDay   : false,
                     color    : {
                         primary  : '#FF9800',

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

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

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

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

src/app/layout/components/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 7+)</span>
+            <span>Purchase FUSE Angular</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>

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

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

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

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

src/app/layout/components/navbar/vertical/style-1/style-1.component.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);
                     });
                 }
             );

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

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

src/app/layout/components/navbar/vertical/style-2/style-2.component.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);
                     });
                 }
             );

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

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

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

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

src/app/layout/components/toolbar/toolbar.component.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});
     }
 
     /**

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

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -90,7 +90,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->

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

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -102,7 +102,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -141,4 +141,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -102,7 +102,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -141,4 +141,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -88,7 +88,7 @@
 <!-- / QUICK PANEL -->
 
 <!-- ----------------------------------------------------------------------------------------------------- -->
-<!-- @ PARTIALS
+<!-- @ PARTIALS                                                                                            -->
 <!-- ----------------------------------------------------------------------------------------------------- -->
 
 <!-- TOOLBAR -->
@@ -127,4 +127,4 @@
         <navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
     </fuse-sidebar>
 </ng-template>
-<!-- / RIGHT NAVBAR -->
+<!-- / RIGHT NAVBAR -->

src/app/main/angular-material-elements/angular-material-elements.component.html

@@ -1,33 +0,0 @@
-<div class="page-layout simple fullwidth angular-material-elements">
-
-    <!-- HEADER -->
-    <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
-         fxLayoutAlign.gt-xs="space-between center">
-
-        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
-            <div fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-18">home</mat-icon>
-                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
-                <span class="secondary-text">Components</span>
-                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
-                <span class="secondary-text">Angular Material Elements</span>
-            </div>
-            <div class="h2 mt-16">{{title}}</div>
-        </div>
-
-        <a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/"
-           target="_blank">
-            <mat-icon class="mr-8">link</mat-icon>
-            <span>Reference</span>
-        </a>
-    </div>
-    <!-- / HEADER -->
-
-    <!-- CONTENT -->
-    <div class="content p-24">
-        <div *ngFor="let example of examples">
-            <example-viewer [example]="example"></example-viewer>
-        </div>
-    </div>
-</div>
-

src/app/main/angular-material-elements/angular-material-elements.component.scss

@@ -1,9 +0,0 @@
-:host {
-
-    .angular-material-elements {
-
-        > .content {
-            max-width: 960px;
-        }
-    }
-}

src/app/main/angular-material-elements/angular-material-elements.component.ts

@@ -1,60 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-import { COMPONENT_MAP } from 'app/main/angular-material-elements/example-components';
-
-@Component({
-    selector   : 'angular-material',
-    templateUrl: './angular-material-elements.component.html',
-    styleUrls  : ['./angular-material-elements.component.scss']
-})
-export class AngularMaterialElementsComponent implements OnInit, OnDestroy
-{
-    id: string;
-    title: string;
-    examples: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param {ActivatedRoute} _activatedRoute
-     */
-    constructor(
-        private _activatedRoute: ActivatedRoute
-    )
-    {
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
-    }
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        this._activatedRoute.params
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(params => {
-                this.id = params['id'];
-                const _title = this.id.replace('-', ' ');
-                this.title = _title.charAt(0).toUpperCase() + _title.substring(1);
-                this.examples = COMPONENT_MAP[this.id];
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-}
-

src/app/main/angular-material-elements/angular-material-elements.module.ts

@@ -1,45 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseHighlightModule } from '@fuse/components/index';
-import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
-
-import { MaterialModule } from 'app/main/angular-material-elements/material.module';
-import { EXAMPLE_LIST } from 'app/main/angular-material-elements/example-components';
-import { AngularMaterialElementsComponent } from 'app/main/angular-material-elements/angular-material-elements.component';
-import { ExampleViewerComponent } from 'app/main/angular-material-elements/example-viewer/example-viewer';
-
-const routes: Routes = [
-    {
-        path    : '',
-        children: [
-            {
-                path     : ':id',
-                component: AngularMaterialElementsComponent
-            }
-        ]
-    }
-];
-
-@NgModule({
-    declarations   : [
-        [...EXAMPLE_LIST],
-        AngularMaterialElementsComponent,
-        ExampleViewerComponent
-    ],
-    imports        : [
-        RouterModule.forChild(routes),
-
-        MaterialModule,
-
-        FuseSharedModule,
-        FuseHighlightModule,
-        FuseWidgetModule
-    ],
-    entryComponents: EXAMPLE_LIST,
-})
-export class AngularMaterialElementsModule
-{
-}
-

src/app/main/angular-material-elements/example-viewer/example-viewer.html

@@ -1,71 +0,0 @@
-<div class="example-viewer-wrapper mat-card mat-elevation-z2">
-
-    <div class="example-viewer-header">
-
-        <div class="example-viewer-title">{{exampleData?.title}}</div>
-
-        <button mat-icon-button type="button" (click)="toggleSourceView()"
-                [matTooltip]="'View source'">
-            <mat-icon>
-                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
-                     preserveAspectRatio="xMidYMid meet" focusable="false">
-                    <path fill="none" d="M0 0h24v24H0V0z"></path>
-                    <path
-                        d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
-                </svg>
-            </mat-icon>
-        </button>
-    </div>
-
-    <div class="example-viewer-source" [fxShow]="showSource">
-
-        <mat-tab-group [(selectedIndex)]="selectedIndex">
-            <mat-tab label="HTML"></mat-tab>
-            <mat-tab label="TS"></mat-tab>
-            <mat-tab label="CSS"></mat-tab>
-        </mat-tab-group>
-        <div class="tab-content">
-            <section class="tab" *ngIf="selectedIndex === 0"
-                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
-                <button mat-icon-button type="button" class="example-source-copy"
-                        title="Copy example source" aria-label="Copy example source to clipboard"
-                        (click)="copySource(htmlView.el.nativeElement.innerText)">
-                    <mat-icon>content_copy</mat-icon>
-                </button>
-                <fuse-highlight lang="html"
-                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
-                </fuse-highlight>
-            </section>
-
-            <section class="tab" *ngIf="selectedIndex === 1"
-                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
-                <button mat-icon-button type="button" class="example-source-copy"
-                        title="Copy example source" aria-label="Copy example source to clipboard"
-                        (click)="copySource(tsView.el.nativeElement.innerText)">
-                    <mat-icon>content_copy</mat-icon>
-                </button>
-                <fuse-highlight lang="typescript"
-                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
-                </fuse-highlight>
-            </section>
-
-            <section class="tab" *ngIf="selectedIndex === 2"
-                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
-                <button mat-icon-button type="button" class="example-source-copy"
-                        title="Copy example source" aria-label="Copy example source to clipboard"
-                        (click)="copySource(cssView.el.nativeElement.innerText)">
-                    <mat-icon>content_copy</mat-icon>
-                </button>
-                <fuse-highlight lang="css"
-                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
-                </fuse-highlight>
-            </section>
-        </div>
-    </div>
-
-    <div class="example-viewer-body" [fxHide]="showSource">
-        <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
-        <!--<ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>-->
-        <div #previewContainer></div>
-    </div>
-</div>

src/app/main/angular-material-elements/example-viewer/example-viewer.scss

@@ -1,75 +0,0 @@
-@import "src/@fuse/scss/fuse";
-
-example-viewer {
-    display: block;
-    padding: 24px 0;
-
-    .example-viewer-wrapper {
-        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
-        margin: 4px;
-        padding: 0;
-
-        h3 {
-            margin-top: 10px;
-        }
-    }
-
-    .example-viewer-header {
-        align-content: center;
-        align-items: center;
-        display: flex;
-        justify-content: center;
-        padding: 8px 20px;
-        flex: 1 1 auto;
-        border-bottom: 1px solid;
-
-        .example-viewer-title {
-            flex: 1 1 auto;
-        }
-    }
-
-    .example-viewer-source {
-
-        .tab-content {
-            background: #263238;
-
-            .tab {
-                position: relative;
-
-                .example-source-copy {
-                    position: absolute;
-                    top: 8px;
-                    display: none;
-                    right: 8px;
-
-                    mat-icon {
-                        color: rgba(255, 255, 255, 0.87);
-                    }
-                }
-
-                &:hover {
-                    .example-source-copy {
-                        display: inline-block;
-                    }
-                }
-
-                .example-source {
-                    display: flex;
-                    padding: 0;
-                    margin: 0;
-                    min-height: 150px;
-                    border-bottom: 1px solid;
-
-                    > pre {
-                        width: 100%;
-                    }
-                }
-            }
-        }
-
-    }
-
-    .example-viewer-body {
-        padding: 24px;
-    }
-}

src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss

@@ -1,27 +0,0 @@
-@mixin example-viewer-theme($theme) {
-
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-
-    example-viewer {
-
-        .example-viewer-header {
-            color: map-get($foreground, secondary-text);
-            background: map-get($background, app-bar);
-            border-bottom-color: map-get($foreground, divider);
-        }
-
-        .example-viewer-source {
-
-            .tab-content {
-
-                .tab {
-
-                    .example-source {
-                        border-bottom-color: map-get($foreground, divider);
-                    }
-                }
-            }
-        }
-    }
-}

src/app/main/angular-material-elements/example-viewer/example-viewer.ts

@@ -1,152 +0,0 @@
-import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-typescript';
-
-import { fuseAnimations } from '@fuse/animations/index';
-import { FuseCopierService } from '@fuse/services/copier.service';
-
-import { EXAMPLE_COMPONENTS } from 'app/main/angular-material-elements/example-components';
-
-export interface LiveExample
-{
-    title: string;
-    component: any;
-    additionalFiles?: string[];
-    selectorName?: string;
-}
-
-@Component({
-    selector     : 'example-viewer',
-    templateUrl  : './example-viewer.html',
-    styleUrls    : ['./example-viewer.scss'],
-    encapsulation: ViewEncapsulation.None,
-    animations   : fuseAnimations
-})
-export class ExampleViewerComponent implements AfterViewInit, OnDestroy
-{
-    _example: string;
-    exampleData: LiveExample;
-    showSource: boolean;
-    previewRef: ComponentRef<any>;
-    selectedIndex: number;
-
-    @ViewChild('previewContainer', {read: ViewContainerRef})
-    private _previewContainer: ViewContainerRef;
-
-    /**
-     * Constructor
-     *
-     * @param {MatSnackBar} _matSnackBar
-     * @param {FuseCopierService} _fuseCopierService
-     * @param {ComponentFactoryResolver} _componentFactoryResolver
-     */
-    constructor(
-        private _matSnackBar: MatSnackBar,
-        private _fuseCopierService: FuseCopierService,
-        private _componentFactoryResolver: ComponentFactoryResolver
-    )
-    {
-        // Set the defaults
-        this.selectedIndex = 0;
-        this.showSource = false;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Container
-     *
-     * @param {ViewContainerRef} value
-     */
-    set container(value: ViewContainerRef)
-    {
-        this._previewContainer = value;
-    }
-
-    get container(): ViewContainerRef
-    {
-        return this._previewContainer;
-    }
-
-    /**
-     * Example
-     *
-     * @param {string} example
-     */
-    @Input()
-    set example(example: string)
-    {
-        if ( example && EXAMPLE_COMPONENTS[example] )
-        {
-            this._example = example;
-            this.exampleData = EXAMPLE_COMPONENTS[example];
-        }
-        else
-        {
-            console.log('MISSING EXAMPLE: ', example);
-        }
-    }
-
-    get example(): string
-    {
-        return this._example;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * After view init
-     */
-    ngAfterViewInit(): void
-    {
-        setTimeout(() => {
-            const cmpFactory = this._componentFactoryResolver.resolveComponentFactory(this.exampleData.component);
-            this.previewRef = this._previewContainer.createComponent(cmpFactory);
-        }, 0);
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        if ( this.previewRef )
-        {
-            this.previewRef.destroy();
-        }
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle source view
-     */
-    toggleSourceView(): void
-    {
-        this.showSource = !this.showSource;
-    }
-
-    /**
-     * Copy the source
-     *
-     * @param {string} text
-     */
-    copySource(text: string): void
-    {
-        if ( this._fuseCopierService.copyText(text) )
-        {
-            this._matSnackBar.open('Code copied', '', {duration: 2500});
-        }
-        else
-        {
-            this._matSnackBar.open('Copy failed. Please try again!', '', {duration: 2500});
-        }
-    }
-}

src/app/main/angular-material-elements/material.module.ts

@@ -1,94 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import {
-    MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
-    MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
-    MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
-    MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
-    MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule,
-    MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule,
-    MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
-} from '@angular/material';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-
-@NgModule({
-    imports: [
-        MatAutocompleteModule,
-        MatBadgeModule,
-        MatBottomSheetModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatDividerModule,
-        MatExpansionModule,
-        MatFormFieldModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatMomentDateModule,
-        MatPaginatorModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSlideToggleModule,
-        MatSliderModule,
-        MatSnackBarModule,
-        MatSortModule,
-        MatStepperModule,
-        MatTableModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        MatTreeModule
-    ],
-    exports: [
-        MatAutocompleteModule,
-        MatBadgeModule,
-        MatBottomSheetModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatDividerModule,
-        MatExpansionModule,
-        MatFormFieldModule,
-        MatGridListModule,
-        MatIconModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatMomentDateModule,
-        MatPaginatorModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSlideToggleModule,
-        MatSliderModule,
-        MatSnackBarModule,
-        MatSortModule,
-        MatStepperModule,
-        MatTableModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatTooltipModule,
-        MatTreeModule
-    ]
-})
-export class MaterialModule
-{
-}

src/app/main/apps/academy/academy.module.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

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

@@ -6,51 +6,51 @@ import { FuseSharedModule } from '@fuse/shared.module';
 const routes = [
     {
         path        : 'dashboards/analytics',
-        loadChildren: './dashboards/analytics/analytics.module#AnalyticsDashboardModule'
+        loadChildren: () => import('./dashboards/analytics/analytics.module').then(m => m.AnalyticsDashboardModule)
     },
     {
         path        : 'dashboards/project',
-        loadChildren: './dashboards/project/project.module#ProjectDashboardModule'
+        loadChildren: () => import('./dashboards/project/project.module').then(m => m.ProjectDashboardModule)
     },
     {
         path        : 'mail',
-        loadChildren: './mail/mail.module#MailModule'
+        loadChildren: () => import('./mail/mail.module').then(m => m.MailModule)
     },
     {
         path        : 'mail-ngrx',
-        loadChildren: './mail-ngrx/mail.module#MailNgrxModule'
+        loadChildren: () => import('./mail-ngrx/mail.module').then(m => m.MailNgrxModule)
     },
     {
         path        : 'chat',
-        loadChildren: './chat/chat.module#ChatModule'
+        loadChildren: () => import('./chat/chat.module').then(m => m.ChatModule)
     },
     {
         path        : 'calendar',
-        loadChildren: './calendar/calendar.module#CalendarModule'
+        loadChildren: () => import('./calendar/calendar.module').then(m => m.CalendarModule)
     },
     {
         path        : 'e-commerce',
-        loadChildren: './e-commerce/e-commerce.module#EcommerceModule'
+        loadChildren: () => import('./e-commerce/e-commerce.module').then(m => m.EcommerceModule)
     },
     {
         path        : 'academy',
-        loadChildren: './academy/academy.module#AcademyModule'
+        loadChildren: () => import('./academy/academy.module').then(m => m.AcademyModule)
     },
     {
         path        : 'todo',
-        loadChildren: './todo/todo.module#TodoModule'
+        loadChildren: () => import('./todo/todo.module').then(m => m.TodoModule)
     },
     {
         path        : 'file-manager',
-        loadChildren: './file-manager/file-manager.module#FileManagerModule'
+        loadChildren: () => import('./file-manager/file-manager.module').then(m => m.FileManagerModule)
     },
     {
         path        : 'contacts',
-        loadChildren: './contacts/contacts.module#ContactsModule'
+        loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule)
     },
     {
         path        : 'scrumboard',
-        loadChildren: './scrumboard/scrumboard.module#ScrumboardModule'
+        loadChildren: () => import('./scrumboard/scrumboard.module').then(m => m.ScrumboardModule)
     }
 ];
 

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

@@ -101,20 +101,16 @@
             <mwl-calendar-week-view
                 *ngSwitchCase="'week'"
                 [viewDate]="viewDate"
-                (viewDateChange)="selectedDay = {date:$event}"
                 [events]="events"
                 [refresh]="refresh"
-                (dayClicked)="dayClicked($event.day)"
                 (eventClicked)="editEvent('edit', $event.event)"
                 (eventTimesChanged)="eventTimesChanged($event)">
             </mwl-calendar-week-view>
             <mwl-calendar-day-view
                 *ngSwitchCase="'day'"
                 [viewDate]="viewDate"
-                (viewDateChange)="selectedDay = {date:$event}"
                 [events]="events"
                 [refresh]="refresh"
-                (dayClicked)="dayClicked($event.day)"
                 (eventClicked)="editEvent('edit', $event.event)"
                 (eventTimesChanged)="eventTimesChanged($event)">
             </mwl-calendar-day-view>

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

@@ -38,7 +38,7 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            justify-content: start;
+            justify-content: flex-start;
             @include mat-elevation(1);
             transition: box-shadow 300ms ease;
 

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { startOfDay, isSameDay, isSameMonth } from 'date-fns';
 import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarMonthViewDay } from 'angular-calendar';
@@ -167,7 +167,6 @@ export class CalendarComponent implements OnInit
     {
         event.start = newStart;
         event.end = newEnd;
-        // console.warn('Dropped or resized', event);
         this.refresh.next(true);
     }
 

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

@@ -1,8 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
-    MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { CalendarModule as AngularCalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';

src/app/main/apps/calendar/calendar.theme.scss

@@ -7,6 +7,7 @@
 
     // Month view
     .cal-month-view {
+        background: transparent !important;
 
         .cal-day-badge {
             background: map-get($accent, default);
@@ -80,6 +81,7 @@
 
     // Week view
     .cal-week-view {
+        background: transparent !important;
 
         .cal-event {
 
@@ -126,10 +128,58 @@
                 }
             }
         }
+
+        .cal-day-column {
+            border-left-color: map-get($foreground, divider);
+        }
+
+        .cal-all-day-events {
+            border-color: map-get($foreground, divider);
+        }
+
+        .cal-time-events {
+            border-color: map-get($foreground, divider);
+
+            .cal-day-columns:not(.cal-resize-active) .cal-hour-segment:hover {
+                background: map-get($background, hover);
+            }
+        }
+
+        .cal-hour {
+
+            .cal-hour-segment {
+
+                &:hover {
+                    background: map-get($background, hover);
+                }
+            }
+
+            &.cal-hour-odd {
+                background: map-get($background, hover);
+            }
+
+            &:not(:last-child) {
+
+                .cal-hour-segment {
+                    border-color: map-get($foreground, divider);
+                }
+            }
+
+            &:last-child {
+
+                :not(:last-child) {
+
+                    .cal-hour-segment {
+                        border-color: map-get($foreground, divider);
+                    }
+                }
+            }
+        }
     }
 
     // Day view
     .cal-day-view {
+        background: transparent !important;
 
         .cal-hour-rows {
             border-color: map-get($foreground, divider);
@@ -189,4 +239,4 @@
             }
         }
     }
-}
+}

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

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { CalendarEvent } from 'angular-calendar';
 
 import { MatColors } from '@fuse/mat-colors';

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

@@ -38,7 +38,7 @@ export class CalendarEventModel
             primary  : data.color && data.color.primary || '#1e90ff',
             secondary: data.color && data.color.secondary || '#D1E8FF'
         };
-        this.draggable = data.draggable || true;
+        this.draggable = data.draggable;
         this.resizable = {
             beforeStart: data.resizable && data.resizable.beforeStart || true,
             afterEnd   : data.resizable && data.resizable.afterEnd || true

src/app/main/apps/chat/chat.module.ts

@@ -1,9 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import {
-    MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatRadioModule, MatSidenavModule, MatToolbarModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+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 { MatRadioModule } from '@angular/material/radio';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 

src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
+import { MediaObserver } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -31,12 +31,12 @@ export class ChatChatsSidenavComponent implements OnInit, OnDestroy
      *
      * @param {ChatService} _chatService
      * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
-     * @param {ObservableMedia} _observableMedia
+     * @param {MediaObserver} _mediaObserver
      */
     constructor(
         private _chatService: ChatService,
         private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
-        public _observableMedia: ObservableMedia
+        public _mediaObserver: MediaObserver
     )
     {
         // Set the defaults
@@ -98,7 +98,7 @@ export class ChatChatsSidenavComponent implements OnInit, OnDestroy
     {
         this._chatService.getChat(contact);
 
-        if ( !this._observableMedia.isActive('gt-md') )
+        if ( !this._mediaObserver.isActive('gt-md') )
         {
             this._fuseMatSidenavHelperService.getSidenav('chat-left-sidenav').toggle();
         }

src/app/main/apps/contacts/contact-form/contact-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 import { Contact } from 'app/main/apps/contacts/contact.model';
 

src/app/main/apps/contacts/contact-list/contact-list.component.html

@@ -98,7 +98,6 @@
              class="contact"
              (click)="editContact(contact)"
              [ngClass]="{'accent-50':checkboxes[contact.id]}"
-             matRipple
              [@animate]="{value:'*',params:{y:'100%'}}">
     </mat-row>
 </mat-table>

src/app/main/apps/contacts/contact-list/contact-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DataSource } from '@angular/cdk/collections';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

src/app/main/apps/contacts/contacts.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
@@ -77,6 +77,9 @@ export class ContactsComponent implements OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
+        // Reset the search
+        this._contactsService.onSearchTextChanged.next('');
+
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();

src/app/main/apps/contacts/contacts.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
-    MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseConfirmDialogModule, FuseSidebarModule } from '@fuse/components';

src/app/main/apps/contacts/selected-bar/selected-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 

src/app/main/apps/dashboards/analytics/analytics.component.ts

@@ -52,8 +52,8 @@ export class AnalyticsDashboardComponent implements OnInit
      */
     private _registerCustomChartJSPlugin(): void
     {
-        (<any>window).Chart.plugins.register({
-            afterDatasetsDraw: function (chart, easing): any {
+        (window as any).Chart.plugins.register({
+            afterDatasetsDraw: function(chart, easing): any {
                 // Only activate the plugin if it's made available
                 // in the options
                 if (
@@ -67,18 +67,18 @@ export class AnalyticsDashboardComponent implements OnInit
                 // To only draw at the end of animation, check for easing === 1
                 const ctx = chart.ctx;
 
-                chart.data.datasets.forEach(function (dataset, i): any {
+                chart.data.datasets.forEach(function(dataset, i): any {
                     const meta = chart.getDatasetMeta(i);
                     if ( !meta.hidden )
                     {
-                        meta.data.forEach(function (element, index): any {
+                        meta.data.forEach(function(element, index): any {
 
                             // Draw the text in black, with the specified font
                             ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
                             const fontSize = 13;
                             const fontStyle = 'normal';
                             const fontFamily = 'Roboto, Helvetica Neue, Arial';
-                            ctx.font = (<any>window).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
+                            ctx.font = (window as any).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 
                             // Just naively convert to string for now
                             const dataString = dataset.data[index].toString() + 'k';

src/app/main/apps/dashboards/analytics/analytics.module.ts

@@ -1,6 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
 import { AgmCoreModule } from '@agm/core';
 import { ChartsModule } from 'ng2-charts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';

src/app/main/apps/dashboards/project/project.module.ts

@@ -1,6 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } 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 { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';

src/app/main/apps/e-commerce/e-commerce.module.ts

@@ -1,10 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {
-    MatButtonModule, MatChipsModule, MatExpansionModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule,
-    MatSortModule,
-    MatTableModule, MatTabsModule
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatRippleModule } from '@angular/material/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
 

src/app/main/apps/e-commerce/order/order-statuses.ts

@@ -1,72 +1,72 @@
 export const orderStatuses = [
     {
-        'id'   : 1,
-        'name' : 'Awaiting check payment',
-        'color': 'blue-500'
+        id   : 1,
+        name : 'Awaiting check payment',
+        color: 'blue-500'
     },
     {
-        'id'   : 2,
-        'name' : 'Payment accepted',
-        'color': 'green-500'
+        id   : 2,
+        name : 'Payment accepted',
+        color: 'green-500'
     },
     {
-        'id'   : 3,
-        'name' : 'Preparing the order',
-        'color': 'orange-500'
+        id   : 3,
+        name : 'Preparing the order',
+        color: 'orange-500'
     },
     {
-        'id'   : 4,
-        'name' : 'Shipped',
-        'color': 'purple-500'
+        id   : 4,
+        name : 'Shipped',
+        color: 'purple-500'
     },
     {
-        'id'   : 5,
-        'name' : 'Delivered',
-        'color': 'green-800'
+        id   : 5,
+        name : 'Delivered',
+        color: 'green-800'
     },
     {
-        'id'   : 6,
-        'name' : 'Canceled',
-        'color': 'pink-500'
+        id   : 6,
+        name : 'Canceled',
+        color: 'pink-500'
     },
     {
-        'id'   : 7,
-        'name' : 'Refunded',
-        'color': 'red-500'
+        id   : 7,
+        name : 'Refunded',
+        color: 'red-500'
     },
     {
-        'id'   : 8,
-        'name' : 'Payment error',
-        'color': 'red-900'
+        id   : 8,
+        name : 'Payment error',
+        color: 'red-900'
     },
     {
-        'id'   : 9,
-        'name' : 'On pre-order (paid)',
-        'color': 'purple-300'
+        id   : 9,
+        name : 'On pre-order (paid)',
+        color: 'purple-300'
     },
     {
-        'id'   : 10,
-        'name' : 'Awaiting bank wire payment',
-        'color': 'blue-500'
+        id   : 10,
+        name : 'Awaiting bank wire payment',
+        color: 'blue-500'
     },
     {
-        'id'   : 11,
-        'name' : 'Awaiting PayPal payment',
-        'color': 'blue-500'
+        id   : 11,
+        name : 'Awaiting PayPal payment',
+        color: 'blue-500'
     },
     {
-        'id'   : 12,
-        'name' : 'Remote payment accepted',
-        'color': 'green-500'
+        id   : 12,
+        name : 'Remote payment accepted',
+        color: 'green-500'
     },
     {
-        'id'   : 13,
-        'name' : 'On pre-order (not paid)',
-        'color': 'purple-300'
+        id   : 13,
+        name : 'On pre-order (not paid)',
+        color: 'purple-300'
     },
     {
-        'id'   : 14,
-        'name' : 'Awaiting Cash-on-delivery payment',
-        'color': 'blue-500'
+        id   : 14,
+        name : 'Awaiting Cash-on-delivery payment',
+        color: 'blue-500'
     }
 ];

src/app/main/apps/e-commerce/orders/orders.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
@@ -8,7 +9,7 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseUtils } from '@fuse/utils';
 
 import { EcommerceOrdersService } from 'app/main/apps/e-commerce/orders/orders.service';
-import { takeUntil } from 'rxjs/internal/operators';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector     : 'e-commerce-orders',
@@ -22,13 +23,13 @@ export class EcommerceOrdersComponent implements OnInit, OnDestroy
     dataSource: FilesDataSource | null;
     displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];
 
-    @ViewChild(MatPaginator)
+    @ViewChild(MatPaginator, {static: true})
     paginator: MatPaginator;
 
-    @ViewChild('filter')
+    @ViewChild('filter', {static: true})
     filter: ElementRef;
 
-    @ViewChild(MatSort)
+    @ViewChild(MatSort, {static: true})
     sort: MatSort;
 
     // Private

src/app/main/apps/e-commerce/product/product.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Location } from '@angular/common';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 

src/app/main/apps/e-commerce/product/product.model.ts

@@ -1,4 +1,4 @@
-import { MatChipInputEvent } from '@angular/material';
+import { MatChipInputEvent } from '@angular/material/chips';
 
 import { FuseUtils } from '@fuse/utils';
 

src/app/main/apps/e-commerce/products/products.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatPaginator, MatSort } from '@angular/material';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
@@ -8,7 +9,7 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseUtils } from '@fuse/utils';
 
 import { EcommerceProductsService } from 'app/main/apps/e-commerce/products/products.service';
-import { takeUntil } from 'rxjs/internal/operators';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector     : 'e-commerce-products',
@@ -22,13 +23,13 @@ export class EcommerceProductsComponent implements OnInit
     dataSource: FilesDataSource | null;
     displayedColumns = ['id', 'image', 'name', 'category', 'price', 'quantity', 'active'];
 
-    @ViewChild(MatPaginator)
+    @ViewChild(MatPaginator, {static: true})
     paginator: MatPaginator;
 
-    @ViewChild(MatSort)
+    @ViewChild(MatSort, {static: true})
     sort: MatSort;
 
-    @ViewChild('filter')
+    @ViewChild('filter', {static: true})
     filter: ElementRef;
 
     // Private