Angular 10 compatibility update

(Navigation) Fix: Navigation items cannot be updated on the fly
Merge branch 'master' of https://github.com/withinpixels/fuse-angular
2025-12-22 18:37:07 +00:00 · 2020-07-23 15:15:42 +03:00 · 2020-07-23 13:32:01 +03:00 · 2020-02-15 11:12:10 +03:00 · 2020-02-15 11:11:10 +03:00 · 2020-02-14 12:59:55 +01:00
620 changed files with 8094 additions and 15910 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
--- a/angular.json
+++ b/angular.json
@@ -17,6 +17,7 @@
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
+                        "aot": true,
                        "outputPath": "dist/fuse",
                        "index": "src/index.html",
                        "main": "src/main.ts",
@@ -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": {
@@ -55,14 +68,30 @@
                                    "type": "initial",
                                    "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",
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@@ -1,5 +1,5 @@
 {
-    "extends": "../tsconfig.json",
+    "extends": "../tsconfig.base.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "module": "commonjs",
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@@ -1,9 +1,9 @@
 {
-    "extends": "../tsconfig.json",
+    "extends": "../tsconfig.base.json",
    "compilerOptions": {
        "outDir": "../out-tsc/e2e",
        "module": "commonjs",
-        "target": "es5",
+        "target": "es2018",
        "types": [
            "jasmine",
            "jasminewd2",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,16 +1,14 @@
 {
    "name": "fuse",
-    "version": "8.1.0",
+    "version": "10.0.0",
    "license": "https://themeforest.net/licenses/terms/regular",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --open",
-        "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
-        "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
-        "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-        "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-        "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-        "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+        "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",
@@ -18,71 +16,69 @@
    },
    "private": true,
    "dependencies": {
-        "@agm/core": "1.0.0-beta.5",
-        "@angular/animations": "8.1.0",
-        "@angular/cdk": "8.0.2",
-        "@angular/common": "8.1.0",
-        "@angular/compiler": "8.1.0",
-        "@angular/core": "8.1.0",
-        "@angular/flex-layout": "8.0.0-beta.26",
-        "@angular/forms": "8.1.0",
-        "@angular/material": "8.0.2",
-        "@angular/material-moment-adapter": "8.0.2",
-        "@angular/platform-browser": "8.1.0",
-        "@angular/platform-browser-dynamic": "8.1.0",
-        "@angular/router": "8.1.0",
-        "@ngrx/effects": "8.0.1",
-        "@ngrx/router-store": "8.0.1",
-        "@ngrx/store": "8.0.1",
-        "@ngrx/store-devtools": "8.0.1",
-        "@ngx-translate/core": "11.0.1",
+        "@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": "12.0.1",
-        "@swimlane/ngx-datatable": "15.0.2",
-        "@swimlane/ngx-dnd": "8.0.0",
-        "@types/prismjs": "1.16.0",
-        "angular-calendar": "0.27.12",
-        "angular-in-memory-web-api": "0.8.0",
-        "chart.js": "2.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.9.7",
-        "date-fns": "1.30.1",
-        "hammerjs": "2.0.8",
-        "lodash": "4.17.11",
-        "moment": "2.24.0",
-        "ng2-charts": "2.3.0",
+        "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": "8.0.1",
-        "ngx-cookie-service": "2.2.0",
-        "perfect-scrollbar": "1.4.0",
-        "prismjs": "1.16.0",
-        "rxjs": "6.5.2",
+        "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.9.1"
+        "zone.js": "0.10.3"
    },
    "devDependencies": {
-        "@angular/cli": "8.1.0",
-        "@angular/compiler-cli": "8.1.0",
-        "@angular/language-service": "8.1.0",
-        "@angular-devkit/build-angular": "0.801.0",
-        "@angularclass/hmr": "2.1.3",
-        "@types/jasmine": "3.3.13",
-        "@types/jasminewd2": "2.0.6",
-        "@types/lodash": "4.14.135",
-        "@types/node": "8.9.5",
-        "codelyzer": "5.1.0",
-        "jasmine-core": "3.4.0",
-        "jasmine-spec-reporter": "4.2.1",
-        "karma": "4.1.0",
-        "karma-chrome-launcher": "2.2.0",
-        "karma-coverage-istanbul-reporter": "2.0.5",
-        "karma-jasmine": "2.0.1",
-        "karma-jasmine-html-reporter": "1.4.2",
-        "protractor": "5.4.2",
-        "ts-node": "7.0.1",
-        "tslib": "1.10.0",
-        "tslint": "5.15.0",
-        "typescript": "3.4.5",
-        "webpack-bundle-analyzer": "3.3.2"
+        "@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"
    }
 }
--- a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
@@ -66,4 +66,4 @@

    </div>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/navigation/horizontal/item/item.component.html
+++ b/src/@fuse/components/navigation/horizontal/item/item.component.html
@@ -45,4 +45,4 @@
        </span>
    </ng-template>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts
+++ b/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;
            }
--- a/src/@fuse/components/navigation/vertical/group/group.component.html
+++ b/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>
--- a/src/@fuse/components/navigation/vertical/item/item.component.html
+++ b/src/@fuse/components/navigation/vertical/item/item.component.html
@@ -45,4 +45,4 @@
        </span>
    </ng-template>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/search-bar/search-bar.component.scss
+++ b/src/@fuse/components/search-bar/search-bar.component.scss
@@ -74,7 +74,7 @@
                }

                .fuse-search-bar-collapser {
-                    display: flex;
+                    display: inline-block;
                }
            }
        }
--- a/src/@fuse/components/shortcuts/shortcuts.component.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.component.ts
@@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
    @Input()
    navigation: any;

-    @ViewChild('searchInput', {static: false})
+    @ViewChild('searchInput')
    searchInputField;

-    @ViewChild('shortcuts', {static: false})
+    @ViewChild('shortcuts')
    shortcutsEl: ElementRef;

    // Private
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@@ -13,7 +13,7 @@ export class FuseModule
        }
    }

-    static forRoot(config): ModuleWithProviders
+    static forRoot(config): ModuleWithProviders<FuseModule>
    {
        return {
            ngModule : FuseModule,
--- a/src/@fuse/scss/core.scss
+++ b/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';
--- a/src/app/app.component.ts
+++ b/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');
+         * });
         */

        /**
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,7 +8,6 @@ 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';
@@ -24,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      : '**',
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -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);
 }

 // -----------------------------------------------------------------------------------------------------
--- a/src/app/fake-db/calendar.ts
+++ b/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',
--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.component.ts
@@ -23,10 +23,10 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
    sidebarFolded: boolean;
    user: any;

-    @ViewChild('replyForm', {static: false})
+    @ViewChild('replyForm')
    private _replyForm: NgForm;

-    @ViewChild('replyInput', {static: false})
+    @ViewChild('replyInput')
    private _replyInput: ElementRef;

    @ViewChildren(FusePerfectScrollbarDirective)
--- a/src/app/layout/components/footer/footer.component.html
+++ b/src/app/layout/components/footer/footer.component.html
@@ -6,7 +6,7 @@
           target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
           fxLayoutAlign="start center">
            <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
-            <span>Purchase FUSE (Angular 8+)</span>
+            <span>Purchase FUSE Angular</span>
        </a>

        <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
--- a/src/app/main/angular-material-elements/angular-material-elements.component.html
+++ b/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>
-
--- a/src/app/main/angular-material-elements/angular-material-elements.component.scss
+++ b/src/app/main/angular-material-elements/angular-material-elements.component.scss
@@ -1,9 +0,0 @@
-:host {
-
-    .angular-material-elements {
-
-        > .content {
-            max-width: 960px;
-        }
-    }
-}
--- a/src/app/main/angular-material-elements/angular-material-elements.component.ts
+++ b/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();
-    }
-}
-
--- a/src/app/main/angular-material-elements/angular-material-elements.module.ts
+++ b/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
-{
-}
-
--- a/src/app/main/angular-material-elements/example-components.ts
+++ b/src/app/main/angular-material-elements/example-components.ts
--- a/src/app/main/angular-material-elements/example-viewer/example-viewer.html
+++ b/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>
--- a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss
+++ b/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;
-    }
-}
--- a/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss
+++ b/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);
-                    }
-                }
-            }
-        }
-    }
-}
--- a/src/app/main/angular-material-elements/example-viewer/example-viewer.ts
+++ b/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/snack-bar';
-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, static: false})
-    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});
-        }
-    }
-}
--- a/src/app/main/angular-material-elements/material.module.ts
+++ b/src/app/main/angular-material-elements/material.module.ts
@@ -1,120 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatRippleModule } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatGridListModule } from '@angular/material/grid-list';
-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 { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatTreeModule } from '@angular/material/tree';
-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
-{
-}
--- a/src/app/main/apps/apps.module.ts
+++ b/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)
    }
 ];

--- a/src/app/main/apps/calendar/calendar.component.html
+++ b/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>
--- a/src/app/main/apps/calendar/calendar.component.ts
+++ b/src/app/main/apps/calendar/calendar.component.ts
@@ -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);
    }

--- a/src/app/main/apps/calendar/calendar.theme.scss
+++ b/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 @@
            }
        }
    }
-}
+}
--- a/src/app/main/apps/chat/chat-view/chat-view.component.ts
+++ b/src/app/main/apps/chat/chat-view/chat-view.component.ts
@@ -22,13 +22,13 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
    replyInput: any;
    selectedChat: any;

-    @ViewChild(FusePerfectScrollbarDirective, {static: false})
+    @ViewChild(FusePerfectScrollbarDirective)
    directiveScroll: FusePerfectScrollbarDirective;

    @ViewChildren('replyInput')
    replyInputField;

-    @ViewChild('replyForm', {static: false})
+    @ViewChild('replyForm')
    replyForm: NgForm;

    // Private
--- a/src/app/main/apps/contacts/contact-list/contact-list.component.html
+++ b/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>
--- a/src/app/main/apps/contacts/contact-list/contact-list.component.ts
+++ b/src/app/main/apps/contacts/contact-list/contact-list.component.ts
@@ -20,7 +20,7 @@ import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/conta
 })
 export class ContactsContactListComponent implements OnInit, OnDestroy
 {
-    @ViewChild('dialogContent', {static: false})
+    @ViewChild('dialogContent')
    dialogContent: TemplateRef<any>;

    contacts: any;
--- a/src/app/main/apps/contacts/contacts.component.ts
+++ b/src/app/main/apps/contacts/contacts.component.ts
@@ -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();
--- a/src/app/main/apps/e-commerce/orders/orders.component.ts
+++ b/src/app/main/apps/e-commerce/orders/orders.component.ts
@@ -9,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',
--- a/src/app/main/apps/e-commerce/products/products.component.ts
+++ b/src/app/main/apps/e-commerce/products/products.component.ts
@@ -9,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',
--- a/src/app/main/apps/file-manager/file-list/file-list.component.html
+++ b/src/app/main/apps/file-manager/file-list/file-list.component.html
@@ -53,7 +53,7 @@
    <mat-row *matRowDef="let row; columns: displayedColumns;"
             (click)="onSelect(row)"
             [ngClass]="{'selected' : row == selected}"
-             matRipple [@animate]="{value:'*',params:{y:'100%'}}"
+             [@animate]="{value:'*',params:{y:'100%'}}"
    >
    </mat-row>
 </mat-table>
--- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html
+++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html
@@ -3,7 +3,7 @@
 </div>

 <div class="mail-list">
-    <mail-ngrx-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
+    <mail-ngrx-list-item *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
                    [ngClass]="{'current-mail':mail?.id == currentMail?.id}">
    </mail-ngrx-list-item>
 </div>
--- a/src/app/main/apps/mail/mail-list/mail-list.component.html
+++ b/src/app/main/apps/mail/mail-list/mail-list.component.html
@@ -3,7 +3,7 @@
 </div>

 <div class="mail-list" [@animateStagger]="{value:'50'}">
-    <mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
+    <mail-list-item *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
                    [ngClass]="{'current-mail':mail?.id == currentMail?.id}"
                    [@animate]="{value:'*',params:{y:'100%'}}">
    </mail-list-item>
--- a/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts
+++ b/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts
@@ -15,7 +15,7 @@ export class ScrumboardBoardAddListComponent
    @Output()
    listAdded: EventEmitter<any>;

-    @ViewChild('nameInput', {static: false})
+    @ViewChild('nameInput')
    nameInputField;

    /**
--- a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts
+++ b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts
@@ -25,10 +25,10 @@ export class ScrumboardCardDialogComponent implements OnInit, OnDestroy
    toggleInArray = FuseUtils.toggleInArray;
    confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;

-    @ViewChild('checklistMenuTrigger', {static: false})
+    @ViewChild('checklistMenuTrigger')
    checklistMenu: MatMenuTrigger;

-    @ViewChild('newCheckListTitleField', {static: false})
+    @ViewChild('newCheckListTitleField')
    newCheckListTitleField;

    // Private
--- a/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
+++ b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
@@ -18,7 +18,7 @@ export class ScrumboardEditBoardNameComponent
    @Output()
    boardNameChanged: EventEmitter<any>;

-    @ViewChild('nameInput', {static: false})
+    @ViewChild('nameInput')
    nameInputField;

    constructor(
--- a/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts
+++ b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts
@@ -15,7 +15,7 @@ export class ScrumboardBoardAddCardComponent
    @Output()
    cardAdded: EventEmitter<any>;

-    @ViewChild('nameInput', {static: false})
+    @ViewChild('nameInput')
    nameInputField;

    /**
--- a/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
+++ b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
@@ -18,7 +18,7 @@ export class ScrumboardBoardEditListNameComponent
    @Output()
    listNameChanged: EventEmitter<any>;

-    @ViewChild('nameInput', {static: false})
+    @ViewChild('nameInput')
    nameInputField;

    /**
--- a/src/app/main/apps/scrumboard/board/list/list.component.ts
+++ b/src/app/main/apps/scrumboard/board/list/list.component.ts
@@ -25,7 +25,7 @@ export class ScrumboardBoardListComponent implements OnInit, OnDestroy
    @Input()
    list;

-    @ViewChild(FusePerfectScrollbarDirective, {static: false})
+    @ViewChild(FusePerfectScrollbarDirective)
    listScroll: FusePerfectScrollbarDirective;

    confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
--- a/src/app/main/apps/todo/todo-details/todo-details.component.ts
+++ b/src/app/main/apps/todo/todo-details/todo-details.component.ts
@@ -23,7 +23,7 @@ export class TodoDetailsComponent implements OnInit, OnDestroy
    formType: string;
    todoForm: FormGroup;

-    @ViewChild('titleInput', {static: false})
+    @ViewChild('titleInput')
    titleInputField;

    // Private
--- a/src/app/main/apps/todo/todo-list/todo-list.component.html
+++ b/src/app/main/apps/todo/todo-list/todo-list.component.html
@@ -8,7 +8,6 @@
                    [model]="todo"
                    (click)="readTodo(todo.id)"
                    [ngClass]="{'current-todo':todo?.id == currentTodo?.id}"
-                    matRipple
                    [@animate]="{value:'*',params:{y:'100%'}}">
    </todo-list-item>
 </div>
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -1,9 +1,13 @@
-<div id="changelog" class="page-layout simple fullwidth docs">
+<div id="changelog"
+     class="page-layout simple fullwidth docs">

    <!-- HEADER -->
-    <div class="header accent p-24" fxLayout="column" fxLayoutAlign="center start">
+    <div class="header accent p-24"
+         fxLayout="column"
+         fxLayoutAlign="center start">

-        <div fxLayout="row" fxLayoutAlign="start center">
+        <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">Documentation</span>
@@ -19,6 +23,124 @@

        <div class="changelog">

+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v10.0.0                                                                                     -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v10.0.0</span>
+                    <span class="date">2020.07.23</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>Updated Angular to 10</li>
+                            <li>Updated Angular Material to 10</li>
+                            <li>Updated various other packages to latest versions</li>
+                        </ul>
+                    </div>
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Fuse Navigation) Updating menu items on the fly is not working</li>
+                        </ul>
+                    </div>
+                    <div class="breaking-changes">
+                        <span class="title">Breaking Changes</span>
+                        <ul>
+                            <li>Removed HMR (Hot module reloading)</li>
+                            <li>Updated npm script names to better reflect their tasks</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v9.0.0                                                                                      -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v9.0.0</span>
+                    <span class="date">2020.02.05</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>Updated Angular to 9.0.0</li>
+                            <li>Updated Angular Material to 9.0.0</li>
+                            <li>Updated various other packages to latest versions</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v8.1.2                                                                                      -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v8.1.2</span>
+                    <span class="date">2019.07.20</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>Updated Angular to 8.1.2</li>
+                            <li>Updated Angular Material to 8.1.1</li>
+                            <li>Updated various other packages to latest versions</li>
+                        </ul>
+                    </div>
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Fuse Navigation) Multiple collapsable menu items within the same group don't expand/collapse correctly</li>
+                            <li>(Calendar App) Better dark mode support</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v8.1.1                                                                                      -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v8.1.1</span>
+                    <span class="date">2019.07.04</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>Disabled Angular compiler checks until we fix the warnings</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
            <!-- --------------------------------------------------------------------------------------------- -->
            <!-- @ v8.1.0                                                                                      -->
            <!-- --------------------------------------------------------------------------------------------- -->
--- a/src/app/main/documentation/components/navigation/navigation.component.ts
+++ b/src/app/main/documentation/components/navigation/navigation.component.ts
@@ -48,9 +48,9 @@ export class DocsComponentsNavigationComponent
    {
        // Update the badge title
        this._fuseNavigationService.updateNavigationItem('mail', {
-                badge: {
-                    title: 35
-                }
+            badge: {
+                title: 35
+            }
        });
    }

@@ -68,7 +68,7 @@ export class DocsComponentsNavigationComponent
        };

        this._fuseNavigationService.updateNavigationItem('calendar', {
-            type: 'collapsable',
+            type    : 'collapsable',
            children: [
                newNavItem
            ]
--- a/src/app/main/documentation/documentation.module.ts
+++ b/src/app/main/documentation/documentation.module.ts
@@ -14,27 +14,27 @@ const routes: Routes = [
    },
    {
        path        : 'getting-started',
-        loadChildren: './getting-started/getting-started.module#GettingStartedModule'
+        loadChildren: () => import('./getting-started/getting-started.module').then(m => m.GettingStartedModule)
    },
    {
        path        : 'working-with-fuse',
-        loadChildren: './working-with-fuse/working-with-fuse.module#WorkingWithFuseModule'
+        loadChildren: () => import('./working-with-fuse/working-with-fuse.module').then(m => m.WorkingWithFuseModule)
    },
    {
        path        : 'components',
-        loadChildren: './components/components.module#ComponentsModule'
+        loadChildren: () => import('./components/components.module').then(m => m.ComponentsModule)
    },
    {
        path        : 'components-third-party',
-        loadChildren: './components-third-party/components-third-party.module#ComponentsThirdPartyModule'
+        loadChildren: () => import('./components-third-party/components-third-party.module').then(m => m.ComponentsThirdPartyModule)
    },
    {
        path        : 'directives',
-        loadChildren: './directives/directives.module#DirectivesModule'
+        loadChildren: () => import('./directives/directives.module').then(m => m.DirectivesModule)
    },
    {
        path        : 'services',
-        loadChildren: './services/services.module#ServicesModule'
+        loadChildren: () => import('./services/services.module').then(m => m.ServicesModule)
    }
 ];

--- a/src/app/main/pages/authentication/register/register.component.ts
+++ b/src/app/main/pages/authentication/register/register.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/internal/operators';
+import { takeUntil } from 'rxjs/operators';

 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
--- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts
+++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/internal/operators';
+import { takeUntil } from 'rxjs/operators';

 import { FuseConfigService } from '@fuse/services/config.service';
 import { fuseAnimations } from '@fuse/animations';
--- a/src/app/main/pages/coming-soon/coming-soon.component.html
+++ b/src/app/main/pages/coming-soon/coming-soon.component.html
@@ -15,7 +15,7 @@
                    approximately:
                </div>

-                <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
+                <fuse-countdown eventDate="2021-07-28"></fuse-countdown>

            </div>

--- a/src/app/main/ui/angular-material/angular-material.component.html
+++ b/src/app/main/ui/angular-material/angular-material.component.html
@@ -0,0 +1,46 @@
+<div id="angular-material" class="page-layout simple tabbed" fxLayout="column">
+
+    <!-- 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">User Interface</span>
+            </div>
+            <div class="h1 mt-16">Angular Material</div>
+        </div>
+
+        <a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/components/categories"
+           target="_blank">
+            <mat-icon class="mr-8">link</mat-icon>
+            <span>Reference</span>
+        </a>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <div class="mat-title">Introduction</div>
+        <p>
+            Fuse uses Angular Material as its primary user interface library. It offers form controls, buttons, tabs, sidebars,
+            icons, modals, tooltips, data tables and many more well tested and widely used components.
+        </p>
+
+        <p>
+            Fuse is 100% compatible with all Angular Material components.
+        </p>
+
+        <div class="mat-title mt-32">Official docs</div>
+        <p>
+            Official Angular Material documentation: <a href="https://material.angular.io/components/categories" target="_blank">https://material.angular.io/components/categories</a>
+        </p>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>
--- a/src/app/main/ui/angular-material/angular-material.component.scss
+++ b/src/app/main/ui/angular-material/angular-material.component.scss
@@ -0,0 +1,7 @@
+:host {
+
+    .content {
+        max-width: 1200px;
+    }
+
+}
--- a/src/app/main/ui/angular-material/angular-material.component.ts
+++ b/src/app/main/ui/angular-material/angular-material.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'angular-material',
+    templateUrl: './angular-material.component.html',
+    styleUrls  : ['./angular-material.component.scss']
+})
+export class AngularMaterialComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}
--- a/src/app/main/ui/angular-material/angular-material.module.ts
+++ b/src/app/main/ui/angular-material/angular-material.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+import { AngularMaterialComponent } from 'app/main/ui/angular-material/angular-material.component';
+
+const routes: Routes = [
+    {
+        path     : 'angular-material',
+        component: AngularMaterialComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        AngularMaterialComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule
+    ]
+})
+export class UIAngularMaterialModule
+{
+}
--- a/src/app/main/ui/icons/icons.component.html
+++ b/src/app/main/ui/icons/icons.component.html
@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
+<div id="icons" class="page-layout simple tabbed" fxLayout="column">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
--- a/src/app/main/ui/ui.module.ts
+++ b/src/app/main/ui/ui.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';

+import { UIAngularMaterialModule } from 'app/main/ui/angular-material/angular-material.module';
 import { UICardsModule } from 'app/main/ui/cards/cards.module';
 import { UIFormsModule } from 'app/main/ui/forms/forms.module';
 import { UIIconsModule } from 'app/main/ui/icons/icons.module';
@@ -10,6 +11,7 @@ import { UIColorsModule } from 'app/main/ui/colors/colors.module';

@NgModule({
    imports: [
+        UIAngularMaterialModule,
        UICardsModule,
        UIFormsModule,
        UIIconsModule,
--- a/src/app/navigation/navigation.ts
+++ b/src/app/navigation/navigation.ts
@@ -56,7 +56,7 @@ export const navigation: FuseNavigation[] = [
                        title     : 'Product Detail',
                        type      : 'item',
                        url       : '/apps/e-commerce/products/1/printed-dress',
-                        exactMatch: true
+                        // exactMatch: true
                    },
                    {
                        id        : 'orders',
@@ -370,6 +370,13 @@ export const navigation: FuseNavigation[] = [
        type    : 'group',
        icon    : 'web',
        children: [
+            {
+                id   : 'angular-material',
+                title: 'Angular Material',
+                type : 'item',
+                icon : 'ballot',
+                url  : '/ui/angular-material'
+            },
            {
                id   : 'cards',
                title: 'Cards',
@@ -584,278 +591,6 @@ export const navigation: FuseNavigation[] = [
            }
        ]
    },
-    {
-        id      : 'angular-material-elements',
-        title   : 'Angular Material Elements',
-        type    : 'group',
-        icon    : 'layers',
-        children: [
-            {
-                id      : 'form-controls',
-                title   : 'Form Controls',
-                type    : 'collapsable',
-                icon    : 'layers',
-                children: [
-                    {
-                        id   : 'autocomplete',
-                        title: 'Autocomplete',
-                        type : 'item',
-                        url  : '/angular-material-elements/autocomplete'
-                    },
-                    {
-                        id   : 'checkbox',
-                        title: 'Checkbox',
-                        type : 'item',
-                        url  : '/angular-material-elements/checkbox'
-                    },
-                    {
-                        id   : 'datepicker',
-                        title: 'Datepicker',
-                        type : 'item',
-                        url  : '/angular-material-elements/datepicker'
-                    },
-                    {
-                        id   : 'form-field',
-                        title: 'Form field',
-                        type : 'item',
-                        url  : '/angular-material-elements/form-field'
-                    },
-                    {
-                        id   : 'input',
-                        title: 'Input',
-                        type : 'item',
-                        url  : '/angular-material-elements/input'
-                    },
-                    {
-                        id   : 'radio-button',
-                        title: 'Radio button',
-                        type : 'item',
-                        url  : '/angular-material-elements/radio-button'
-                    },
-                    {
-                        id   : 'select',
-                        title: 'Select',
-                        type : 'item',
-                        url  : '/angular-material-elements/select'
-                    },
-                    {
-                        id   : 'slider',
-                        title: 'Slider',
-                        type : 'item',
-                        url  : '/angular-material-elements/slider'
-                    },
-                    {
-                        id   : 'slide-toggle',
-                        title: 'Slide toggle',
-                        type : 'item',
-                        url  : '/angular-material-elements/slide-toggle'
-                    }
-                ]
-            },
-            {
-                id      : 'navigation',
-                title   : 'Navigation',
-                type    : 'collapsable',
-                icon    : 'layers',
-                children: [
-                    {
-                        id   : 'menu',
-                        title: 'Menu',
-                        type : 'item',
-                        url  : '/angular-material-elements/menu'
-                    },
-                    {
-                        id   : 'sidenav',
-                        title: 'Sidebar',
-                        type : 'item',
-                        url  : '/angular-material-elements/sidenav'
-                    },
-                    {
-                        id   : 'toolbar',
-                        title: 'Toolbar',
-                        type : 'item',
-                        url  : '/angular-material-elements/toolbar'
-                    }
-                ]
-            },
-            {
-                id      : 'layout',
-                title   : 'Layout',
-                type    : 'collapsable',
-                icon    : 'layers',
-                children: [
-                    {
-                        id   : 'badge',
-                        title: 'Badge',
-                        type : 'item',
-                        url  : '/angular-material-elements/badge'
-                    },
-                    {
-                        id   : 'bottom-sheet',
-                        title: 'Bottom Sheet',
-                        type : 'item',
-                        url  : '/angular-material-elements/bottom-sheet'
-                    },
-                    {
-                        id   : 'card',
-                        title: 'Card',
-                        type : 'item',
-                        url  : '/angular-material-elements/card'
-                    },
-                    {
-                        id   : 'divider',
-                        title: 'Divider',
-                        type : 'item',
-                        url  : '/angular-material-elements/divider'
-                    },
-                    {
-                        id   : 'elevation',
-                        title: 'Elevation',
-                        type : 'item',
-                        url  : '/angular-material-elements/elevation'
-                    },
-                    {
-                        id   : 'expansion-panel',
-                        title: 'Expansion Panel',
-                        type : 'item',
-                        url  : '/angular-material-elements/expansion-panel'
-                    },
-                    {
-                        id   : 'grid-list',
-                        title: 'Grid list',
-                        type : 'item',
-                        url  : '/angular-material-elements/grid-list'
-                    },
-                    {
-                        id   : 'list',
-                        title: 'List',
-                        type : 'item',
-                        url  : '/angular-material-elements/list'
-                    },
-                    {
-                        id   : 'stepper',
-                        title: 'Stepper',
-                        type : 'item',
-                        url  : '/angular-material-elements/stepper'
-                    },
-                    {
-                        id   : 'tabs',
-                        title: 'Tabs',
-                        type : 'item',
-                        url  : '/angular-material-elements/tabs'
-                    },
-                    {
-                        id   : 'tree',
-                        title: 'Tree',
-                        type : 'item',
-                        url  : '/angular-material-elements/tree'
-                    }
-                ]
-            },
-            {
-                id      : 'buttons-indicators',
-                title   : 'Buttons & Indicators',
-                type    : 'collapsable',
-                icon    : 'layers',
-                children: [
-                    {
-                        id   : 'button',
-                        title: 'Button',
-                        type : 'item',
-                        url  : '/angular-material-elements/button'
-                    },
-                    {
-                        id   : 'button-toggle',
-                        title: 'Button toggle',
-                        type : 'item',
-                        url  : '/angular-material-elements/button-toggle'
-                    },
-                    {
-                        id   : 'chips',
-                        title: 'Chips',
-                        type : 'item',
-                        url  : '/angular-material-elements/chips'
-                    },
-                    {
-                        id   : 'icon',
-                        title: 'icon',
-                        type : 'item',
-                        url  : '/angular-material-elements/icon'
-                    },
-                    {
-                        id   : 'progress-spinner',
-                        title: 'Progress spinner',
-                        type : 'item',
-                        url  : '/angular-material-elements/progress-spinner'
-                    },
-                    {
-                        id   : 'progress-bar',
-                        title: 'Progress bar',
-                        type : 'item',
-                        url  : '/angular-material-elements/progress-bar'
-                    },
-                    {
-                        id   : 'ripples',
-                        title: 'Ripples',
-                        type : 'item',
-                        url  : '/angular-material-elements/ripples'
-                    }
-                ]
-            },
-            {
-                id      : 'popups-modals',
-                title   : 'Popups & Modals',
-                type    : 'collapsable',
-                icon    : 'layers',
-                children: [
-                    {
-                        id   : 'dialog',
-                        title: 'Dialog',
-                        type : 'item',
-                        url  : '/angular-material-elements/dialog'
-                    },
-                    {
-                        id   : 'snackbar',
-                        title: 'Snackbar',
-                        type : 'item',
-                        url  : '/angular-material-elements/snackbar'
-                    },
-                    {
-                        id   : 'tooltip',
-                        title: 'Tooltip',
-                        type : 'item',
-                        url  : '/angular-material-elements/tooltip'
-                    }
-                ]
-            },
-            {
-                id      : 'data-table',
-                title   : 'Data table',
-                type    : 'collapsable',
-                icon    : 'layers',
-                children: [
-                    {
-                        id   : 'paginator',
-                        title: 'Paginator',
-                        type : 'item',
-                        url  : '/angular-material-elements/paginator'
-                    },
-                    {
-                        id   : 'sort-header',
-                        title: 'Sort header',
-                        type : 'item',
-                        url  : '/angular-material-elements/sort-header'
-                    },
-                    {
-                        id   : 'table',
-                        title: 'Table',
-                        type : 'item',
-                        url  : '/angular-material-elements/table'
-                    }
-                ]
-            }
-        ]
-    },
    {
        id      : 'documentation',
        title   : 'Documentation',
@@ -869,7 +604,7 @@ export const navigation: FuseNavigation[] = [
                icon : 'update',
                url  : '/documentation/changelog',
                badge: {
-                    title: '8.1.0',
+                    title: '10.0.0',
                    bg   : '#EC0C8E',
                    fg   : '#FFFFFF'
                }
--- a/src/app/store/reducers/index.ts
+++ b/src/app/store/reducers/index.ts
@@ -1,6 +1,7 @@
 import { ActivatedRouteSnapshot, RouterStateSnapshot, Params } from '@angular/router';
 import { createFeatureSelector, ActionReducerMap } from '@ngrx/store';
 import * as fromRouter from '@ngrx/router-store';
+import { Injectable } from "@angular/core";

 export interface RouterStateUrl
 {
@@ -20,6 +21,7 @@ export const reducers: ActionReducerMap<State> = {

 export const getRouterState = createFeatureSelector<fromRouter.RouterReducerState<RouterStateUrl>>('routerReducer');

+@Injectable()
 export class CustomSerializer implements fromRouter.RouterStateSerializer<RouterStateUrl>
 {
    serialize(routerState: RouterStateSnapshot): RouterStateUrl
--- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.css
+++ b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.css
@@ -1,9 +0,0 @@
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
-}
--- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
+++ b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
@@ -1,10 +0,0 @@
-<form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
-    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{option}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
@@ -1,31 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {map, startWith} from 'rxjs/operators';
-
-/**
- * @title Highlight the first autocomplete option
- */
-@Component({
-  selector: 'autocomplete-auto-active-first-option-example',
-  templateUrl: 'autocomplete-auto-active-first-option-example.html',
-  styleUrls: ['autocomplete-auto-active-first-option-example.css'],
-})
-export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
-  myControl = new FormControl();
-  options: string[] = ['One', 'Two', 'Three'];
-  filteredOptions: Observable<string[]>;
-
-  ngOnInit() {
-    this.filteredOptions = this.myControl.valueChanges.pipe(
-      startWith(''),
-      map(value => this._filter(value))
-    );
-  }
-
-  private _filter(value: string): string[] {
-    const filterValue = value.toLowerCase();
-
-    return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
-  }
-}
--- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css
+++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css
@@ -1,9 +0,0 @@
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
-}
--- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html
+++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html
@@ -1,10 +0,0 @@
-<form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
-    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{option.name}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
@@ -1,45 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {map, startWith} from 'rxjs/operators';
-
-export interface User {
-  name: string;
-}
-
-/**
- * @title Display value autocomplete
- */
-@Component({
-  selector: 'autocomplete-display-example',
-  templateUrl: 'autocomplete-display-example.html',
-  styleUrls: ['autocomplete-display-example.css'],
-})
-export class AutocompleteDisplayExample implements OnInit {
-  myControl = new FormControl();
-  options: User[] = [
-    {name: 'Mary'},
-    {name: 'Shelley'},
-    {name: 'Igor'}
-  ];
-  filteredOptions: Observable<User[]>;
-
-  ngOnInit() {
-    this.filteredOptions = this.myControl.valueChanges
-      .pipe(
-        startWith(''),
-        map(value => typeof value === 'string' ? value : value.name),
-        map(name => name ? this._filter(name) : this.options.slice())
-      );
-  }
-
-  displayFn(user?: User): string | undefined {
-    return user ? user.name : undefined;
-  }
-
-  private _filter(name: string): User[] {
-    const filterValue = name.toLowerCase();
-
-    return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
-  }
-}
--- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css
+++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css
@@ -1,9 +0,0 @@
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
-}
--- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html
+++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html
@@ -1,10 +0,0 @@
-<form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
-    <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{option}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
@@ -1,32 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {map, startWith} from 'rxjs/operators';
-
-/**
- * @title Filter autocomplete
- */
-@Component({
-  selector: 'autocomplete-filter-example',
-  templateUrl: 'autocomplete-filter-example.html',
-  styleUrls: ['autocomplete-filter-example.css'],
-})
-export class AutocompleteFilterExample implements OnInit {
-  myControl = new FormControl();
-  options: string[] = ['One', 'Two', 'Three'];
-  filteredOptions: Observable<string[]>;
-
-  ngOnInit() {
-    this.filteredOptions = this.myControl.valueChanges
-      .pipe(
-        startWith(''),
-        map(value => this._filter(value))
-      );
-  }
-
-  private _filter(value: string): string[] {
-    const filterValue = value.toLowerCase();
-
-    return this.options.filter(option => option.toLowerCase().includes(filterValue));
-  }
-}
--- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
+++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
@@ -1 +0,0 @@
-/** No CSS for this example */
--- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
+++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html
@@ -1,12 +0,0 @@
-<form [formGroup]="stateForm">
-  <mat-form-field>
-    <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup">
-      <mat-autocomplete #autoGroup="matAutocomplete">
-        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
-          <mat-option *ngFor="let name of group.names" [value]="name">
-            {{name}}
-          </mat-option>
-      </mat-optgroup>
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
@@ -1,113 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {startWith, map} from 'rxjs/operators';
-
-export interface StateGroup {
-  letter: string;
-  names: string[];
-}
-
-export const _filter = (opt: string[], value: string): string[] => {
-  const filterValue = value.toLowerCase();
-
-  return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0);
-};
-
-/**
- * @title Option groups autocomplete
- */
-@Component({
-  selector: 'autocomplete-optgroup-example',
-  templateUrl: './autocomplete-optgroup-example.html',
-  styleUrls: ['./autocomplete-optgroup-example.css'],
-})
-
-export class AutocompleteOptgroupExample implements OnInit {
-  stateForm: FormGroup = this._formBuilder.group({
-    stateGroup: '',
-  });
-
-  stateGroups: StateGroup[] = [{
-    letter: 'A',
-    names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
-  }, {
-    letter: 'C',
-    names: ['California', 'Colorado', 'Connecticut']
-  }, {
-    letter: 'D',
-    names: ['Delaware']
-  }, {
-    letter: 'F',
-    names: ['Florida']
-  }, {
-    letter: 'G',
-    names: ['Georgia']
-  }, {
-    letter: 'H',
-    names: ['Hawaii']
-  }, {
-    letter: 'I',
-    names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
-  }, {
-    letter: 'K',
-    names: ['Kansas', 'Kentucky']
-  }, {
-    letter: 'L',
-    names: ['Louisiana']
-  }, {
-    letter: 'M',
-    names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
-      'Minnesota', 'Mississippi', 'Missouri', 'Montana']
-  }, {
-    letter: 'N',
-    names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
-      'New Mexico', 'New York', 'North Carolina', 'North Dakota']
-  }, {
-    letter: 'O',
-    names: ['Ohio', 'Oklahoma', 'Oregon']
-  }, {
-    letter: 'P',
-    names: ['Pennsylvania']
-  }, {
-    letter: 'R',
-    names: ['Rhode Island']
-  }, {
-    letter: 'S',
-    names: ['South Carolina', 'South Dakota']
-  }, {
-    letter: 'T',
-    names: ['Tennessee', 'Texas']
-  }, {
-    letter: 'U',
-    names: ['Utah']
-  }, {
-    letter: 'V',
-    names: ['Vermont', 'Virginia']
-  }, {
-    letter: 'W',
-    names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
-  }];
-
-  stateGroupOptions: Observable<StateGroup[]>;
-
-  constructor(private _formBuilder: FormBuilder) {}
-
-  ngOnInit() {
-    this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
-      .pipe(
-        startWith(''),
-        map(value => this._filterGroup(value))
-      );
-  }
-
-  private _filterGroup(value: string): StateGroup[] {
-    if (value) {
-      return this.stateGroups
-        .map(group => ({letter: group.letter, names: _filter(group.names, value)}))
-        .filter(group => group.names.length > 0);
-    }
-
-    return this.stateGroups;
-  }
-}
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css
+++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css
@@ -1,19 +0,0 @@
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
-}
-
-.example-option-img {
-  vertical-align: middle;
-  margin-right: 8px;
-}
-
-[dir='rtl'] .example-option-img {
-  margin-right: 0;
-  margin-left: 8px;
-}
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html
@@ -1,20 +0,0 @@
-<form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
-    <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
-        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
-        <span>{{state.name}}</span> |
-        <small>Population: {{state.population}}</small>
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-
-  <br>
-
-  <mat-slide-toggle
-    [checked]="stateCtrl.disabled"
-    (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
-    Disable Input?
-  </mat-slide-toggle>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts
@@ -1,64 +0,0 @@
-import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {map, startWith} from 'rxjs/operators';
-
-export interface State {
-  flag: string;
-  name: string;
-  population: string;
-}
-
-/**
- * @title Autocomplete overview
- */
-@Component({
-  selector: 'autocomplete-overview-example',
-  templateUrl: 'autocomplete-overview-example.html',
-  styleUrls: ['autocomplete-overview-example.css'],
-})
-export class AutocompleteOverviewExample {
-  stateCtrl = new FormControl();
-  filteredStates: Observable<State[]>;
-
-  states: State[] = [
-    {
-      name: 'Arkansas',
-      population: '2.978M',
-      // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
-      flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
-    },
-    {
-      name: 'California',
-      population: '39.14M',
-      // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
-      flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
-    },
-    {
-      name: 'Florida',
-      population: '20.27M',
-      // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
-      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
-    },
-    {
-      name: 'Texas',
-      population: '27.47M',
-      // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
-      flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
-    }
-  ];
-
-  constructor() {
-    this.filteredStates = this.stateCtrl.valueChanges
-      .pipe(
-        startWith(''),
-        map(state => state ? this._filterStates(state) : this.states.slice())
-      );
-  }
-
-  private _filterStates(value: string): State[] {
-    const filterValue = value.toLowerCase();
-
-    return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
-  }
-}
--- a/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css
+++ b/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css
@@ -1,9 +0,0 @@
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
-}
--- a/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html
+++ b/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html
@@ -1,8 +0,0 @@
-<form class="example-form">
-  <input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
-  <mat-autocomplete #auto="matAutocomplete">
-    <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
-      {{street}}
-    </mat-option>
-  </mat-autocomplete>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts
@@ -1,34 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {Observable} from 'rxjs';
-import {startWith, map} from 'rxjs/operators';
-
-/**
- * @title Plain input autocomplete
- */
-@Component({
-  selector: 'autocomplete-plain-input-example',
-  templateUrl: 'autocomplete-plain-input-example.html',
-  styleUrls: ['autocomplete-plain-input-example.css'],
-})
-export class PlainInputAutocompleteExample implements OnInit {
-  control = new FormControl();
-  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
-  filteredStreets: Observable<string[]>;
-
-  ngOnInit() {
-    this.filteredStreets = this.control.valueChanges.pipe(
-      startWith(''),
-      map(value => this._filter(value))
-    );
-  }
-
-  private _filter(value: string): string[] {
-    const filterValue = this._normalizeValue(value);
-    return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
-  }
-
-  private _normalizeValue(value: string): string {
-    return value.toLowerCase().replace(/\s/g, '');
-  }
-}
--- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css
+++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css
@@ -1,9 +0,0 @@
-.example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
-}
-
-.example-full-width {
-  width: 100%;
-}
--- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html
+++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html
@@ -1,10 +0,0 @@
-<form class="example-form">
-  <mat-form-field class="example-full-width">
-    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
-    <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of options" [value]="option">
-        {{option}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
--- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts
@@ -1,15 +0,0 @@
-import {Component} from '@angular/core';
-import {FormControl} from '@angular/forms';
-
-/**
- * @title Simple autocomplete
- */
-@Component({
-  selector: 'autocomplete-simple-example',
-  templateUrl: 'autocomplete-simple-example.html',
-  styleUrls: ['autocomplete-simple-example.css'],
-})
-export class AutocompleteSimpleExample {
-  myControl = new FormControl();
-  options: string[] = ['One', 'Two', 'Three'];
-}
--- a/src/assets/angular-material-examples/badge-overview/badge-overview-example.css
+++ b/src/assets/angular-material-examples/badge-overview/badge-overview-example.css
@@ -1 +0,0 @@
-/** No CSS for this example */
--- a/src/assets/angular-material-examples/badge-overview/badge-overview-example.html
+++ b/src/assets/angular-material-examples/badge-overview/badge-overview-example.html
@@ -1,21 +0,0 @@
-<p>
-  <span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
-</p>
-
-<p>
-  Button with a badge on the left
-  <button mat-raised-button color="primary"
-      matBadge="8" matBadgePosition="before" matBadgeColor="accent">
-    Action
-  </button>
-</p>
-
-<p>
-  Icon with a badge
-  <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
-    <!-- Include text description of the icon's meaning for screen-readers -->
-    <span class="cdk-visually-hidden">
-      Example with a home icon with overlaid badge showing the number 15
-    </span>
-</p>
-
--- a/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts
+++ b/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Badge overview
- */
-@Component({
-  selector: 'badge-overview-example',
-  templateUrl: 'badge-overview-example.html',
-  styleUrls: ['badge-overview-example.css'],
-})
-export class BadgeOverviewExample {}
--- a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example-sheet.html
+++ b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example-sheet.html
@@ -1,21 +0,0 @@
-<mat-nav-list>
-  <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Keep</span>
-    <span mat-line>Add to a note</span>
-  </a>
-
-  <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Docs</span>
-    <span mat-line>Embed in a document</span>
-  </a>
-
-  <a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Plus</span>
-    <span mat-line>Share with your friends</span>
-  </a>
-
-  <a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
-    <span mat-line>Google Hangouts</span>
-    <span mat-line>Show to your coworkers</span>
-  </a>
-</mat-nav-list>
--- a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css
+++ b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css
@@ -1 +0,0 @@
-/** No CSS for this example */
--- a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html
+++ b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html
@@ -1,3 +0,0 @@
-<p>You have received a file called "cat-picture.jpeg".</p>
-
-<button mat-raised-button (click)="openBottomSheet()">Open file</button>
--- a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts
+++ b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts
@@ -1,31 +0,0 @@
-import {Component} from '@angular/core';
-import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
-
-/**
- * @title Bottom Sheet Overview
- */
-@Component({
-  selector: 'bottom-sheet-overview-example',
-  templateUrl: 'bottom-sheet-overview-example.html',
-  styleUrls: ['bottom-sheet-overview-example.css'],
-})
-export class BottomSheetOverviewExample {
-  constructor(private _bottomSheet: MatBottomSheet) {}
-
-  openBottomSheet(): void {
-    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
-  }
-}
-
-@Component({
-  selector: 'bottom-sheet-overview-example-sheet',
-  templateUrl: 'bottom-sheet-overview-example-sheet.html',
-})
-export class BottomSheetOverviewExampleSheet {
-  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
-
-  openLink(event: MouseEvent): void {
-    this._bottomSheetRef.dismiss();
-    event.preventDefault();
-  }
-}
--- a/src/assets/angular-material-examples/button-overview/button-overview-example.css
+++ b/src/assets/angular-material-examples/button-overview/button-overview-example.css
@@ -1 +0,0 @@
-/** No CSS for this example */
--- a/src/assets/angular-material-examples/button-overview/button-overview-example.html
+++ b/src/assets/angular-material-examples/button-overview/button-overview-example.html
@@ -1 +0,0 @@
-<button mat-button>Click me!</button>
--- a/src/assets/angular-material-examples/button-overview/button-overview-example.ts
+++ b/src/assets/angular-material-examples/button-overview/button-overview-example.ts
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Basic buttons
- */
-@Component({
-  selector: 'button-overview-example',
-  templateUrl: 'button-overview-example.html',
-  styleUrls: ['button-overview-example.css'],
-})
-export class ButtonOverviewExample {}
--- a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css
+++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css
@@ -1,3 +0,0 @@
-mat-button-toggle-group {
-  margin-left: 12px;
-}
--- a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.html
+++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.html
@@ -1,17 +0,0 @@
-<p>
-  Default appearance:
-  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-    <mat-button-toggle value="bold">Bold</mat-button-toggle>
-    <mat-button-toggle value="italic">Italic</mat-button-toggle>
-    <mat-button-toggle value="underline">Underline</mat-button-toggle>
-  </mat-button-toggle-group>
-</p>
-
-<p>
-  Legacy appearance:
-  <mat-button-toggle-group appearance="legacy" name="fontStyle" aria-label="Font Style">
-    <mat-button-toggle value="bold">Bold</mat-button-toggle>
-    <mat-button-toggle value="italic">Italic</mat-button-toggle>
-    <mat-button-toggle value="underline">Underline</mat-button-toggle>
-  </mat-button-toggle-group>
-</p>
--- a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.ts
+++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.ts
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Button toggle appearance
- */
-@Component({
-  selector: 'button-toggle-appearance-example',
-  templateUrl: 'button-toggle-appearance-example.html',
-  styleUrls: ['button-toggle-appearance-example.css'],
-})
-export class ButtonToggleAppearanceExample {}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sercan	e5ce782c3b	Angular 10 compatibility update	2020-07-23 15:15:42 +03:00
sercan	137b728f95	(Navigation) Fix: Navigation items cannot be updated on the fly	2020-07-23 13:32:01 +03:00
sercan	9bc4f49ab2	Merge branch 'master' of https://github.com/withinpixels/fuse-angular	2020-02-15 11:12:10 +03:00
Sercan Yemen	b35e24815f	Merge pull request #130 from XGNPreTender/patch-1 Update package.json	2020-02-15 11:11:10 +03:00
Rob van der Werf	b8683c2790	Update package.json See https://angular.io/guide/ivy#speeding-up-ngcc-compilation	2020-02-14 12:59:55 +01:00
sercan	2752cd7a45	(Contacts) Reset the search filter when component destroyed to ensure the search will reset on route changes	2020-02-13 11:21:21 +03:00
sercan	f56c989563	Updated to Angular v9 stable Updated to Angular Material v9 stable	2020-02-07 08:50:13 +03:00
sercan	54dd7837ec	Updated to Angular 9.0.0 Removed Angular Material docs and added a link to the official docs	2020-02-03 14:18:21 +03:00
sercan	007739c356	(FuseNavigation) Fixed: Translations are not being applied	2019-12-16 08:21:37 +03:00
sercan	116721dd33	Updated Angular to 8.1.2, Angular Material to 8.1.1 and updated various other packages Fixed: Fuse Navigation collapsable items don't collapse/expand correctly after certain level if used more than once within the same group Fixed: Better dark mode support for Calendar App	2019-07-20 13:46:35 +03:00
sercan	b2f56fcd12	Disabled Angular compiler checks to disable the warnings until we fix them	2019-07-04 21:54:51 +03:00