removed fake-db thingy

+ Removed unnecessary dev dependencies and updated couple of them

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "",
   "scripts": {
     "ng": "ng",
@@ -15,49 +15,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "4.4.3",
-    "@angular/cdk": "2.0.0-beta.11",
-    "@angular/common": "4.4.3",
-    "@angular/compiler": "4.4.3",
-    "@angular/core": "4.4.3",
+    "@agm/core": "1.0.0-beta.1",
+    "@angular/animations": "4.4.5",
+    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/common": "4.4.5",
+    "@angular/compiler": "4.4.5",
+    "@angular/core": "4.4.5",
     "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.4.3",
-    "@angular/http": "4.4.3",
-    "@angular/material": "2.0.0-beta.11",
-    "@angular/platform-browser": "4.4.3",
-    "@angular/platform-browser-dynamic": "4.4.3",
-    "@angular/router": "4.4.3",
+    "@angular/forms": "4.4.5",
+    "@angular/http": "4.4.5",
+    "@angular/material": "2.0.0-beta.12",
+    "@angular/platform-browser": "4.4.5",
+    "@angular/platform-browser-dynamic": "4.4.5",
+    "@angular/router": "4.4.5",
     "@swimlane/ngx-charts": "6.0.2",
     "@swimlane/ngx-datatable": "9.3.1",
     "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.19.0",
-    "angular-in-memory-web-api": "0.4.6",
+    "angular-calendar": "0.21.2",
+    "angular-in-memory-web-api": "0.5.0",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
+    "core-js": "2.5.1",
     "d3": "4.10.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
-    "md2": "0.0.28",
-    "moment": "2.18.1",
-    "ngx-color-picker": "4.3.1",
-    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.6.2",
-    "perfect-scrollbar": "0.8.1",
+    "moment": "2.19.1",
+    "ngx-color-picker": "4.4.0",
+    "ngx-cookie-service": "1.0.9",
+    "perfect-scrollbar": "1.0.3",
     "rxjs": "5.4.3",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
+    "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.2",
-    "@angular/compiler-cli": "4.4.3",
-    "@angular/language-service": "4.4.3",
+    "@angular/cli": "1.4.7",
+    "@angular/compiler-cli": "4.4.5",
+    "@angular/language-service": "4.4.5",
     "@angularclass/hmr": "2.1.3",
-    "@ngtools/webpack": "1.7.1",
     "@types/jasmine": "2.6.0",
     "@types/jasminewd2": "2.0.2",
     "@types/node": "6.0.88",
-    "codelyzer": "3.0.1",
+    "codelyzer": "3.2.0",
     "jasmine-core": "2.6.2",
     "jasmine-spec-reporter": "4.1.0",
     "karma": "1.7.1",
@@ -66,10 +64,9 @@
     "karma-coverage-istanbul-reporter": "1.2.1",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
-    "node-sass": "4.5.3",
     "protractor": "5.1.2",
-    "ts-node": "3.0.4",
-    "tslint": "5.3.2",
+    "ts-node": "3.2.0",
+    "tslint": "5.7.0",
     "typescript": "2.3.3"
   }
 }

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -1,6 +1,6 @@
-<h1 md-dialog-title>Confirm</h1>
-<div md-dialog-content>{{confirmMessage}}</div>
-<div md-dialog-actions class="pt-24">
-    <button md-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
-    <button md-button (click)="dialogRef.close(false)">Cancel</button>
+<h1 matDialogTitle>Confirm</h1>
+<div mat-dialog-content>{{confirmMessage}}</div>
+<div mat-dialog-actions class="pt-24">
+    <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
+    <button mat-button (click)="dialogRef.close(false)">Cancel</button>
 </div>

src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MdDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material';
 
 @Component({
     selector   : 'fuse-confirm-dialog',
@@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit
 {
     public confirmMessage: string;
 
-    constructor(public dialogRef: MdDialogRef<FuseConfirmDialogComponent>)
+    constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
     {
     }
 

src/app/core/components/copier/copier.service.ts

@@ -6,55 +6,60 @@
  *
  * Both released under MIT license - © Zeno Rocha
  */
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
-export class CopierService {
+export class CopierService
+{
 
-  private textarea: HTMLTextAreaElement;
+    private textarea: HTMLTextAreaElement;
 
-  /** Copy the text value to the clipboard. */
-  copyText(text: string): boolean {
-    this.createTextareaAndSelect(text);
+    /** Copy the text value to the clipboard. */
+    copyText(text: string): boolean
+    {
+        this.createTextareaAndSelect(text);
 
-    const copySuccessful = document.execCommand('copy');
-    this.removeFake();
+        const copySuccessful = document.execCommand('copy');
+        this.removeFake();
 
-    return copySuccessful;
-  }
-
-  /**
-   * Creates a hidden textarea element, sets its value from `text` property,
-   * and makes a selection on it.
-   */
-  private createTextareaAndSelect(text: string) {
-    // Create a fake element to hold the contents to copy
-    this.textarea = document.createElement('textarea');
-
-    // Prevent zooming on iOS
-    this.textarea.style.fontSize = '12pt';
-
-    // Hide the element
-    this.textarea.classList.add('cdk-visually-hidden');
-
-    // Move element to the same position vertically
-    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
-    this.textarea.style.top = yPosition + 'px';
-
-    this.textarea.setAttribute('readonly', '');
-    this.textarea.value = text;
-
-    document.body.appendChild(this.textarea);
-
-    this.textarea.select();
-    this.textarea.setSelectionRange(0, this.textarea.value.length);
-  }
-
-  /** Remove the text area from the DOM. */
-  private removeFake() {
-    if (this.textarea) {
-      document.body.removeChild(this.textarea);
-      this.textarea = null;
+        return copySuccessful;
+    }
+
+    /**
+     * Creates a hidden textarea element, sets its value from `text` property,
+     * and makes a selection on it.
+     */
+    private createTextareaAndSelect(text: string)
+    {
+        // Create a fake element to hold the contents to copy
+        this.textarea = document.createElement('textarea');
+
+        // Prevent zooming on iOS
+        this.textarea.style.fontSize = '12pt';
+
+        // Hide the element
+        this.textarea.classList.add('cdk-visually-hidden');
+
+        // Move element to the same position vertically
+        const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+        this.textarea.style.top = yPosition + 'px';
+
+        this.textarea.setAttribute('readonly', '');
+        this.textarea.value = text;
+
+        document.body.appendChild(this.textarea);
+
+        this.textarea.select();
+        this.textarea.setSelectionRange(0, this.textarea.value.length);
+    }
+
+    /** Remove the text area from the DOM. */
+    private removeFake()
+    {
+        if ( this.textarea )
+        {
+            document.body.removeChild(this.textarea);
+            this.textarea = null;
+        }
     }
-  }
 }

src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html

@@ -1,100 +1,100 @@
 <div class="demo-sidenav">
-    <md-list>
-        <h3 md-subheader>Sidenav Demo</h3>
+    <mat-list>
+        <h3 matSubheader>Sidenav Demo</h3>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 1</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 2</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 3</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 4</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 5</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 6</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 7</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 8</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 9</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 10</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 11</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 12</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 13</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 14</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 15</span>
-        </md-list-item>
+        </mat-list-item>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
-        <md-list-item>
+        <mat-list-item>
             <span>Sidenav Item 16</span>
-        </md-list-item>
+        </mat-list-item>
 
-    </md-list>
+    </mat-list>
 </div>

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,23 +1,23 @@
-<button md-icon-button
+<button mat-icon-button
         type="button"
         class="mat-elevation-z1"
-        [mdMenuTriggerFor]="colorMenu"
+        [matMenuTriggerFor]="colorMenu"
         (onMenuOpen)="onMenuOpen()"
-        [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
-    <md-icon>palette</md-icon>
+        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
+    <mat-icon>palette</mat-icon>
 </button>
 
-<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
+<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
 
-    <header [ngClass]="selectedColor?.class || 'md-accent-bg'"
+    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
             class="mat-elevation-z4"
             fxLayout="row"
             fxLayoutAlign="space-between center">
 
-        <button md-icon-button
+        <button mat-icon-button
                 [style.visibility]="view==='hues'?'visible':'hidden'"
                 (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
-            <md-icon class="s-20">arrow_back</md-icon>
+            <mat-icon class="s-20">arrow_back</mat-icon>
         </button>
 
         <span *ngIf="selectedColor?.palette">
@@ -28,11 +28,11 @@
             Select Color
         </span>
 
-        <button md-icon-button
+        <button mat-icon-button
                 class="remove-color-button"
                 (click)="removeColor()"
                 aria-label="Remove Color">
-            <md-icon class="s-20">delete</md-icon>
+            <mat-icon class="s-20">delete</mat-icon>
         </button>
     </header>
 
@@ -47,10 +47,10 @@
                  fxLayoutAlign="start start"
                  class="colors" fusePerfectScrollbar>
                 <div class="color"
-                     [ngClass]="'md-'+color.key+'-bg'"
+                     [ngClass]="'mat-'+color.key+'-bg'"
                      *ngFor="let color of (colors | keys)"
                      (click)="$event.stopPropagation();selectPalette(color.key)"
-                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{color.key}}
                     </span>
@@ -67,16 +67,16 @@
                 <div class="color"
                      *ngFor="let hue of hues"
                      [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
-                     [ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
+                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
                      (click)="selectHue(hue)"
-                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{hue}}
                     </span>
-                    <md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
+                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
                 </div>
             </div>
         </div>
 
     </div>
-</md-menu>
+</mat-menu>

src/app/core/components/material-color-picker/material-color-picker.component.scss

@@ -11,7 +11,7 @@
             overflow: hidden;
             min-height: 258px;
             height: 308px;
-            background-color: #f7f7f7;
+            background-color: #F7F7F7;
 
             .view {
                 position: absolute;
@@ -39,7 +39,7 @@
                             font-size: 10px;
                         }
 
-                        md-icon {
+                        mat-icon {
                             position: absolute;
                             top: 2px;
                             right: 2px;

src/app/core/components/material-color-picker/material-color-picker.component.ts

@@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             {
                 this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
                 this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
-                this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
             }
             else
             {

src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html

@@ -1,7 +1,7 @@
-<a class="nav-link" md-ripple>
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<a class="nav-link" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 
 <div class="children" [ngClass]="{'open': isOpen}">

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html

@@ -1,6 +1,17 @@
-<a class="nav-link" md-ripple
-   [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
-</a>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

src/app/core/components/navigation/navigation.service.ts

@@ -19,6 +19,7 @@ export class FuseNavigationService
 
     /**
      * Get navigation model
+     *
      * @returns {any[]}
      */
     getNavigationModel()
@@ -28,19 +29,125 @@ export class FuseNavigationService
 
     /**
      * Set the navigation model
+     *
      * @param model
      */
     setNavigationModel(model)
     {
-        // console.log(model);
-
         this.navigationModel = model;
-
-        console.log(this.navigationModel);
-
         this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
+    /**
+     * Add new navigation item
+     * to the given location
+     */
+    addNavigationItem(location, item)
+    {
+        // Parse the location
+        const locationArr = location.split('.');
+
+        if ( locationArr.length === 0 )
+        {
+            return;
+        }
+
+        // Find the navigation item
+        const navItem = this.findNavigationItemById(locationArr);
+
+        // Act according to the item type
+        switch ( navItem.type )
+        {
+            case 'item':
+
+                // Create a children array
+                navItem.children = [];
+
+                // Push the item
+                navItem.children.push(item);
+
+                // Change the item type to collapsable
+                navItem.type = 'collapse';
+
+                break;
+
+            case 'collapse':
+
+                // Push the item
+                navItem.children.push(item);
+
+                break;
+
+            case 'group':
+
+                // Push the item
+                navItem.children.push(item);
+
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    /**
+     * Get navigation item from
+     * given location
+     *
+     * @param location
+     */
+    getNavigationItem(location)
+    {
+        // Parse the location
+        const locationArr = location.split('.');
+
+        if ( locationArr.length === 0 )
+        {
+            return;
+        }
+
+        // Find and return the navigation item
+        return this.findNavigationItemById(locationArr);
+    }
+
+    /**
+     * Find navigation item by location
+     *
+     * @param location
+     * @param navigation
+     */
+    findNavigationItemById(location, navigation?)
+    {
+        if ( !navigation )
+        {
+            navigation = this.navigationModel.model;
+        }
+
+        // Iterate through the given navigation
+        for ( const navItem of navigation )
+        {
+            // If the nav item id equals the first location...
+            if ( navItem.id === location[0] )
+            {
+                // If there is more location to look at...
+                if ( location.length > 1 )
+                {
+                    // Remove the first item of the location
+                    location.splice(0, 1);
+
+                    // Go nested...
+                    return this.findNavigationItemById(location, navItem.children);
+                }
+
+                // Otherwise just return the nav item
+                else
+                {
+                    return navItem;
+                }
+            }
+        }
+    }
+
     /**
      * Get flattened navigation array
      * @param navigationItems

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html

@@ -1,7 +1,7 @@
-<a class="nav-link" md-ripple (click)="toggleOpen($event)">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<a class="nav-link" matRipple (click)="toggleOpen($event)">
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">

src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html

@@ -1,6 +1,17 @@
-<a class="nav-link" md-ripple
-   [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
 </a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

src/app/core/components/search-bar/search-bar.component.html

@@ -1,20 +1,20 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
     <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
         <label for="fuse-search-bar-input">
-            <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
-                <md-icon class="s-24">search</md-icon>
+                <mat-icon class="s-24">search</mat-icon>
             </button>
             <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
+                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
             </span>-->
         </label>
 
         <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
 
-        <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
+        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
                 aria-label="Collapse Search Bar">
-            <md-icon class="s-24">close</md-icon>
+            <mat-icon class="s-24">close</mat-icon>
         </button>
 
     </div>

src/app/core/components/shortcuts/shortcuts.component.html

@@ -2,8 +2,8 @@
 
     <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
          fxHide fxShow.lt-md>
-        <button md-icon-button (click)="showMobileShortcutsPanel()">
-            <md-icon class="amber-600-fg">star</md-icon>
+        <button mat-icon-button (click)="showMobileShortcutsPanel()">
+            <mat-icon class="amber-600-fg">star</mat-icon>
         </button>
     </div>
 
@@ -16,8 +16,8 @@
                 <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
                      *ngFor="let shortcutItem of shortcutItems">
 
-                    <a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
+                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -25,64 +25,64 @@
 
                 </div>
 
-                <button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut"
+                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
                         (onMenuOpen)="onMenuOpen()">
-                    <md-icon class="amber-600-fg">star</md-icon>
+                    <mat-icon class="amber-600-fg">star</mat-icon>
                 </button>
 
             </div>
 
             <div class="shortcuts-mobile-close" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.lt-md>
-                <button md-icon-button (click)="hideMobileShortcutsPanel()">
-                    <md-icon>close</md-icon>
+                <button mat-icon-button (click)="hideMobileShortcutsPanel()">
+                    <mat-icon>close</mat-icon>
                 </button>
             </div>
 
         </div>
 
-        <md-menu #addMenu="mdMenu" class="w-240">
+        <mat-menu #addMenu="matMenu" class="w-240">
 
-            <md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
-                <input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
-            </md-input-container>
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+                <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
+            </mat-form-field>
 
-            <md-divider></md-divider>
-            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+            <mat-divider></mat-divider>
+            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
-                <md-list-item *ngFor="let shortcutItem of shortcutItems"
-                              (click)="toggleShortcut($event, shortcutItem)">
+                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
+                               (click)="toggleShortcut($event, shortcutItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{shortcutItem.title}}</p>
-                        <md-icon class="ml-8">star</md-icon>
+                        <p matLine fxFlex>{{shortcutItem.title}}</p>
+                        <mat-icon class="ml-8">star</mat-icon>
                     </div>
-                </md-list-item>
-                <md-list-item *ngIf="shortcutItems.length === 0">
+                </mat-list-item>
+                <mat-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
-                </md-list-item>
-            </md-nav-list>
+                </mat-list-item>
+            </mat-nav-list>
 
-            <md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
-                <md-list-item *ngFor="let navigationItem of filteredNavigationItems"
-                              (click)="toggleShortcut($event, navigationItem)">
+            <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+                <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
+                               (click)="toggleShortcut($event, navigationItem)">
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
+                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                             {{navigationItem.title.substr(0, 1).toUpperCase()}}
                         </span>
-                        <p md-line fxFlex>{{navigationItem.title}}</p>
-                        <md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
+                        <p matLine fxFlex>{{navigationItem.title}}</p>
+                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
                     </div>
-                </md-list-item>
-            </md-nav-list>
-        </md-menu>
+                </mat-list-item>
+            </mat-nav-list>
+        </mat-menu>
 
     </div>
 

src/app/core/components/theme-options/theme-options.component.html

@@ -1,50 +1,50 @@
-<button #openButton md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
-    <md-icon>settings</md-icon>
+<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
+    <mat-icon>settings</mat-icon>
 </button>
 
 <div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z8">
+<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
 
-    <button md-icon-button class="close-button" (click)="closeBar()">
-        <md-icon>close</md-icon>
+    <button mat-icon-button class="close-button" (click)="closeBar()">
+        <mat-icon>close</mat-icon>
     </button>
 
     <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
         <h3>Navigation:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="top">Top</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="left">Left</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="right">Right</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
+        </mat-radio-group>
 
         <h3 class="mt-24">Toolbar:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
+        </mat-radio-group>
 
         <h3 class="mt-24">Footer:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="below">Below</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="above">Above</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="none">None</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
+        </mat-radio-group>
 
         <h3 class="mt-24">Layout Mode:</h3>
-        <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
-                        fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
-            <md-radio-button class="mr-8 mb-8" value="boxed">Boxed</md-radio-button>
-            <md-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</md-radio-button>
-        </md-radio-group>
+        <mat-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+            <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
+            <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
+        </mat-radio-group>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
         <h3>Colors:</h3>
         <div class="colors">
@@ -69,30 +69,31 @@
 
         </div>
 
-        <md-divider></md-divider>
+        <mat-divider></mat-divider>
 
         <h3>Router Animation:</h3>
-        <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
-            <md-option value="none">
-                None
-            </md-option>
-            <md-option value="slideUp">
-                Slide up
-            </md-option>
-            <md-option value="slideDown">
-                Slide down
-            </md-option>
-            <md-option value="slideRight">
-                Slide right
-            </md-option>
-            <md-option value="slideLeft">
-                Slide left
-            </md-option>
-            <md-option value="fadeIn">
-                Fade in
-            </md-option>
-        </md-select>
-
+        <mat-form-field class="w-100-p">
+            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+                <mat-option value="none">
+                    None
+                </mat-option>
+                <mat-option value="slideUp">
+                    Slide up
+                </mat-option>
+                <mat-option value="slideDown">
+                    Slide down
+                </mat-option>
+                <mat-option value="slideRight">
+                    Slide right
+                </mat-option>
+                <mat-option value="slideLeft">
+                    Slide left
+                </mat-option>
+                <mat-option value="fadeIn">
+                    Fade in
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
     </div>
 
 </div>

src/app/core/components/theme-options/theme-options.component.scss

@@ -14,6 +14,7 @@
     display: block;
     right: 0;
     top: 160px;
+    z-index: 998;
 
     &.bar-closed .theme-options-panel {
         display: none;
@@ -48,7 +49,7 @@
             color: rgba(0, 0, 0, 0.54);
         }
 
-        .mat-divider{
+        .mat-divider {
             display: block !important;
             width: 100%;
             margin: 24px 0 16px 0;
@@ -102,7 +103,7 @@
         opacity: .75;
         z-index: 998;
 
-        md-icon {
+        mat-icon {
             animation: rotating 3s linear infinite;
         }
 

src/app/core/components/theme-options/theme-options.component.ts

@@ -3,6 +3,7 @@ import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/anim
 import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
 import { fuseAnimations } from '../../animations';
+import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -26,6 +27,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     constructor(
         private animationBuilder: AnimationBuilder,
         private fuseConfig: FuseConfigService,
+        private navigationService: FuseNavigationService,
         private renderer: Renderer2
     )
     {
@@ -38,6 +40,27 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.fuseSettings = newSettings;
                     }
                 );
+
+        // Get the nav model and add customize nav item
+        // that opens the bar programmatically
+        const navModel = this.navigationService.getNavigationModel();
+
+        navModel.push({
+            'id'      : 'custom-function',
+            'title'   : 'Custom Function',
+            'type'    : 'group',
+            'children': [
+                {
+                    'id'      : 'customize',
+                    'title'   : 'Customize',
+                    'type'    : 'item',
+                    'icon'    : 'settings',
+                    'function': () => {
+                        this.openBar();
+                    }
+                }
+            ]
+        });
     }
 
     ngOnInit()

src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts

@@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked
         {
             setTimeout(() => {
                 this.viewContainer.createEmbeddedView(this.templateRef);
-            }, 350);
+            }, 300);
             this.isCreated = true;
         }
         else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )

src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
-import * as Ps from 'perfect-scrollbar';
+import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import PerfectScrollbar from 'perfect-scrollbar';
 import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
@@ -13,10 +13,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
+    ps;
 
     constructor(
         private element: ElementRef,
-        private zone: NgZone,
         private fuseConfig: FuseConfigService,
         private platform: Platform
     )
@@ -48,11 +48,8 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
             return;
         }
 
-        this.zone.runOutsideAngular(() => {
-
-            // Initialize the perfect-scrollbar
-            Ps.initialize(this.element.nativeElement);
-        });
+        // Initialize the perfect-scrollbar
+        this.ps = new PerfectScrollbar(this.element.nativeElement);
     }
 
     ngOnDestroy()
@@ -65,7 +62,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.onSettingsChanged.unsubscribe();
 
         // Destroy the perfect-scrollbar
-        Ps.destroy(this.element.nativeElement);
+        this.ps.destroy();
     }
 
     update()
@@ -76,7 +73,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         }
 
         // Update the perfect-scrollbar
-        Ps.update(this.element.nativeElement);
+        this.ps.update();
     }
 
     destroy()
@@ -126,7 +123,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
 
             // PS has weird event sending order, this is a workaround for that
             this.update();
-
             this.update();
         }
         else if ( value !== this.element.nativeElement[target] )

src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts

@@ -0,0 +1,99 @@
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+
+@Directive({
+    selector: '[fuseMatSidenavHelper]'
+})
+export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
+{
+    matchMediaSubscription: Subscription;
+
+    @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
+    @HostBinding('class.mat-stop-transition') stopTransition = true;
+
+    @Input('fuseMatSidenavHelper') id: string;
+    @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
+
+    constructor(
+        private fuseMatSidenavService: FuseMatSidenavHelperService,
+        private fuseMatchMedia: FuseMatchMedia,
+        private observableMedia: ObservableMedia,
+        private matSidenav: MatSidenav
+    )
+    {
+    }
+
+    ngOnInit()
+    {
+        this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
+
+        if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+        {
+            setTimeout(() => {
+                this.isLockedOpen = true;
+                this.matSidenav.mode = 'side';
+                this.matSidenav.open();
+            });
+            this.stopTransition = false;
+        }
+        else
+        {
+            setTimeout(() => {
+                this.isLockedOpen = false;
+                this.matSidenav.mode = 'over';
+                this.matSidenav.close();
+            });
+
+            setTimeout(() => {
+                this.stopTransition = false;
+            }, 3000);
+        }
+
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
+            if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+            {
+                setTimeout(() => {
+                    this.isLockedOpen = true;
+                    this.matSidenav.mode = 'side';
+                    this.matSidenav.open();
+                });
+            }
+            else
+            {
+                setTimeout(() => {
+                    this.isLockedOpen = false;
+                    this.matSidenav.mode = 'over';
+                    this.matSidenav.close();
+                });
+            }
+        });
+
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaSubscription.unsubscribe();
+    }
+}
+
+@Directive({
+    selector: '[fuseMatSidenavToggler]'
+})
+export class FuseMatSidenavTogglerDirective
+{
+    @Input('fuseMatSidenavToggler') id;
+
+    constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
+    {
+    }
+
+    @HostListener('click')
+    onClick()
+    {
+        this.fuseMatSidenavService.getSidenav(this.id).toggle();
+    }
+}

src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { MdSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material';
 
 @Injectable()
-export class FuseMdSidenavHelperService
+export class FuseMatSidenavHelperService
 {
-    sidenavInstances: MdSidenav[];
+    sidenavInstances: MatSidenav[];
 
     constructor()
     {

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -1,99 +0,0 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
-import { MdSidenav } from '@angular/material';
-import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
-
-@Directive({
-    selector: '[fuseMdSidenavHelper]'
-})
-export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
-{
-    matchMediaSubscription: Subscription;
-
-    @HostBinding('class.md-is-locked-open') isLockedOpen = true;
-    @HostBinding('class.md-stop-transition') stopTransition = true;
-
-    @Input('fuseMdSidenavHelper') id: string;
-    @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string;
-
-    constructor(
-        private fuseMdSidenavService: FuseMdSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMedia,
-        private observableMedia: ObservableMedia,
-        private mdSidenav: MdSidenav
-    )
-    {
-    }
-
-    ngOnInit()
-    {
-        this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav);
-
-        if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
-        {
-            setTimeout(() => {
-                this.isLockedOpen = true;
-                this.mdSidenav.mode = 'side';
-                this.mdSidenav.open();
-            });
-            this.stopTransition = false;
-        }
-        else
-        {
-            setTimeout(() => {
-                this.isLockedOpen = false;
-                this.mdSidenav.mode = 'over';
-                this.mdSidenav.close();
-            });
-
-            setTimeout(() => {
-                this.stopTransition = false;
-            }, 3000);
-        }
-
-        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
-            if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) )
-            {
-                setTimeout(() => {
-                    this.isLockedOpen = true;
-                    this.mdSidenav.mode = 'side';
-                    this.mdSidenav.open();
-                });
-            }
-            else
-            {
-                setTimeout(() => {
-                    this.isLockedOpen = false;
-                    this.mdSidenav.mode = 'over';
-                    this.mdSidenav.close();
-                });
-            }
-        });
-
-    }
-
-    ngOnDestroy()
-    {
-        this.matchMediaSubscription.unsubscribe();
-    }
-}
-
-@Directive({
-    selector: '[fuseMdSidenavToggler]'
-})
-export class FuseMdSidenavTogglerDirective
-{
-    @Input('fuseMdSidenavToggler') id;
-
-    constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
-    {
-    }
-
-    @HostListener('click')
-    onClick()
-    {
-        this.fuseMdSidenavService.getSidenav(this.id).toggle();
-    }
-}

src/app/core/modules/material.module.ts

@@ -1,106 +1,108 @@
 import { NgModule } from '@angular/core';
 import {
-    MdAutocompleteModule,
-    MdButtonModule,
-    MdButtonToggleModule,
-    MdCheckboxModule,
-    MdToolbarModule,
-    MdTooltipModule,
-    MdCardModule,
-    MdChipsModule,
-    MdDatepickerModule,
-    MdDialogModule,
-    MdExpansionModule,
-    MdGridListModule,
-    MdIconModule,
-    MdInputModule,
-    MdListModule,
-    MdMenuModule,
-    MdNativeDateModule,
-    MdPaginatorModule,
-    MdProgressBarModule,
-    MdProgressSpinnerModule,
-    MdRadioModule,
-    MdRippleModule,
-    MdSelectModule,
-    MdSidenavModule,
-    MdSliderModule,
-    MdSlideToggleModule,
-    MdSnackBarModule,
-    MdStepperModule,
-    MdSortModule,
-    MdTableModule,
-    MdTabsModule
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatCardModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatStepperModule
 } from '@angular/material';
 import { CdkTableModule } from '@angular/cdk/table';
 
 @NgModule({
     imports: [
-        MdAutocompleteModule,
-        MdButtonModule,
-        MdButtonToggleModule,
-        MdCardModule,
-        MdCheckboxModule,
-        MdChipsModule,
-        MdDatepickerModule,
-        MdDialogModule,
-        MdExpansionModule,
-        MdGridListModule,
-        MdIconModule,
-        MdInputModule,
-        MdListModule,
-        MdMenuModule,
-        MdNativeDateModule,
-        MdPaginatorModule,
-        MdProgressBarModule,
-        MdProgressSpinnerModule,
-        MdRadioModule,
-        MdRippleModule,
-        MdSelectModule,
-        MdSidenavModule,
-        MdSliderModule,
-        MdSlideToggleModule,
-        MdSnackBarModule,
-        MdStepperModule,
-        MdSortModule,
-        MdTableModule,
-        MdTabsModule,
-        MdToolbarModule,
-        MdTooltipModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatFormFieldModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatStepperModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
         CdkTableModule
     ],
     exports: [
-        MdAutocompleteModule,
-        MdButtonModule,
-        MdButtonToggleModule,
-        MdCardModule,
-        MdCheckboxModule,
-        MdChipsModule,
-        MdDatepickerModule,
-        MdDialogModule,
-        MdExpansionModule,
-        MdGridListModule,
-        MdIconModule,
-        MdInputModule,
-        MdListModule,
-        MdMenuModule,
-        MdNativeDateModule,
-        MdPaginatorModule,
-        MdProgressBarModule,
-        MdProgressSpinnerModule,
-        MdRadioModule,
-        MdRippleModule,
-        MdSelectModule,
-        MdSidenavModule,
-        MdSliderModule,
-        MdSlideToggleModule,
-        MdSnackBarModule,
-        MdStepperModule,
-        MdSortModule,
-        MdTableModule,
-        MdTabsModule,
-        MdToolbarModule,
-        MdTooltipModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatNativeDateModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatSnackBarModule,
+        MatStepperModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
         CdkTableModule
     ]
 })

src/app/core/modules/shared.module.ts

@@ -8,24 +8,23 @@ import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
-import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
+import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
-import { Md2Module } from 'md2';
 import { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
     declarations   : [
-        FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
         FuseHljsComponent,
@@ -42,16 +41,15 @@ import { CookieService } from 'ngx-cookie-service';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule,
-        Md2Module
+        NgxDatatableModule
     ],
     exports        : [
         FlexLayoutModule,
         MaterialModule,
         CommonModule,
         FormsModule,
-        FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
         FuseHljsComponent,
@@ -61,8 +59,7 @@ import { CookieService } from 'ngx-cookie-service';
         NgxDnDModule,
         NgxDatatableModule,
         FuseIfOnDomDirective,
-        FuseMaterialColorPickerComponent,
-        Md2Module
+        FuseMaterialColorPickerComponent
     ],
     entryComponents: [
         FuseConfirmDialogComponent
@@ -71,7 +68,7 @@ import { CookieService } from 'ngx-cookie-service';
         CookieService,
         FuseMatchMedia,
         FuseNavbarVerticalService,
-        FuseMdSidenavHelperService
+        FuseMatSidenavHelperService
     ]
 })
 

src/app/core/scss/core.scss

@@ -3,7 +3,7 @@
 @import '~@swimlane/ngx-datatable/release/themes/material.css';
 @import '~@swimlane/ngx-datatable/release/assets/icons.css';
 // Perfect scrollbar
-@import '~perfect-scrollbar/dist/css/perfect-scrollbar.min.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
 // Fuse
 @import "fuse";
 

src/app/core/scss/partials/_angular-material-fix.scss

@@ -1,3 +1,4 @@
+// Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {
 
     .mat-button-ripple {
@@ -5,11 +6,12 @@
     }
 }
 
-md-sidenav-container {
+// Fix: "Sidenav opening with animations for the first time"
+mat-sidenav-container {
 
-    md-sidenav {
+    mat-sidenav {
 
-        &[md-is-locked-open].md-stop-transition {
+        &[mat-is-locked-open].mat-stop-transition {
             transition: none !important;
             transform: translate3d(0, 0, 0) !important;
             opacity: 0;
@@ -39,3 +41,21 @@ md-sidenav-container {
     .mat-drawer-content {
     }
 }
+
+// Fix: "Inconsistent font sizes across elements"
+.mat-input-wrapper {
+    font-size: 16px;
+}
+
+.mat-checkbox {
+    font-size: 16px;
+}
+
+.mat-radio-button {
+    font-size: 16px;
+}
+
+.mat-pseudo-checkbox-checked:after {
+    width: 14px;
+    height: 7px;
+}

src/app/core/scss/partials/_colors.scss

@@ -51,14 +51,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     // If the base text color is black...
     @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
 
-        &.secondary-text,
-        .secondary-text,
         .mat-icon,
-        .icon,
-        .md2-datepicker-button {
+        .icon {
             color: rgba(0, 0, 0, 0.54);
         }
 
+        &.secondary-text,
+        .secondary-text {
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
+
         &.hint-text,
         .hint-text,
         &.disabled-text,
@@ -80,8 +82,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     @else {
 
         .mat-icon,
-        .icon,
-        .md2-datepicker-button {
+        .icon {
             color: rgba(255, 255, 255, 1);
         }
 
@@ -111,49 +112,60 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 @mixin generateMaterialElementColors($contrastColor) {
 
     // If the contrast color is white...
-    $foreground: $mat-dark-theme-foreground;
+    $fuseForeground: (
+        base: white,
+        text: white,
+        hint-text: rgba(white, 0.5),
+        divider: rgba(white, 0.12),
+    );
 
     // If the contrast color is black...
     @if (rgba(black, 1) == rgba($contrastColor, 1)) {
-        $foreground: $mat-light-theme-foreground;
+
+        $fuseForeground: (
+            base: black,
+            hint-text: rgba(black, 0.38),
+            divider: rgba(black, 0.12),
+        );
     }
 
     // Native Input
     input[type="text"] {
-        color: mat-color($foreground, base);
+        color: map_get($fuseForeground, base);
     }
 
     // Input
     .mat-input-placeholder {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
     .mat-input-underline {
-        background-color: mat-color($foreground, divider);
+        background-color: map_get($fuseForeground, divider);
     }
 
     // Select
     .mat-select-trigger,
     .mat-select-arrow {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
     .mat-select-underline {
-        background-color: mat-color($foreground, divider);
+        background-color: map_get($fuseForeground, divider);
     }
 
     .mat-select-disabled .mat-select-value,
     .mat-select-arrow,
     .mat-select-trigger {
-        color: mat-color($foreground, hint-text);
+        color: map_get($fuseForeground, hint-text);
     }
 
-    .mat-select-content, .mat-select-panel-done-animating {
-        background: mat-color($background, card);
+    .mat-select-content,
+    .mat-select-panel-done-animating {
+        background: map_get($background, card);
     }
 
     .mat-select-value {
-        color: mat-color($foreground, text);
+        color: map_get($fuseForeground, text);
     }
 }
 
@@ -164,7 +176,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         background-color: $color !important;
     }
 
-    .md-#{$colorName}#{$hue}-bg {
+    .mat-#{$colorName}#{$hue}-bg {
         background-color: $color !important;
         color: $contrastColor !important;
 

src/app/core/scss/partials/_global.scss

@@ -1,6 +1,6 @@
 body {
 
-    > md-sidenav-container {
+    > mat-sidenav-container {
         height: 100%;
     }
 }

src/app/core/scss/partials/_icons.scss

@@ -1,5 +1,5 @@
 i,
-md-icon {
+mat-icon {
     color: rgba(0, 0, 0, 0.54);
     font-size: 24px;
     width: 24px;

src/app/core/scss/partials/_material.scss

@@ -46,14 +46,14 @@
         margin-top: 0;
         margin-bottom: 0;
     }
-    md-icon.status {
+    mat-icon.status {
         position: absolute;
         top: 28px;
         left: 28px;
     }
 }
 
-md-icon.status {
+mat-icon.status {
     border-radius: 50%;
 
     &.online {
@@ -116,7 +116,7 @@ md-icon.status {
         max-height: 48px;
         height: 48px;
 
-        md-icon {
+        mat-icon {
             margin: 0 16px 0 0;
         }
 
@@ -142,7 +142,7 @@ md-icon.status {
         }
     }
 
-    md-divider {
+    mat-divider {
         margin: 8px 0;
     }
 }
@@ -196,7 +196,7 @@ md-icon.status {
         background-color: #FFFFFF;
         width: 280px;
         border-radius: 2px;
-        margin: 24px 24px 0 0;
+        margin: 12px;
         overflow: hidden;
 
         &.style-1 {
@@ -234,7 +234,7 @@ md-icon.status {
                 }
             }
 
-            md-divider {
+            mat-divider {
                 margin: 16px 32px;
             }
 

src/app/core/scss/partials/_page-layouts.scss

@@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex: 1;
                 background: none;
@@ -132,11 +132,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     min-width: 240px;
                     max-width: 240px;
                     height: auto;
-                    z-index: 2;
+                    z-index: 4;
                     overflow-y: hidden;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         background: none;
                         box-shadow: none;
                     }
@@ -145,6 +145,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                         height: $carded-header-height;
                         min-height: $carded-header-height;
                         max-height: $carded-header-height;
+
+                        @include media-breakpoint-down('sm') {
+                            height: $carded-header-height-sm;
+                            min-height: $carded-header-height-sm;
+                            max-height: $carded-header-height-sm;
+                        }
                     }
 
                     .content {
@@ -175,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                             height: $carded-header-height-without-toolbar;
                             min-height: $carded-header-height-without-toolbar;
                             max-height: $carded-header-height-without-toolbar;
+
+                            @include media-breakpoint-down('sm') {
+                                height: $carded-header-height-without-toolbar-sm;
+                                min-height: $carded-header-height-without-toolbar-sm;
+                                max-height: $carded-header-height-without-toolbar-sm;
+                            }
                         }
 
                         .content-card {
@@ -216,11 +228,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.left-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
@@ -238,12 +250,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
         &.right-sidenav {
 
             // Sidenav
-            > md-sidenav-container {
+            > mat-sidenav-container {
 
                 .sidenav {
                     order: 999;
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
 
                         ~ .mat-sidenav-content,
                         ~ .mat-drawer-content {
@@ -295,7 +307,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Single scroll
             &.single-scroll {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
 
                     > .mat-sidenav-content,
@@ -309,7 +321,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             // Inner Sidenav
             &.inner-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1;
 
                     .sidenav {
@@ -338,10 +350,9 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                 }
             }
 
-            > md-sidenav-container {
+            > mat-sidenav-container {
                 display: flex;
                 flex-direction: column;
-                //flex-direction: row;
                 flex: 1;
                 background: none;
                 z-index: 2;
@@ -354,7 +365,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     z-index: 51;
                     @include mat-elevation(7);
 
-                    &.md-is-locked-open {
+                    &.mat-is-locked-open {
                         width: 220px;
                         min-width: 220px;
                         max-width: 220px;
@@ -440,7 +451,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto;
                 }
             }
@@ -458,7 +469,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
                     flex: 1 0 auto !important;
 
                     > .mat-sidenav-content,
@@ -483,7 +494,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
             &.left-sidenav,
             &.right-sidenav {
 
-                > md-sidenav-container {
+                > mat-sidenav-container {
 
                     > .mat-sidenav-content,
                     > .mat-drawer-content {

src/app/core/scss/partials/_print.scss

@@ -4,8 +4,9 @@
 
 @media all {
 
-    /* Never show page break in normal view */
-    .page-break {
+    /* Never show page breaks in normal view */
+    .page-break-after,
+    .page-break-before {
         display: none;
     }
 
@@ -13,22 +14,30 @@
 
 @media print {
 
-    /* Page Styles */
-    @page {
-        //margin: 0.5cm;
+    /* html and body tweaks */
+    html, body {
+        height: auto !important;
+        overflow: initial !important;
     }
 
-    /* Page break */
-    .page-break {
+    /* Page breaks */
+    .page-break-after {
         display: block;
-        break-after: always;
         page-break-after: always;
+        position: relative;
+    }
+
+    .page-break-before {
+        display: block;
+        page-break-before: always;
+        position: relative;
     }
 
     /* General styles */
     fuse-root {
 
-        fuse-navbar,
+        fuse-navbar-vertical,
+        fuse-navbar-horizontal,
         fuse-toolbar,
         fuse-footer,
         fuse-quick-panel,
@@ -41,11 +50,16 @@
         .ps {
             overflow: visible !important;
         }
-    }
 
-    /* Printable page specific styles */
-    .printable {
-        overflow: visible !important;
-        height: auto !important;
+        .mat-drawer-container,
+        .mat-sidenav-container {
+            background-color: white !important;
+
+            .mat-drawer-content,
+            .mat-sidenav-content {
+                overflow: initial !important;
+                height: auto !important
+            }
+        }
     }
 }

src/app/core/scss/partials/_reset.scss

@@ -28,7 +28,7 @@ html, body {
 }
 
 // Reset non angular-material input's default browser/os styles
-*:not(md-input-container) {
+*:not(mat-input-container) {
 
     > input {
         border: none;
@@ -55,7 +55,7 @@ html, body {
     }
 }
 
-*:not(md-input-container) {
+*:not(mat-input-container) {
 
     > input[type="button"],
     > button,

src/app/core/scss/partials/plugins/_perfect-scrollbar.scss

@@ -1,11 +1,12 @@
 .ps {
     position: relative;
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-x {
         z-index: 99999;
     }
 
-    > .ps__scrollbar-y-rail {
+    > .ps__rail-y {
         z-index: 99999;
+        left: auto !important;
     }
 }

src/app/core/services/config.service.ts

@@ -28,12 +28,12 @@ export class FuseConfigService
                 mode      : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
-                toolbar: 'md-white-500-bg',
-                navbar : 'md-fuse-dark-500-bg',
-                footer : 'md-fuse-dark-700-bg'
+                toolbar: 'mat-white-500-bg',
+                navbar : 'mat-fuse-dark-700-bg',
+                footer : 'mat-fuse-dark-900-bg'
             },
             customScrollbars: true,
-            routerAnimation : 'fadeIn'
+            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
         };
 
         /**

src/app/main/footer/footer.component.html

@@ -1,20 +1,20 @@
-<md-toolbar>
+<mat-toolbar>
 
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
 
         <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
-           target="_blank" md-button class="md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
+           target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
-            <md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
+            <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
             <span>Purchase FUSE (Angular4+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
-            <a md-button href="http://fusetheme.com/angular/docs" target="_blank">Documentation</a>
+            <a mat-button href="http://fusetheme.com/angular/docs" target="_blank">Documentation</a>
             <span>&bull;</span>
-            <a md-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a>
+            <a mat-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a>
         </div>
 
     </div>
 
-</md-toolbar>
+</mat-toolbar>

src/app/main/main.component.html

@@ -1,6 +1,6 @@
-<md-sidenav-container>
+<mat-sidenav-container>
 
-    <div id="fuse-main-content" fxFlexFill>
+    <div id="fuse-main-content">
 
         <!-- TOOLBAR: Above -->
         <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
@@ -19,8 +19,8 @@
 
             <!-- NAVBAR: Left -->
             <fuse-navbar-vertical [folded]="false"
-                                  fxShow [fxHide.gt-md]="fuseSettings.layout.navigation === 'top'"
-                                  class="left-navbar" [class]="fuseSettings.colorClasses.navbar"
+                                  class="left-navbar"
+                                  [class]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Left -->
@@ -62,11 +62,11 @@
     </div>
 
     <!-- QUICK PANEL -->
-    <md-sidenav fuseMdSidenavHelper="quick-panel" align="end">
+    <mat-sidenav fuseMatSidenavHelper="quick-panel" align="end">
         <fuse-quick-panel></fuse-quick-panel>
-    </md-sidenav>
+    </mat-sidenav>
     <!-- / QUICK PANEL -->
 
-</md-sidenav-container>
+</mat-sidenav-container>
 
 <fuse-theme-options></fuse-theme-options>

src/app/main/navbar/horizontal/navbar-horizontal.component.ts

@@ -8,7 +8,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 })
 export class FuseNavbarHorizontalComponent implements OnInit
 {
-    constructor() {
+    constructor()
+    {
     }
 
     ngOnInit()

src/app/main/navbar/vertical/navbar-vertical.component.html

@@ -5,12 +5,12 @@
         <span class="logo-text">FUSE</span>
     </div>
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
-        <md-icon>menu</md-icon>
+    <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
+        <mat-icon>menu</mat-icon>
     </button>
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
-        <md-icon>arrow_back</md-icon>
+    <button mat-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
+        <mat-icon>arrow_back</mat-icon>
     </button>
 
 </div>

src/app/main/navbar/vertical/navbar-vertical.component.scss

@@ -134,11 +134,18 @@ fuse-navbar-vertical {
         }
     }
 
-    .nav-bar-content {
+    .navbar-content {
         flex: 1;
     }
 }
 
+fuse-navbar-horizontal + #wrapper > fuse-navbar-vertical {
+    display: none;
+    @include media-breakpoint-down(md) {
+        display: flex;
+    }
+}
+
 .fuse-navbar-backdrop {
     position: absolute;
     top: 0;

src/app/main/navbar/vertical/navbar-vertical.component.ts

@@ -26,6 +26,8 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
 
     matchMediaWatcher: Subscription;
+    navigationServiceWatcher: Subscription;
+    fusePerfectScrollbarUpdateTimeout;
 
     player: AnimationPlayer;
 
@@ -43,11 +45,12 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     {
         navBarService.setNavBar(this);
 
-        this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
-            setTimeout(() => {
-                this.fusePerfectScrollbarDirective.update();
-            }, 310);
-        });
+        this.navigationServiceWatcher =
+            this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this.fusePerfectScrollbarDirective.update();
+                }, 310);
+            });
 
         this.matchMediaWatcher =
             this.fuseMatchMedia.onMediaChange
@@ -112,6 +115,13 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         }
     }
 
+    ngOnDestroy()
+    {
+        clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        this.matchMediaWatcher.unsubscribe();
+        this.navigationServiceWatcher.unsubscribe();
+    }
+
     openBar()
     {
         this.isClosed = false;
@@ -235,9 +245,4 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
             });
         }
     }
-
-    ngOnDestroy()
-    {
-        this.matchMediaWatcher.unsubscribe();
-    }
 }

src/app/main/quick-panel/quick-panel.component.html

@@ -1,6 +1,6 @@
-<md-list class="date" cdk-focus-region-start>
+<mat-list class="date" cdk-focus-region-start>
 
-    <h3 md-subheader cdk-focus-init>
+    <h3 matSubheader cdk-focus-init>
         <span>Today</span>
     </h3>
 
@@ -14,33 +14,59 @@
             <span> {{date | date:'MMMM'}}</span>
         </div>
     </div>
-</md-list>
+</mat-list>
 
-<md-divider cdk-focus-region-end></md-divider>
+<mat-divider cdk-focus-region-end></mat-divider>
 
-<md-list>
-    <h3 md-subheader>
+<mat-list>
+    <h3 matSubheader>
+        <span>Events</span>
+    </h3>
+
+    <mat-list-item *ngFor="let event of events">
+        <h3 matLine>{{event.title}}</h3>
+        <p matLine class="secondary-text">{{event.detail}}</p>
+    </mat-list-item>
+</mat-list>
+
+<mat-divider></mat-divider>
+
+<mat-list>
+    <h3 matSubheader>
+        <span>Notes</span>
+    </h3>
+
+    <mat-list-item *ngFor="let note of notes">
+        <h3 matLine>{{note.title}}</h3>
+        <p matLine class="secondary-text">{{note.detail}}</p>
+    </mat-list-item>
+</mat-list>
+
+<mat-divider></mat-divider>
+
+<mat-list>
+    <h3 matSubheader>
         <span>Quick Settings</span>
     </h3>
 
-    <md-list-item>
-        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
-                         labelPosition="before">
+    <mat-list-item>
+        <mat-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
+                          labelPosition="before">
             <h3>Notifications</h3>
-        </md-slide-toggle>
-    </md-list-item>
+        </mat-slide-toggle>
+    </mat-list-item>
 
-    <md-list-item>
-        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
-                         labelPosition="before">
+    <mat-list-item>
+        <mat-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
+                          labelPosition="before">
             <h3>Cloud Sync</h3>
-        </md-slide-toggle>
-    </md-list-item>
+        </mat-slide-toggle>
+    </mat-list-item>
 
-    <md-list-item>
-        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
-                         labelPosition="before">
+    <mat-list-item>
+        <mat-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
+                          labelPosition="before">
             <h3>Retro Thrusters</h3>
-        </md-slide-toggle>
-    </md-list-item>
-</md-list>
+        </mat-slide-toggle>
+    </mat-list-item>
+</mat-list>

src/app/main/toolbar/toolbar.component.html

@@ -1,12 +1,14 @@
-<md-toolbar class="p-0 mat-elevation-z1">
+<mat-toolbar class="p-0 mat-elevation-z1">
+
+    <mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
 
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="toggle-button-navbar mat-icon-button"
+            <button mat-button class="toggle-button-navbar mat-icon-button"
                     fuseNavbarVertical="openBar" fxHide.gt-md>
-                <md-icon>menu</md-icon>
+                <mat-icon>menu</mat-icon>
             </button>
 
             <div class="toolbar-separator" fxHide.gt-md></div>
@@ -17,7 +19,7 @@
                 </div>
             </div>
 
-            <div class="px-8 px-md-16">
+            <div class="px-8 px-mat-16">
                 <fuse-shortcuts></fuse-shortcuts>
             </div>
 
@@ -25,35 +27,33 @@
 
         <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <md-spinner *ngIf="showSpinner" class="loading-spinner mx-8"></md-spinner>
-
-            <button md-button [mdMenuTriggerFor]="userMenu"
+            <button mat-button [matMenuTriggerFor]="userMenu"
                     class="user-button">
                 <div fxLayout="row" fxLayoutAlign="center center">
                     <img class="avatar" src="assets/images/avatars/profile.jpg">
                     <span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
-                    <md-icon class="s-16" fxHide.xs>keyboard_arrow_down</md-icon>
+                    <mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
                 </div>
             </button>
 
-            <md-menu #userMenu="mdMenu">
+            <mat-menu #userMenu="matMenu">
 
-                <button md-menu-item>
-                    <md-icon>account_circle</md-icon>
+                <button mat-menu-item>
+                    <mat-icon>account_circle</mat-icon>
                     <span>My Profile</span>
                 </button>
 
-                <button md-menu-item class="">
-                    <md-icon>mail</md-icon>
+                <button mat-menu-item class="">
+                    <mat-icon>mail</mat-icon>
                     <span>Inbox</span>
                 </button>
 
-                <button md-menu-item class="">
-                    <md-icon>exit_to_app</md-icon>
+                <button mat-menu-item class="">
+                    <mat-icon>exit_to_app</mat-icon>
                     <span>Logout</span>
                 </button>
 
-            </md-menu>
+            </mat-menu>
 
             <div class="toolbar-separator"></div>
 
@@ -61,33 +61,33 @@
 
             <div class="toolbar-separator"></div>
 
-            <button md-button fxHide fxShow.gt-xs
+            <button mat-button fxHide fxShow.gt-xs
                     class="language-button"
-                    [mdMenuTriggerFor]="languageMenu">
+                    [matMenuTriggerFor]="languageMenu">
                 <div fxLayout="row" fxLayoutAlign="center center">
                     <img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
                     <span class="iso text-uppercase">{{selectedLanguage.id}}</span>
                 </div>
             </button>
 
-            <md-menu #languageMenu="mdMenu">
-                <button md-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
+            <mat-menu #languageMenu="matMenu">
+                <button mat-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
                     <div fxLayout="row" fxLayoutAlign="start center">
                         <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </div>
                 </button>
-            </md-menu>
+            </mat-menu>
 
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
-            <button md-icon-button
+            <button mat-icon-button
                     class="mat-icon-button quick-panel-toggle-button"
-                    fuseMdSidenavToggler="quick-panel"
+                    fuseMatSidenavToggler="quick-panel"
                     aria-label="Toggle quick panel">
-                <md-icon class="icon">format_list_bulleted</md-icon>
+                <mat-icon class="icon">format_list_bulleted</mat-icon>
             </button>
 
         </div>
     </div>
-</md-toolbar>
+</mat-toolbar>

src/app/main/toolbar/toolbar.component.scss

@@ -13,6 +13,15 @@
     .mat-toolbar {
         background: inherit;
         color: inherit;
+        position: relative;
+
+        .loading-bar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+        }
     }
 
     .logo {
@@ -24,13 +33,8 @@
         }
     }
 
-    .loading-spinner {
-        width: 32px;
-        height: 32px;
-    }
-
     .user-button,
-    .search-button,
+    fuse-search-bar,
     .language-button,
     .quick-panel-toggle-button {
         min-width: 64px;

src/app/main/toolbar/toolbar.component.ts

@@ -13,7 +13,7 @@ export class FuseToolbarComponent
     userStatusOptions: any[];
     languages: any;
     selectedLanguage: any;
-    showSpinner: boolean;
+    showLoadingBar: boolean;
     horizontalNav: boolean;
 
     constructor(
@@ -73,11 +73,11 @@ export class FuseToolbarComponent
             (event) => {
                 if ( event instanceof NavigationStart )
                 {
-                    this.showSpinner = true;
+                    this.showLoadingBar = true;
                 }
                 if ( event instanceof NavigationEnd )
                 {
-                    this.showSpinner = false;
+                    this.showLoadingBar = false;
                 }
             });
 

src/app/navigation.model.ts

@@ -6,10 +6,12 @@ export class NavigationModel
     {
         this.model = [
             {
-                'title': 'Applications',
-                'type' : 'group',
+                'id'      : 'applications',
+                'title'   : 'Applications',
+                'type'    : 'group',
                 'children': [
                     {
+                        'id'   : 'sample',
                         'title': 'Sample',
                         'type' : 'item',
                         'icon' : 'email',

src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.css

@@ -0,0 +1,21 @@
+div {
+    display: flex;
+}
+
+input {
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+    font: inherit;
+    text-align: center;
+}
+
+span {
+    opacity: 0;
+    transition: opacity 200ms;
+}
+
+:host.floating span {
+    opacity: 1;
+}

src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.html

@@ -0,0 +1,7 @@
+<div [formGroup]="parts">
+    <input class="area" formControlName="area" size="3" [disabled]="disabled">
+    <span>&ndash;</span>
+    <input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
+    <span>&ndash;</span>
+    <input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
+</div>

src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts

@@ -0,0 +1,177 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs/Subject';
+
+/** Data structure for holding telephone number. */
+export class MyTel
+{
+    constructor(public area: string, public exchange: string, public subscriber: string)
+    {
+    }
+}
+
+/** Custom `MatFormFieldControl` for telephone number input. */
+@Component({
+    selector   : 'my-tel-input',
+    templateUrl: 'form-field-custom-control-example.html',
+    styleUrls  : ['form-field-custom-control-example.css'],
+    providers  : [
+        {
+            provide    : MatFormFieldControl,
+            useExisting: MyTelInput
+        }
+    ],
+    host       : {
+        '[class.floating]'       : 'shouldPlaceholderFloat',
+        '[id]'                   : 'id',
+        '[attr.aria-describedby]': 'describedBy'
+    }
+})
+export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
+{
+    static nextId = 0;
+
+    parts: FormGroup;
+
+    stateChanges = new Subject<void>();
+
+    focused = false;
+
+    ngControl = null;
+
+    errorState = false;
+
+    controlType = 'my-tel-input';
+
+    get empty()
+    {
+        let n = this.parts.value;
+        return !n.area && !n.exchange && !n.subscriber;
+    }
+
+    get shouldPlaceholderFloat()
+    {
+        return this.focused || !this.empty;
+    }
+
+    id = `my-tel-input-${MyTelInput.nextId++}`;
+
+    describedBy = '';
+
+    @Input()
+    get placeholder()
+    {
+        return this._placeholder;
+    }
+
+    set placeholder(plh)
+    {
+        this._placeholder = plh;
+        this.stateChanges.next();
+    }
+
+    private _placeholder: string;
+
+    @Input()
+    get required()
+    {
+        return this._required;
+    }
+
+    set required(req)
+    {
+        this._required = coerceBooleanProperty(req);
+        this.stateChanges.next();
+    }
+
+    private _required = false;
+
+    @Input()
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    set disabled(dis)
+    {
+        this._disabled = coerceBooleanProperty(dis);
+        this.stateChanges.next();
+    }
+
+    private _disabled = false;
+
+    @Input()
+    get value(): MyTel | null
+    {
+        let n = this.parts.value;
+        if ( n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4 )
+        {
+            return new MyTel(n.area, n.exchange, n.subscriber);
+        }
+        return null;
+    }
+
+    set value(tel: MyTel | null)
+    {
+        tel = tel || new MyTel('', '', '');
+        this.parts.setValue({
+            area      : tel.area,
+            exchange  : tel.exchange,
+            subscriber: tel.subscriber
+        });
+        this.stateChanges.next();
+    }
+
+    constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef,
+                renderer: Renderer2
+    )
+    {
+        this.parts = fb.group({
+            'area'      : '',
+            'exchange'  : '',
+            'subscriber': ''
+        });
+
+        fm.monitor(elRef.nativeElement, renderer, true).subscribe((origin) => {
+            this.focused = !!origin;
+            this.stateChanges.next();
+        });
+    }
+
+    ngOnDestroy()
+    {
+        this.stateChanges.complete();
+        this.fm.stopMonitoring(this.elRef.nativeElement);
+    }
+
+    setDescribedByIds(ids: string[])
+    {
+        this.describedBy = ids.join(' ');
+    }
+
+    onContainerClick(event: MouseEvent)
+    {
+        if ( (event.target as Element).tagName.toLowerCase() != 'input' )
+        {
+            this.elRef.nativeElement.querySelector('input').focus();
+        }
+    }
+}
+
+/** @title Form field with custom telephone number input control. */
+@Component({
+    selector: 'form-field-custom-control-example',
+    template: `
+    <mat-form-field>
+      <my-tel-input placeholder="Phone number" required></my-tel-input>
+      <mat-icon matSuffix>phone</mat-icon>
+      <mat-hint>Include area code</mat-hint>
+    </mat-form-field>
+  `
+})
+export class FormFieldCustomControlExample
+{
+}

src/assets/angular-material-examples/form-field-error/form-field-error-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

src/assets/angular-material-examples/form-field-error/form-field-error-example.html

@@ -0,0 +1,6 @@
+<div class="example-container">
+    <mat-form-field>
+        <input matInput placeholder="Enter your email" [formControl]="email" required>
+        <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
+    </mat-form-field>
+</div>

src/assets/angular-material-examples/form-field-error/form-field-error-example.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+/** @title Form field with error messages */
+@Component({
+    selector   : 'form-field-error-example',
+    templateUrl: 'form-field-error-example.html',
+    styleUrls  : ['form-field-error-example.css']
+})
+export class FormFieldErrorExample
+{
+    email = new FormControl('', [Validators.required, Validators.email]);
+
+    getErrorMessage()
+    {
+        return this.email.hasError('required') ? 'You must enter a value' :
+            this.email.hasError('email') ? 'Not a valid email' :
+                '';
+    }
+}

src/assets/angular-material-examples/form-field-hint/form-field-hint-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

src/assets/angular-material-examples/form-field-hint/form-field-hint-example.html

@@ -0,0 +1,13 @@
+<div class="example-container">
+    <mat-form-field hintLabel="Max 10 characters">
+        <input matInput #input maxlength="10" placeholder="Enter some input">
+        <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-select placeholder="Select me">
+            <mat-option value="option">Option</mat-option>
+        </mat-select>
+        <mat-hint align="end">Here's the dropdown arrow ^</mat-hint>
+    </mat-form-field>
+</div>

src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Form field with hints */
+@Component({
+    selector   : 'form-field-hint-example',
+    templateUrl: 'form-field-hint-example.html',
+    styleUrls  : ['form-field-hint-example.css']
+})
+export class FormFieldHintExample
+{
+}

src/assets/angular-material-examples/form-field-overview/form-field-overview-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

src/assets/angular-material-examples/form-field-overview/form-field-overview-example.html

@@ -0,0 +1,15 @@
+<div class="example-container">
+    <mat-form-field>
+        <input matInput placeholder="Input">
+    </mat-form-field>
+
+    <mat-form-field>
+        <textarea matInput placeholder="Textarea"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-select placeholder="Select">
+            <mat-option value="option">Option</mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>

src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts

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

src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.css

@@ -0,0 +1,20 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}
+
+.example-container form {
+    margin-bottom: 20px;
+}
+
+.example-container form > * {
+    margin: 5px 0;
+}
+
+.example-container .mat-radio-button {
+    margin: 0 5px;
+}

src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.html

@@ -0,0 +1,31 @@
+<div class="example-container">
+    <form class="example-container" [formGroup]="options">
+        <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
+        <div>
+            <label>Float placeholder: </label>
+            <mat-radio-group formControlName="floatPlaceholder">
+                <mat-radio-button value="auto">Auto</mat-radio-button>
+                <mat-radio-button value="always">Always</mat-radio-button>
+                <mat-radio-button value="never">Never</mat-radio-button>
+            </mat-radio-group>
+        </div>
+    </form>
+
+    <mat-form-field
+        [hideRequiredMarker]="options.value.hideRequired"
+        [floatPlaceholder]="options.value.floatPlaceholder">
+        <input matInput placeholder="Simple placeholder" required>
+    </mat-form-field>
+
+    <mat-form-field
+        [hideRequiredMarker]="options.value.hideRequired"
+        [floatPlaceholder]="options.value.floatPlaceholder">
+        <mat-select required>
+            <mat-option>-- None --</mat-option>
+            <mat-option value="option">Option</mat-option>
+        </mat-select>
+        <mat-placeholder>
+            <mat-icon>favorite</mat-icon>
+            <b> Fancy</b> <i> placeholder</i></mat-placeholder>
+    </mat-form-field>
+</div>

src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+/** @title Form field with placeholder */
+@Component({
+    selector   : 'form-field-placeholder-example',
+    templateUrl: 'form-field-placeholder-example.html',
+    styleUrls  : ['form-field-placeholder-example.css']
+})
+export class FormFieldPlaceholderExample
+{
+    options: FormGroup;
+
+    constructor(fb: FormBuilder)
+    {
+        this.options = fb.group({
+            hideRequired    : false,
+            floatPlaceholder: 'auto'
+        });
+    }
+}

src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.css

@@ -0,0 +1,17 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}
+
+.example-right-align {
+    text-align: right;
+}
+
+input.example-right-align::-webkit-outer-spin-button,
+input.example-right-align::-webkit-inner-spin-button {
+    display: none;
+}

src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html

@@ -0,0 +1,12 @@
+<div class="example-container">
+    <mat-form-field>
+        <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
+        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput placeholder="Amount" type="number" class="example-right-align">
+        <span matPrefix>$&nbsp;</span>
+        <span matSuffix>.00</span>
+    </mat-form-field>
+</div>

src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/** @title Form field with prefix & suffix */
+@Component({
+    selector   : 'form-field-prefix-suffix-example',
+    templateUrl: 'form-field-prefix-suffix-example.html',
+    styleUrls  : ['form-field-prefix-suffix-example.css']
+})
+export class FormFieldPrefixSuffixExample
+{
+    hide = true;
+}

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.html

@@ -0,0 +1,14 @@
+<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
+    <mat-form-field [color]="options.value.color">
+        <mat-select placeholder="Color" formControlName="color">
+            <mat-option value="primary">Primary</mat-option>
+            <mat-option value="accent">Accent</mat-option>
+            <mat-option value="warn">Warn</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <mat-form-field [color]="options.value.color">
+        <input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
+        <mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
+    </mat-form-field>
+</form>

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+/** @title Form field theming */
+@Component({
+    selector   : 'form-field-theming-example',
+    templateUrl: 'form-field-theming-example.html',
+    styleUrls  : ['form-field-theming-example.css']
+})
+export class FormFieldThemingExample
+{
+    options: FormGroup;
+
+    constructor(fb: FormBuilder)
+    {
+        this.options = fb.group({
+            'color'   : 'primary',
+            'fontSize': [16, Validators.min(10)]
+        });
+    }
+
+    getFontSize()
+    {
+        return Math.max(10, this.options.value.fontSize);
+    }
+}

src/environments/environment.hmr.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: false,
-    hmr: true
+    hmr       : true
 };

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
     production: true,
-    hmr: false
+    hmr       : false
 };

src/environments/environment.ts

@@ -5,5 +5,5 @@
 
 export const environment = {
     production: false,
-    hmr: false
+    hmr       : false
 };