Updated to Angular 9.0.0

Removed Angular Material docs and added a link to the official docs

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",
@@ -55,14 +56,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",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse",
-    "version": "8.1.2",
+    "version": "9.0.0",
     "license": "https://themeforest.net/licenses/terms/regular",
     "scripts": {
         "ng": "ng",
@@ -18,71 +18,71 @@
     },
     "private": true,
     "dependencies": {
-        "@agm/core": "1.0.0-beta.7",
+        "@agm/core": "1.1.0",
-        "@angular/animations": "8.1.2",
+        "@angular/animations": "9.0.0-rc.13",
-        "@angular/cdk": "8.1.1",
+        "@angular/cdk": "9.0.0-rc.9",
-        "@angular/common": "8.1.2",
+        "@angular/common": "9.0.0-rc.13",
-        "@angular/compiler": "8.1.2",
+        "@angular/compiler": "9.0.0-rc.13",
-        "@angular/core": "8.1.2",
+        "@angular/core": "9.0.0-rc.13",
-        "@angular/flex-layout": "8.0.0-beta.26",
+        "@angular/flex-layout": "9.0.0-beta.28",
-        "@angular/forms": "8.1.2",
+        "@angular/forms": "9.0.0-rc.13",
-        "@angular/material": "8.1.1",
+        "@angular/material": "9.0.0-rc.9",
-        "@angular/material-moment-adapter": "8.1.1",
+        "@angular/material-moment-adapter": "9.0.0-rc.9",
-        "@angular/platform-browser": "8.1.2",
+        "@angular/platform-browser": "9.0.0-rc.13",
-        "@angular/platform-browser-dynamic": "8.1.2",
+        "@angular/platform-browser-dynamic": "9.0.0-rc.13",
-        "@angular/router": "8.1.2",
+        "@angular/router": "9.0.0-rc.13",
-        "@ngrx/effects": "8.1.0",
+        "@ngrx/effects": "8.6.0",
-        "@ngrx/router-store": "8.1.0",
+        "@ngrx/router-store": "8.6.0",
-        "@ngrx/store": "8.1.0",
+        "@ngrx/store": "8.6.0",
-        "@ngrx/store-devtools": "8.1.0",
+        "@ngrx/store-devtools": "8.6.0",
         "@ngx-translate/core": "11.0.1",
         "@swimlane/dragula": "3.8.0",
-        "@swimlane/ngx-charts": "12.0.1",
+        "@swimlane/ngx-charts": "13.0.2",
-        "@swimlane/ngx-datatable": "15.0.2",
+        "@swimlane/ngx-datatable": "16.0.3",
-        "@swimlane/ngx-dnd": "8.0.0",
+        "@swimlane/ngx-dnd": "8.1.0",
         "@types/prismjs": "1.16.0",
-        "angular-calendar": "0.27.13",
+        "angular-calendar": "0.28.2",
-        "angular-in-memory-web-api": "0.8.0",
+        "angular-in-memory-web-api": "0.9.0",
-        "chart.js": "2.8.0",
+        "chart.js": "2.9.3",
         "classlist.js": "1.1.20150312",
-        "d3": "5.9.7",
+        "d3": "5.15.0",
-        "date-fns": "1.30.1",
+        "date-fns": "2.9.0",
         "hammerjs": "2.0.8",
         "lodash": "4.17.15",
         "moment": "2.24.0",
         "ng2-charts": "2.3.0",
         "ngrx-store-freeze": "0.2.4",
-        "ngx-color-picker": "8.1.0",
+        "ngx-color-picker": "8.2.0",
-        "ngx-cookie-service": "2.2.0",
+        "ngx-cookie-service": "2.3.0",
-        "perfect-scrollbar": "1.4.0",
+        "perfect-scrollbar": "1.5.0",
-        "prismjs": "1.16.0",
+        "prismjs": "1.19.0",
-        "rxjs": "6.5.2",
+        "rxjs": "6.5.4",
+        "tslib": "1.10.0",
         "web-animations-js": "2.3.2",
-        "zone.js": "0.9.1"
+        "zone.js": "0.10.2"
     },
     "devDependencies": {
-        "@angular/cli": "8.1.2",
+        "@angular/cli": "9.0.0-rc.12",
-        "@angular/compiler-cli": "8.1.2",
+        "@angular/compiler-cli": "9.0.0-rc.13",
-        "@angular/language-service": "8.1.2",
+        "@angular/language-service": "9.0.0-rc.13",
-        "@angular-devkit/build-angular": "0.801.2",
+        "@angular-devkit/build-angular": "0.900.0-rc.12",
         "@angularclass/hmr": "2.1.3",
-        "@types/jasmine": "3.3.14",
+        "@types/jasmine": "3.5.2",
-        "@types/jasminewd2": "2.0.6",
+        "@types/jasminewd2": "2.0.8",
-        "@types/lodash": "4.14.136",
+        "@types/lodash": "4.14.149",
-        "@types/node": "8.9.5",
+        "@types/node": "12.12.6",
-        "codelyzer": "5.1.0",
+        "codelyzer": "5.2.1",
-        "jasmine-core": "3.4.0",
+        "jasmine-core": "3.5.0",
         "jasmine-spec-reporter": "4.2.1",
-        "karma": "4.1.0",
+        "karma": "4.3.0",
-        "karma-chrome-launcher": "2.2.0",
+        "karma-chrome-launcher": "3.1.0",
-        "karma-coverage-istanbul-reporter": "2.0.5",
+        "karma-coverage-istanbul-reporter": "2.1.1",
         "karma-jasmine": "2.0.1",
-        "karma-jasmine-html-reporter": "1.4.2",
+        "karma-jasmine-html-reporter": "1.5.1",
-        "protractor": "5.4.2",
+        "protractor": "5.4.3",
-        "ts-node": "7.0.1",
+        "ts-node": "8.3.0",
-        "tslib": "1.10.0",
+        "tslint": "5.18.0",
-        "tslint": "5.15.0",
+        "typescript": "3.7.5",
-        "typescript": "3.4.5",
+        "webpack-bundle-analyzer": "3.6.0"
-        "webpack-bundle-analyzer": "3.3.2"
     }
 }

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

src/@fuse/fuse.module.ts

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

src/@fuse/scss/core.scss

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

src/app/app.module.ts

@@ -24,23 +24,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'
+        loadChildren: () => import('./main/documentation/documentation.module').then(m => m.DocumentationModule)
-    },
-    {
-        path        : 'angular-material-elements',
-        loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
     },
     {
         path      : '**',

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

src/app/fake-db/calendar.ts

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

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

@@ -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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,152 +0,0 @@
-import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { MatSnackBar } from '@angular/material/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});
-        }
-    }
-}

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
-{
-}

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

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

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

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

src/app/main/apps/calendar/calendar.component.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);
     }
 

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

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

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

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

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

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>

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>

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>

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;
 
     /**

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

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(

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;
 
     /**

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;
 
     /**

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

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

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>

src/app/main/documentation/changelog/changelog.component.html

@@ -19,6 +19,31 @@
 
         <div class="changelog">
 
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ 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                                                                                      -->
             <!-- --------------------------------------------------------------------------------------------- -->

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

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>
 

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>

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

@@ -0,0 +1,7 @@
+:host {
+
+    .content {
+        max-width: 1200px;
+    }
+
+}

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()
+    {
+    }
+}

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
+{
+}

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"

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,

src/app/navigation/navigation.ts

@@ -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.2',
+                    title: '9.0.0',
                     bg   : '#EC0C8E',
                     fg   : '#FFFFFF'
                 }

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

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%;
-}

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>

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

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%;
-}

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>

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

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%;
-}

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>

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

src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css

@@ -1 +0,0 @@
-/** No CSS for this example */

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>

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

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

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>

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

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%;
-}

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>

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

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%;
-}

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>

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

src/assets/angular-material-examples/badge-overview/badge-overview-example.css

@@ -1 +0,0 @@
-/** No CSS for this example */

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

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 {}

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>

src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css

@@ -1 +0,0 @@
-/** No CSS for this example */

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>

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

src/assets/angular-material-examples/button-overview/button-overview-example.css

@@ -1 +0,0 @@
-/** No CSS for this example */

src/assets/angular-material-examples/button-overview/button-overview-example.html

@@ -1 +0,0 @@
-<button mat-button>Click me!</button>

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 {}

src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css

@@ -1,3 +0,0 @@
-mat-button-toggle-group {
-  margin-left: 12px;
-}

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>

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 {}

src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css

@@ -1,3 +0,0 @@
-.example-selected-value {
-  margin: 15px 0;
-}

src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html

@@ -1,15 +0,0 @@
-<mat-button-toggle-group #group="matButtonToggleGroup">
-  <mat-button-toggle value="left" aria-label="Text align left">
-    <mat-icon>format_align_left</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="center" aria-label="Text align center">
-    <mat-icon>format_align_center</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="right" aria-label="Text align right">
-    <mat-icon>format_align_right</mat-icon>
-  </mat-button-toggle>
-  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
-    <mat-icon>format_align_justify</mat-icon>
-  </mat-button-toggle>
-</mat-button-toggle-group>
-<div class="example-selected-value">Selected value: {{group.value}}</div>

src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Exclusive selection
- */
-@Component({
-  selector: 'button-toggle-exclusive-example',
-  templateUrl: 'button-toggle-exclusive-example.html',
-  styleUrls: ['button-toggle-exclusive-example.css'],
-})
-export class ButtonToggleExclusiveExample {}

src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css

@@ -1 +0,0 @@
-/** No CSS for this example */

src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html

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

src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Basic button-toggles
- */
-@Component({
-  selector: 'button-toggle-overview-example',
-  templateUrl: 'button-toggle-overview-example.html',
-  styleUrls: ['button-toggle-overview-example.css'],
-})
-export class ButtonToggleOverviewExample {}

src/assets/angular-material-examples/button-types/button-types-example.css

@@ -1,4 +0,0 @@
-.example-button-row button,
-.example-button-row a {
-  margin-right: 8px;
-}

src/assets/angular-material-examples/button-types/button-types-example.html

@@ -1,84 +0,0 @@
-<h3>Basic Buttons</h3>
-<div class="example-button-row">
-  <button mat-button>Basic</button>
-  <button mat-button color="primary">Primary</button>
-  <button mat-button color="accent">Accent</button>
-  <button mat-button color="warn">Warn</button>
-  <button mat-button disabled>Disabled</button>
-  <a mat-button routerLink=".">Link</a>
-</div>
-
-<h3>Raised Buttons</h3>
-<div class="example-button-row">
-  <button mat-raised-button>Basic</button>
-  <button mat-raised-button color="primary">Primary</button>
-  <button mat-raised-button color="accent">Accent</button>
-  <button mat-raised-button color="warn">Warn</button>
-  <button mat-raised-button disabled>Disabled</button>
-  <a mat-raised-button routerLink=".">Link</a>
-</div>
-
-<h3>Stroked Buttons</h3>
-<div class="example-button-row">
-  <button mat-stroked-button>Basic</button>
-  <button mat-stroked-button color="primary">Primary</button>
-  <button mat-stroked-button color="accent">Accent</button>
-  <button mat-stroked-button color="warn">Warn</button>
-  <button mat-stroked-button disabled>Disabled</button>
-  <a mat-stroked-button routerLink=".">Link</a>
-</div>
-
-<h3>Flat Buttons</h3>
-<div class="example-button-row">
-  <button mat-flat-button>Basic</button>
-  <button mat-flat-button color="primary">Primary</button>
-  <button mat-flat-button color="accent">Accent</button>
-  <button mat-flat-button color="warn">Warn</button>
-  <button mat-flat-button disabled>Disabled</button>
-  <a mat-flat-button routerLink=".">Link</a>
-</div>
-
-<h3>Icon Buttons</h3>
-<div class="example-button-row">
-  <button mat-icon-button aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-</div>
-
-<h3>Fab Buttons</h3>
-<div class="example-button-row">
-  <button mat-fab>Basic</button>
-  <button mat-fab color="primary">Primary</button>
-  <button mat-fab color="accent">Accent</button>
-  <button mat-fab color="warn">Warn</button>
-  <button mat-fab disabled>Disabled</button>
-  <button mat-fab aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <a mat-fab routerLink=".">Link</a>
-</div>
-
-<h3>Mini Fab Buttons</h3>
-<div class="example-button-row">
-  <button mat-mini-fab>Basic</button>
-  <button mat-mini-fab color="primary">Primary</button>
-  <button mat-mini-fab color="accent">Accent</button>
-  <button mat-mini-fab color="warn">Warn</button>
-  <button mat-mini-fab disabled>Disabled</button>
-  <button mat-mini-fab aria-label="Example icon-button with a heart icon">
-    <mat-icon>favorite</mat-icon>
-  </button>
-  <a mat-mini-fab routerLink=".">Link</a>
-</div>

src/assets/angular-material-examples/button-types/button-types-example.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Button varieties
- */
-@Component({
-  selector: 'button-types-example',
-  templateUrl: 'button-types-example.html',
-  styleUrls: ['button-types-example.css'],
-})
-export class ButtonTypesExample {}

src/assets/angular-material-examples/card-fancy/card-fancy-example.css

@@ -1,8 +0,0 @@
-.example-card {
-  max-width: 400px;
-}
-
-.example-header-image {
-  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
-  background-size: cover;
-}

src/assets/angular-material-examples/card-fancy/card-fancy-example.html

@@ -1,19 +0,0 @@
-<mat-card class="example-card">
-  <mat-card-header>
-    <div mat-card-avatar class="example-header-image"></div>
-    <mat-card-title>Shiba Inu</mat-card-title>
-    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-  </mat-card-header>
-  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
-  <mat-card-content>
-    <p>
-      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
-      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
-      bred for hunting.
-    </p>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-button>LIKE</button>
-    <button mat-button>SHARE</button>
-  </mat-card-actions>
-</mat-card>

src/assets/angular-material-examples/card-fancy/card-fancy-example.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Card with multiple sections
- */
-@Component({
-  selector: 'card-fancy-example',
-  templateUrl: 'card-fancy-example.html',
-  styleUrls: ['card-fancy-example.css'],
-})
-export class CardFancyExample {}

src/assets/angular-material-examples/card-overview/card-overview-example.css

@@ -1 +0,0 @@
-/** No CSS for this example */

src/assets/angular-material-examples/card-overview/card-overview-example.html

@@ -1 +0,0 @@
-<mat-card>Simple card</mat-card>

src/assets/angular-material-examples/card-overview/card-overview-example.ts

@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Basic cards
- */
-@Component({
-  selector: 'card-overview-example',
-  templateUrl: 'card-overview-example.html',
-  styleUrls: ['card-overview-example.css'],
-})
-export class CardOverviewExample {}

src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css

@@ -1,14 +0,0 @@
-.example-h2 {
-  margin: 10px;
-}
-
-.example-section {
-  display: flex;
-  align-content: center;
-  align-items: center;
-  height: 60px;
-}
-
-.example-margin {
-  margin: 0 10px;
-}

src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html

@@ -1,40 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <h2 class="example-h2">Checkbox configuration</h2>
-
-    <section class="example-section">
-      <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
-      <mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
-    </section>
-
-    <section class="example-section">
-      <label class="example-margin">Align:</label>
-      <mat-radio-group [(ngModel)]="labelPosition">
-        <mat-radio-button class="example-margin" value="after">After</mat-radio-button>
-        <mat-radio-button class="example-margin" value="before">Before</mat-radio-button>
-      </mat-radio-group>
-    </section>
-
-    <section class="example-section">
-      <mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
-    </section>
-  </mat-card-content>
-</mat-card>
-
-<mat-card class="result">
-  <mat-card-content>
-    <h2 class="example-h2">Result</h2>
-
-    <section class="example-section">
-      <mat-checkbox
-          class="example-margin"
-          [(ngModel)]="checked"
-          [(indeterminate)]="indeterminate"
-          [labelPosition]="labelPosition"
-          [disabled]="disabled">
-        I'm a checkbox
-      </mat-checkbox>
-    </section>
-  </mat-card-content>
-</mat-card>
-

src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts

@@ -1,16 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Configurable checkbox
- */
-@Component({
-  selector: 'checkbox-configurable-example',
-  templateUrl: 'checkbox-configurable-example.html',
-  styleUrls: ['checkbox-configurable-example.css'],
-})
-export class CheckboxConfigurableExample {
-  checked = false;
-  indeterminate = false;
-  labelPosition = 'after';
-  disabled = false;
-}