Skeleton updates

Merge branch 'master' into skeleton
Updated Material Moment Adapter package
2026-04-25 16:44:12 +00:00 · 2017-12-14 16:20:52 +03:00 · 2017-12-14 16:06:32 +03:00 · 2017-12-14 16:06:07 +03:00 · 2017-12-14 16:03:34 +03:00 · 2017-12-14 16:01:09 +03:00
120 changed files with 5193 additions and 2936 deletions
@@ -37,13 +37,28 @@
    },
    "lint": [
        {
-            "project": "src/tsconfig.app.json"
+            "project": "src/tsconfig.app.json",
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
        },
        {
-            "project": "src/tsconfig.spec.json"
+            "project": "src/tsconfig.spec.json",
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
        },
        {
-            "project": "e2e/tsconfig.e2e.json"
+            "project": "e2e/tsconfig.e2e.json",
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
        }
    ],
    "test": {
@@ -0,0 +1 @@
+https://themeforest.net/licenses/terms/regular
@@ -1,6 +1,6 @@
 # Fuse2

-Material Design Admin Template with Angular 4+ and Angular Material 2
+Material Design Admin Template with Angular 5+ and Angular Material 2

 ## Development server

@@ -1,14 +1,14 @@
 import { Fuse2Page } from './app.po';

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

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

-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
-  });
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
+    });
 });
@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';

 export class Fuse2Page {
-  navigateTo() {
-    return browser.get('/');
-  }
+    navigateTo() {
+        return browser.get('/');
+    }

-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+    getParagraphText() {
+        return element(by.css('app-root h1')).getText();
+    }
 }
@@ -2,10 +2,12 @@
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
+      "jasminewd2",
      "node"
    ]
  }
@@ -1,33 +1,33 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html

 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular/cli'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular/cli/plugins/karma')
+        ],
+        client:{
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+            reports: [ 'html', 'lcovonly' ],
+            fixWebpackSourcePaths: true
+        },
+        angularCli: {
+            environment: 'dev'
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false
+    });
 };
@@ -1,75 +1,73 @@
 {
  "name": "fuse2",
-  "version": "1.1.0",
+  "version": "1.3.0",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
-    "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
-    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "4.4.3",
-    "@angular/cdk": "2.0.0-beta.10",
-    "@angular/common": "4.4.3",
-    "@angular/compiler": "4.4.3",
-    "@angular/core": "4.4.3",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.4.3",
-    "@angular/http": "4.4.3",
-    "@angular/material": "2.0.0-beta.10",
-    "@angular/platform-browser": "4.4.3",
-    "@angular/platform-browser-dynamic": "4.4.3",
-    "@angular/router": "4.4.3",
-    "@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.3.2",
+    "@agm/core": "1.0.0-beta.2",
+    "@angular/animations": "5.1.1",
+    "@angular/cdk": "5.0.1",
+    "@angular/common": "5.1.1",
+    "@angular/compiler": "5.1.1",
+    "@angular/core": "5.1.1",
+    "@angular/flex-layout": "2.0.0-beta.10-4905443",
+    "@angular/forms": "5.1.1",
+    "@angular/http": "5.1.1",
+    "@angular/material": "5.0.1",
+    "@angular/material-moment-adapter": "5.0.1",
+    "@angular/platform-browser": "5.1.1",
+    "@angular/platform-browser-dynamic": "5.1.1",
+    "@angular/router": "5.1.1",
+    "@ngx-translate/core": "9.0.1",
+    "@swimlane/ngx-charts": "7.0.1",
+    "@swimlane/ngx-datatable": "11.1.5",
+    "@swimlane/ngx-dnd": "3.1.0",
+    "angular-calendar": "0.22.1",
    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
-    "d3": "4.10.0",
+    "core-js": "2.5.3",
+    "d3": "4.12.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",
-    "rxjs": "5.4.3",
+    "moment": "2.19.4",
+    "ngx-color-picker": "5.2.0",
+    "ngx-cookie-service": "1.0.9",
+    "perfect-scrollbar": "1.3.0",
+    "rxjs": "5.5.5",
    "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.6.1",
+    "@angular/compiler-cli": "5.1.1",
+    "@angular/language-service": "5.1.1",
    "@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",
-    "jasmine-core": "2.6.2",
-    "jasmine-spec-reporter": "4.1.0",
+    "@types/jasmine": "2.5.54",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "6.0.92",
+    "codelyzer": "4.0.2",
+    "jasmine-core": "2.6.4",
+    "jasmine-spec-reporter": "4.1.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
    "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",
-    "typescript": "2.3.3"
+    "ts-node": "3.2.2",
+    "tslint": "5.7.0",
+    "typescript": "2.4.2"
  }
 }
@@ -4,25 +4,25 @@
 const { SpecReporter } = require('jasmine-spec-reporter');

 exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
+    allScriptsTimeout: 11000,
+    specs: [
+        './e2e/**/*.e2e-spec.ts'
+    ],
+    capabilities: {
+        'browserName': 'chrome'
+    },
+    directConnect: true,
+    baseUrl: 'http://localhost:4200/',
+    framework: 'jasmine',
+    jasmineNodeOpts: {
+        showColors: true,
+        defaultTimeoutInterval: 30000,
+        print: function() {}
+    },
+    onPrepare() {
+        require('ts-node').register({
+            project: 'e2e/tsconfig.e2e.json'
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    }
 };
@@ -1,5 +1,12 @@
 import { Component } from '@angular/core';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
+import { TranslateService } from '@ngx-translate/core';
+import { FuseTranslationLoaderService } from './core/services/translation-loader.service';
+
+import { FuseNavigationService } from './core/components/navigation/navigation.service';
+import { FuseNavigationModel } from './navigation/navigation.model';
+import { locale as navigationEnglish } from './navigation/i18n/en';
+import { locale as navigationTurkish } from './navigation/i18n/tr';

@Component({
    selector   : 'fuse-root',
@@ -8,7 +15,26 @@ import { FuseSplashScreenService } from './core/services/splash-screen.service';
 })
 export class AppComponent
 {
-    constructor(private fuseSplashScreen: FuseSplashScreenService)
+    constructor(
+        private fuseNavigationService: FuseNavigationService,
+        private fuseSplashScreen: FuseSplashScreenService,
+        private translate: TranslateService,
+        private translationLoader: FuseTranslationLoaderService
+    )
    {
+        // Add languages
+        this.translate.addLangs(['en', 'tr']);
+
+        // Set the default language
+        this.translate.setDefaultLang('en');
+
+        // Use a language
+        this.translate.use('en');
+
+        // Set the navigation model
+        this.fuseNavigationService.setNavigationModel(new FuseNavigationModel());
+
+        // Set the navigation translations
+        this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish);
    }
 }
@@ -1,18 +1,17 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseMainModule } from './main/main.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { FuseSampleModule } from './main/content/sample/sample.module';
+import { TranslateModule } from '@ngx-translate/core';

 const appRoutes: Routes = [
    {
@@ -27,12 +26,11 @@ const appRoutes: Routes = [
    ],
    imports     : [
        BrowserModule,
-        HttpModule,
        HttpClientModule,
        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes),
        SharedModule,
-        PerfectScrollbarModule.forRoot(),
+        TranslateModule.forRoot(),
        FuseMainModule,
        FuseSampleModule
    ],
@@ -33,21 +33,21 @@ export const fuseAnimations = [
                    stagger('50ms', [
                        animateChild()
                    ])
-                ])),
+                ], {optional: true})),
        transition('void => 100',
            query('@*',
                [
                    stagger('100ms', [
                        animateChild()
                    ])
-                ])),
+                ], {optional: true})),
        transition('void => 200',
            query('@*',
                [
                    stagger('200ms', [
                        animateChild()
                    ])
-                ]))
+                ], {optional: true}))
    ]),

    trigger('fadeInOut', [
@@ -129,6 +129,17 @@ export const fuseAnimations = [
        transition('* => void', animate('300ms'))
    ]),

+    trigger('expandCollapse', [
+        state('void', style({
+            height: '0px'
+        })),
+        state('*', style({
+            height: '*'
+        })),
+        transition('void => *', animate('300ms ease-out')),
+        transition('* => void', animate('300ms ease-in'))
+    ]),
+
    trigger('routerTransitionLeft', [

        transition('* => *', [
@@ -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>
@@ -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>)
    {
    }

@@ -0,0 +1,65 @@
+/**
+ * This class is based on the code in the following projects:
+ *
+ * - https://github.com/zenorocha/select
+ * - https://github.com/zenorocha/clipboard.js/
+ *
+ * Both released under MIT license - © Zeno Rocha
+ */
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class CopierService
+{
+
+    private textarea: HTMLTextAreaElement;
+
+    /** Copy the text value to the clipboard. */
+    copyText(text: string): boolean
+    {
+        this.createTextareaAndSelect(text);
+
+        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;
+        }
+    }
+}
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import * as moment from 'moment';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/interval';

@Component({
    selector   : 'fuse-countdown',
@@ -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>
@@ -1,23 +1,23 @@
-<button md-icon-button
+<button mat-icon-button
        type="button"
        class="mat-elevation-z1"
-        [mdMenuTriggerFor]="colorMenu"
-        (onMenuOpen)="onMenuOpen()"
-        [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
-    <md-icon>palette</md-icon>
+        [matMenuTriggerFor]="colorMenu"
+        (menuOpened)="onMenuOpen()"
+        [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>
@@ -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;
@@ -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
            {
@@ -1,7 +1,11 @@
-<a class="nav-link" md-ripple>
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
-    <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</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" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>

 <div class="children" [ngClass]="{'open': isOpen}">
@@ -11,6 +15,7 @@
        <ng-container *ngFor="let item of item.children">
            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
        </ng-container>

    </div>
@@ -1,6 +1,18 @@
-<a class="nav-link" md-ripple
-   [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-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>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [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" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>
@@ -22,7 +22,7 @@

            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
-            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

        </ng-container>

@@ -26,7 +26,6 @@ export class FuseNavigationComponent implements OnDestroy

    ngOnDestroy()
    {
-        console.warn('destroyed');
        this.navigationModelChangeSubscription.unsubscribe();
    }

@@ -0,0 +1,5 @@
+export interface FuseNavigationModelInterface
+{
+    model: any[];
+}
+
@@ -1,23 +1,23 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { NavigationModel } from '../../../navigation.model';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { FuseNavigationModelInterface } from './navigation.model';

@Injectable()
 export class FuseNavigationService
 {
+    onNavCollapseToggle = new EventEmitter<any>();
    onNavCollapseToggled = new EventEmitter<any>();
    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
-    navigationModel: NavigationModel;
+    navigationModel: FuseNavigationModelInterface;
    flatNavigation: any[] = [];

    constructor()
    {
-        this.navigationModel = new NavigationModel();
-        this.onNavigationModelChange.next(this.navigationModel.model);
    }

    /**
     * Get navigation model
+     *
     * @returns {any[]}
     */
    getNavigationModel()
@@ -27,19 +27,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
@@ -47,8 +153,15 @@ export class FuseNavigationService
     */
    getFlatNavigation(navigationItems?)
    {
+        // If navigation items not provided,
+        // that means we are running the function
+        // for the first time...
        if ( !navigationItems )
        {
+            // Reset the flat navigation
+            this.flatNavigation = [];
+
+            // Get the entire navigation model
            navigationItems = this.navigationModel.model;
        }

@@ -73,7 +186,10 @@ export class FuseNavigationService

            if ( navItem.type === 'collapse' || navItem.type === 'group' )
            {
-                this.getFlatNavigation(navItem.children);
+                if ( navItem.children )
+                {
+                    this.getFlatNavigation(navItem.children);
+                }
            }
        }

@@ -1,11 +1,17 @@
-<a class="nav-link" md-ripple (click)="toggleOpen($event)">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
-    <span class="nav-link-title">{{item.title}}</span>
-    <md-icon class="collapse-arrow">keyboard_arrow_right</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" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
+
 <div class="children" [@slideInOut]="isOpen">
    <ng-container *ngFor="let item of item.children">
        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
    </ng-container>
 </div>
@@ -43,7 +43,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        this.navigationService.onNavCollapseToggled
            .subscribe(
                (clickedItem) => {
-                    if ( clickedItem.children )
+                    if ( clickedItem && clickedItem.children )
                    {
                        // Check if the clicked item is one
                        // of the children of this item
@@ -69,6 +69,20 @@ export class FuseNavVerticalCollapseComponent implements OnInit
            );
    }

+    ngOnInit()
+    {
+        // Check if the url can be found in
+        // one of the children of this item
+        if ( this.isUrlInChildren(this.item, this.router.url) )
+        {
+            this.expand();
+        }
+        else
+        {
+            this.collapse();
+        }
+    }
+
    /**
     * Toggle collapse
     *
@@ -82,6 +96,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit

        // Navigation collapse toggled...
        this.navigationService.onNavCollapseToggled.emit(this.item);
+        this.navigationService.onNavCollapseToggle.emit();
    }

    /**
@@ -95,6 +110,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        }

        this.isOpen = true;
+        this.navigationService.onNavCollapseToggle.emit();
    }

    /**
@@ -106,7 +122,9 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        {
            return;
        }
+
        this.isOpen = false;
+        this.navigationService.onNavCollapseToggle.emit();
    }

    /**
@@ -163,7 +181,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
                }
            }

-            if ( parent.children[i].url === url )
+            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
            {
                return true;
            }
@@ -172,8 +190,4 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        return false;
    }

-    ngOnInit()
-    {
-    }
-
 }
@@ -1,6 +1,7 @@
 <div class="group-title">
-    <span class="hint-text">{{ item.title }}</span>
+    <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
 </div>
+
 <div class="group-items">
    <ng-container *ngFor="let item of item.children">
        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
@@ -7,7 +7,7 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
 })
 export class FuseNavVerticalGroupComponent implements OnInit
 {
-    @HostBinding('class') classes = 'nav-group';
+    @HostBinding('class') classes = 'nav-group nav-item';
    @Input() item: any;

    constructor()
@@ -1,6 +1,18 @@
-<a class="nav-link" md-ripple
-   [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-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 class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [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" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>
@@ -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>
@@ -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"
-                        (onMenuOpen)="onMenuOpen()">
-                    <md-icon class="amber-600-fg">star</md-icon>
+                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
+                        (menuOpened)="onMenuOpen()">
+                    <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>

@@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy

    onMenuOpen()
    {
-        this.searchInputField.nativeElement.focus();
+        setTimeout(() => {
+            this.searchInputField.nativeElement.focus();
+        });
    }

    showMobileShortcutsPanel()
@@ -1,50 +1,56 @@
-<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>Navigation Fold (for vertical navigation):</h3>
+        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+                          (change)="onSettingsChange()">
+            Folded
+        </mat-slide-toggle>

        <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 +75,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>
@@ -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;
        }

@@ -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()
@@ -62,4 +62,23 @@ fuse-widget {
            transform: rotateY(360deg);
        }
    }
+
+    .mat-form-field {
+
+        &.mat-form-field-type-mat-select {
+
+            .mat-input-wrapper {
+                padding: 16px 0;
+
+                .mat-input-infix {
+                    border: none;
+                    padding: 0;
+                }
+            }
+
+            .mat-input-underline {
+                display: none;
+            }
+        }
+    }
 }
@@ -27,7 +27,9 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
        setTimeout(() => {

            this.toggleButtons.forEach(flipButton => {
-                this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
+                this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
                    this.toggle();
                });
            });
@@ -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) )
@@ -0,0 +1,84 @@
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
+
+@Directive({
+    selector: '[fuseMatSidenavHelper]'
+})
+export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
+{
+    matchMediaSubscription: Subscription;
+
+    @HostBinding('class.mat-is-locked-open') isLockedOpen = 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) )
+        {
+            this.isLockedOpen = true;
+            this.matSidenav.mode = 'side';
+            this.matSidenav.toggle(true);
+        }
+        else
+        {
+            this.isLockedOpen = false;
+            this.matSidenav.mode = 'over';
+            this.matSidenav.toggle(false);
+        }
+
+        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
+            if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+            {
+                this.isLockedOpen = true;
+                this.matSidenav.mode = 'side';
+                this.matSidenav.toggle(true);
+            }
+            else
+            {
+                this.isLockedOpen = false;
+                this.matSidenav.mode = 'over';
+                this.matSidenav.toggle(false);
+            }
+        });
+    }
+
+    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();
+    }
+}
@@ -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()
    {
@@ -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,16 +48,13 @@ 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()
    {
-        if ( !this.isInitialized )
+        if ( !this.isInitialized || !this.ps )
        {
            return;
        }
@@ -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] )
@@ -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();
-    }
-}
@@ -82,10 +82,12 @@ export class FuseUtils
    {
        function S4()
        {
-            return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
+            return Math.floor((1 + Math.random()) * 0x10000)
+                       .toString(16)
+                       .substring(1);
        }

-        return (S4() + S4());
+        return S4() + S4();
    }

    public static toggleInArray(item, array)
@@ -99,4 +101,14 @@ export class FuseUtils
            array.splice(array.indexOf(item), 1);
        }
    }
+
+    public static handleize(text)
+    {
+        return text.toString().toLowerCase()
+                   .replace(/\s+/g, '-')           // Replace spaces with -
+                   .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+                   .replace(/\-\-+/g, '-')         // Replace multiple - with single -
+                   .replace(/^-+/, '')             // Trim - from start of text
+                   .replace(/-+$/, '');            // Trim - from end of text
+    }
 }
@@ -681,6 +681,7 @@ const matColors = {
    }
 };

+// tslint:disable-next-line
 const matPresetColors = [
    '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64'
 ];
@@ -1,106 +1,108 @@
 import { NgModule } from '@angular/core';
 import {
-    MdAutocompleteModule,
-    MdButtonModule,
-    MdButtonToggleModule,
-    MdCheckboxModule,
-    MdToolbarModule,
-    MdTooltipModule,
-    MdCardModule,
-    MdChipsModule,
-    MdCoreModule,
-    MdDatepickerModule,
-    MdDialogModule,
-    MdExpansionModule,
-    MdGridListModule,
-    MdIconModule,
-    MdInputModule,
-    MdListModule,
-    MdMenuModule,
-    MdNativeDateModule,
-    MdPaginatorModule,
-    MdProgressBarModule,
-    MdProgressSpinnerModule,
-    MdRadioModule,
-    MdRippleModule,
-    MdSelectModule,
-    MdSidenavModule,
-    MdSliderModule,
-    MdSlideToggleModule,
-    MdSnackBarModule,
-    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,
-        MdCoreModule,
-        MdDatepickerModule,
-        MdDialogModule,
-        MdExpansionModule,
-        MdGridListModule,
-        MdIconModule,
-        MdInputModule,
-        MdListModule,
-        MdMenuModule,
-        MdNativeDateModule,
-        MdPaginatorModule,
-        MdProgressBarModule,
-        MdProgressSpinnerModule,
-        MdRadioModule,
-        MdRippleModule,
-        MdSelectModule,
-        MdSidenavModule,
-        MdSliderModule,
-        MdSlideToggleModule,
-        MdSnackBarModule,
-        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,
-        MdCoreModule,
-        MdDatepickerModule,
-        MdDialogModule,
-        MdExpansionModule,
-        MdGridListModule,
-        MdIconModule,
-        MdInputModule,
-        MdListModule,
-        MdMenuModule,
-        MdNativeDateModule,
-        MdPaginatorModule,
-        MdProgressBarModule,
-        MdProgressSpinnerModule,
-        MdRadioModule,
-        MdRippleModule,
-        MdSelectModule,
-        MdSidenavModule,
-        MdSliderModule,
-        MdSlideToggleModule,
-        MdSnackBarModule,
-        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
    ]
 })
@@ -8,24 +8,25 @@ 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/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive';
+import { FuseMatSidenavHelperService } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
 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 { 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 { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
+import { TranslateModule } from '@ngx-translate/core';

@NgModule({
    declarations   : [
-        FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
        FuseConfirmDialogComponent,
        FuseCountdownComponent,
        FuseHljsComponent,
@@ -42,16 +43,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,
@@ -62,7 +62,7 @@ import { CookieService } from 'ngx-cookie-service';
        NgxDatatableModule,
        FuseIfOnDomDirective,
        FuseMaterialColorPickerComponent,
-        Md2Module
+        TranslateModule
    ],
    entryComponents: [
        FuseConfirmDialogComponent
@@ -71,7 +71,8 @@ import { CookieService } from 'ngx-cookie-service';
        CookieService,
        FuseMatchMedia,
        FuseNavbarVerticalService,
-        FuseMdSidenavHelperService
+        FuseMatSidenavHelperService,
+        FuseTranslationLoaderService
    ]
 })

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

@@ -25,6 +25,7 @@
@import "partials/angular-material-fix";
@import "partials/typography";
@import "partials/page-layouts";
+@import "partials/cards";
@import "partials/navigation";
@import "partials/forms";
@import "partials/toolbar";
@@ -1,3 +1,4 @@
+// Fix: "Icon button ripple radius is not correct on Edge & Safari"
 .mat-icon-button {

    .mat-button-ripple {
@@ -5,37 +6,73 @@
    }
 }

-md-sidenav-container {
+// Fix: "Inconsistent font sizes across elements"
+.mat-input-wrapper {
+    font-size: 16px;
+}

-    md-sidenav {
+.mat-checkbox {
+    font-size: 16px;
+}

-        &[md-is-locked-open].md-stop-transition {
-            transition: none !important;
-            transform: translate3d(0, 0, 0) !important;
-            opacity: 0;
+.mat-radio-button {
+    font-size: 16px;
+}

-            ~ .mat-sidenav-content,
-            ~ .mat-drawer-content {
-                transition: none !important;
-            }
-        }
+.mat-pseudo-checkbox-checked:after {
+    width: 14px;
+    height: 7px;
+}

-        &.mat-sidenav-opened {
+// Fix: "Input underlines has wrong color opacity value"
+.mat-form-field-underline {
+    background-color: rgba(0, 0, 0, 0.12);
+}

-            &.mat-drawer-side {
+// Fix: "Some idiots using table-cell and inline-table in mat-select"
+.mat-form-field {

-                ~ .mat-sidenav-content,
-                ~ .mat-drawer-content {
-                    transition: none !important;
-                    transform: translate3d(0, 0, 0) !important;
+    &.mat-form-field-type-mat-select {
+
+        .mat-input-infix {
+            display: inline-flex;
+            width: auto;
+
+            .mat-select-trigger {
+                display: inline-flex;
+                align-items: center;
+                width: 100%;
+
+                .mat-select-value {
+                    display: flex;
+                    max-width: none;
+                    margin-right: 8px;
+                }
+
+                .mat-select-arrow-wrapper {
+                    display: inline-flex;
                }
            }
        }
-
-        &.mat-drawer-end {
-        }
-    }
-
-    .mat-drawer-content {
    }
 }
+
+// Fix: "Stepper icons are broken due to Fuse's icon helpers"
+mat-horizontal-stepper,
+mat-vertical-stepper {
+
+    mat-step-header {
+
+        mat-icon {
+            height: 16px !important;
+            width: 16px !important;
+            min-width: 0 !important;
+            min-height: 0 !important;
+            color: rgba(255, 255, 255, 0.87) !important;
+        }
+    }
+}
+
+mat-vertical-stepper {
+    padding: 16px 0;
+}
@@ -0,0 +1,154 @@
+.fuse-card {
+    max-width: 320px;
+    min-width: 320px;
+    background: white;
+    border-radius: 2px;
+    @include mat-elevation(2);
+
+    &.variable-width {
+        min-width: 0;
+    }
+
+    .card-rich-media {
+        position: relative;
+
+        .card-title {
+            position: absolute;
+            right: 16px;
+            bottom: 16px;
+            left: 16px;
+            font-size: 20px;
+            color: white;
+        }
+    }
+
+    .card-media-header {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+
+        &.medium {
+            align-items: flex-start;
+
+            .card-rich-media {
+                width: 120px;
+                height: 120px;
+            }
+        }
+
+        &.large {
+            align-items: flex-start;
+
+            .card-rich-media {
+                width: 160px;
+                height: 160px;
+            }
+        }
+
+        .card-primary-title {
+            padding: 0 16px 0 0;
+            flex: 1;
+        }
+
+        .card-rich-media {
+            width: 80px;
+            height: 80px;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-avatar-header {
+        display: flex;
+        padding: 16px;
+        align-items: center;
+
+        .card-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 100%;
+            margin-right: 16px;
+        }
+
+        .card-avatar-title {
+
+            .card-title {
+                font-size: 14px;
+                font-weight: bold;
+            }
+
+            .card-subtitle {
+                font-size: 13px;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .card-primary-title {
+        padding: 16px;
+
+        .card-title {
+            font-size: 24px;
+        }
+
+        .card-subtitle {
+            font-size: 14px;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-supporting-text {
+        padding: 16px;
+        font-size: 14px;
+        line-height: 1.75;
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-actions {
+        display: flex;
+        padding: 8px;
+
+        &.icon-buttons {
+            padding: 0 8px;
+        }
+
+        &.align-center {
+            justify-content: center;
+        }
+
+        &.align-right {
+            justify-content: flex-end;
+        }
+
+        .mat-button {
+            min-width: 0 !important;
+            padding: 0 8px !important;
+        }
+
+        .card-expander {
+            margin-left: auto;
+        }
+
+        + div {
+            padding-top: 0;
+        }
+    }
+
+    .card-expand-area {
+        overflow: hidden;
+
+        .card-expanded-supporting-text {
+            padding: 8px 16px 16px 16px;
+            font-size: 14px;
+            line-height: 1.75;
+        }
+    }
+}
@@ -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;

@@ -175,6 +187,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        // Generate material element colors
        // based on current contrast color
        @include generateMaterialElementColors($contrastColor);
+
+        &[disabled] {
+            background-color: rgba($color, .12) !important;
+            color: rgba($contrastColor, .26) !important;
+        }
    }

    .#{$colorName}#{$hue}-fg {
@@ -1,6 +1,6 @@
 body {

-    > md-sidenav-container {
+    > mat-sidenav-container {
        height: 100%;
    }
 }
@@ -1,5 +1,5 @@
 i,
-md-icon {
+mat-icon {
    color: rgba(0, 0, 0, 0.54);
    font-size: 24px;
    width: 24px;
@@ -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;
            }

@@ -12,6 +12,7 @@
    }

    .nav-group {
+        display: block;

        > .group-title {
            position: relative;
@@ -46,14 +47,20 @@
            }

            .nav-link-badge {
+                display: flex;
+                align-items: center;
                min-width: 20px;
                height: 20px;
-                line-height: 20px;
                padding: 0 7px;
                font-size: 11px;
                font-weight: 500;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
+                margin-left: 8px;
+
+                + .collapse-arrow {
+                    margin-left: 8px;
+                }
            }

            &:hover {
@@ -103,7 +110,9 @@

                > .nav-item {

-                    > .nav-link {
+                    > .nav-link,
+                    &.nav-group > .group-title,
+                    &.nav-group > .group-items > .nav-item > .nav-link {
                        padding-left: 56px;
                    }

@@ -111,7 +120,9 @@

                        > .nav-item {

-                            > .nav-link {
+                            > .nav-link,
+                            &.nav-group > .group-title,
+                            &.nav-group > .group-items > .nav-item > .nav-link {
                                padding-left: 72px;
                            }
                        }
@@ -190,6 +201,10 @@

        > .nav-item {

+            > .nav-link {
+                height: 56px;
+            }
+
            &.nav-collapse {
                position: relative;

@@ -96,7 +96,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                        max-height: $carded-toolbar-height;
                    }

-                    .content {
+                    > .content {
                        display: flex;
                        flex: 1;
                        overflow: auto;
@@ -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 {
@@ -210,17 +222,73 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                    }
                }
            }
+
+            // Tabbed
+            &.tabbed {
+
+                > mat-sidenav-container {
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        width: calc(100% - 240px);
+
+                        .center {
+                            width: calc(100% - 32px);
+
+                            @include media-breakpoint-down('md') {
+                                width: calc(100% - 64px);
+                            }
+
+                            .header {
+                                flex: 1;
+                            }
+
+                            .content-card {
+
+                                .content {
+
+                                    .mat-tab-group {
+                                        overflow: hidden;
+
+                                        .mat-tab-header {
+
+                                            .mat-tab-label {
+                                                height: 64px;
+                                            }
+                                        }
+
+                                        .mat-tab-body {
+                                            overflow: hidden;
+
+                                            .mat-tab-body-content {
+                                                overflow: hidden;
+
+                                                .tab-content {
+                                                    position: relative;
+                                                    width: 100%;
+                                                    height: 100%;
+                                                    overflow: auto;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
        }

        // Left sidenav
        &.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 +306,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 +363,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 +377,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 +406,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 +421,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 +507,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 +525,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 +550,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 {
@@ -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,39 +14,52 @@

@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,
        fuse-theme-options,
-        .ps > .ps__scrollbar-x-rail,
-        .ps > .ps__scrollbar-y-rail {
+        .ps > .ps__rail-x,
+        .ps > .ps__rail-y {
            display: none !important;
        }

        .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
+            }
+        }
    }
 }
@@ -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,
@@ -3,20 +3,21 @@
 .color-picker {
    height: auto !important;
    border: none !important;
+
    @include mat-elevation(4);

    .preset-area {
-        //padding: 4px 15px;
-        padding: 0 0 12px 12px !important;
+        padding: 0 0 16px 16px !important;
        height: 140px;
        overflow-y: auto;
        overflow-x: hidden;
+
        > hr {
            display: none;
        }
+
        .preset-label {
            display: none;
-
        }

        .preset-color {
@@ -25,7 +26,8 @@
            margin: 0 !important;
            border: none !important;
            border-radius: 0 !important;
-            &:nth-child(14n+3) {
+
+            &:nth-child(14n+1) {
                clear: both;
            }
        }
@@ -55,6 +55,7 @@
                    min-height: 48px;
                    transition: none;
                    padding: 0 24px;
+                    overflow: hidden;
                }
            }
        }
@@ -82,6 +83,16 @@

                .datatable-pager {
                    margin: 0 0 0 24px;
+
+                    .pager {
+
+                        li {
+
+                            a {
+                                text-decoration: none !important;
+                            }
+                        }
+                    }
                }
            }
        }
@@ -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;
    }
 }
@@ -22,18 +22,19 @@ export class FuseConfigService
        // Set the default settings
        this.defaultSettings = {
            layout          : {
-                navigation: 'left', // 'right', 'left', 'top', 'none'
-                toolbar   : 'below', // 'above', 'below', 'none'
-                footer    : 'below', // 'above', 'below', 'none'
-                mode      : 'fullwidth' // 'boxed', 'fullwidth'
+                navigation      : 'left', // 'right', 'left', 'top', 'none'
+                navigationFolded: false, // true, false
+                toolbar         : 'below', // 'above', 'below', 'none'
+                footer          : 'below', // 'above', 'below', 'none'
+                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
        };

        /**
@@ -44,6 +45,7 @@ export class FuseConfigService
            this.defaultSettings.customScrollbars = false;
        }

+        // Set the settings from the default settings
        this.settings = Object.assign({}, this.defaultSettings);

        // Reload the default settings on every navigation start
@@ -58,7 +60,6 @@ export class FuseConfigService

        // Create the behavior subject
        this.onSettingsChanged = new BehaviorSubject(this.settings);
-
    }

    /**
@@ -67,7 +68,10 @@ export class FuseConfigService
     */
    setSettings(settings)
    {
+        // Set the settings from the given object
        this.settings = Object.assign({}, this.settings, settings);
+
+        // Trigger the event
        this.onSettingsChanged.next(this.settings);
    }
 }
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface Locale
+{
+    lang: string;
+    data: Object;
+}
+
+@Injectable()
+export class FuseTranslationLoaderService
+{
+    constructor(private translate: TranslateService)
+    {
+    }
+
+    public loadTranslations(...args: Locale[]): void
+    {
+        const locales = [...args];
+
+        locales.forEach((locale) => {
+            // use setTranslation() with the third argument set to true
+            // to append translations instead of replacing them
+            this.translate.setTranslation(locale.lang, locale.data, true);
+        });
+    }
+}
@@ -0,0 +1,8 @@
+export const locale = {
+    lang: 'en',
+    data: {
+        'SAMPLE': {
+            'HELLO': 'Hello, World!'
+        }
+    }
+};
@@ -0,0 +1,8 @@
+export const locale = {
+    lang: 'tr',
+    data: {
+        'SAMPLE': {
+            'HELLO': 'Merhaba Dünya!'
+        }
+    }
+};
@@ -1,5 +1,5 @@
 <div class="page-layout blank p-24" fusePerfectScrollbar>

-    <h2>Sample Page</h2>
+    <h2>{{'SAMPLE.HELLO' | translate}}</h2>

 </div>
@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { FuseTranslationLoaderService } from '../../../core/services/translation-loader.service';
+
+import { locale as english } from './i18n/en';
+import { locale as turkish } from './i18n/tr';

@Component({
    selector   : 'fuse-sample',
@@ -7,7 +11,8 @@ import { Component } from '@angular/core';
 })
 export class FuseSampleComponent
 {
-    constructor()
+    constructor(private translationLoader: FuseTranslationLoaderService)
    {
+        this.translationLoader.loadTranslations(english, turkish);
    }
 }
@@ -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>
-            <span>Purchase FUSE (Angular4+)</span>
+            <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
+            <span>Purchase FUSE (Angular5+)</span>
        </a>

        <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>
-            <a md-button href="http://fuse-angular-material-docs.withinpixels.com/" 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://withinpixels.com/themes/fuse/changelog" target="_blank">Changelog</a>
+            <a mat-button href="http://fusetheme.com/angular/changelog" target="_blank">Changelog</a>
        </div>

    </div>

-</md-toolbar>
+</mat-toolbar>
@@ -1,16 +1,16 @@
-<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'">
-            <fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+            <fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
        </ng-container>
        <!-- / TOOLBAR: Above -->

        <!-- NAVBAR: Top -->
        <fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
-                                [class]="fuseSettings.colorClasses.navbar"
+                                [ngClass]="fuseSettings.colorClasses.navbar"
                                *ngIf="fuseSettings.layout.navigation === 'top'">
        </fuse-navbar-horizontal>
        <!-- / NAVBAR: Top -->
@@ -18,9 +18,9 @@
        <div id="wrapper">

            <!-- NAVBAR: Left -->
-            <fuse-navbar-vertical [folded]="false"
-                                  fxShow [fxHide.gt-md]="fuseSettings.layout.navigation === 'top'"
-                                  class="left-navbar" [class]="fuseSettings.colorClasses.navbar"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
+                                  class="left-navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                  *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
            </fuse-navbar-vertical>
            <!-- / NAVBAR: Left -->
@@ -29,7 +29,7 @@

                <!-- TOOLBAR: Below -->
                <ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
-                    <fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+                    <fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
                </ng-container>
                <!-- / TOOLBAR: Below -->

@@ -37,16 +37,16 @@

                <!-- FOOTER: Below -->
                <ng-container *ngIf="fuseSettings.layout.footer === 'below'">
-                    <fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+                    <fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
                </ng-container>
                <!-- / FOOTER: Below -->

            </div>

            <!-- NAVBAR: Right -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                  class="right-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                  *ngIf="fuseSettings.layout.navigation === 'right'">
            </fuse-navbar-vertical>
            <!-- / NAVBAR: Right -->
@@ -55,18 +55,18 @@

        <!-- FOOTER: Above -->
        <ng-container *ngIf="fuseSettings.layout.footer === 'above'">
-            <fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+            <fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
        </ng-container>
        <!-- FOOTER: Above -->

    </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>
@@ -6,12 +6,6 @@ fuse-main {
    width: 100%;
    height: 100%;

-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-
    > .mat-sidenav-container {
        display: flex;
        flex: 1;
@@ -72,4 +66,10 @@ fuse-main {
            }
        }
    }
+
+    &[fuse-layout-mode="boxed"] {
+        max-width: 1200px;
+        margin: 0 auto;
+        @include mat-elevation(8);
+    }
 }
@@ -14,7 +14,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
 {
    onSettingsChanged: Subscription;
    fuseSettings: any;
-    @HostBinding('class.boxed') boxed;
+    @HostBinding('attr.fuse-layout-mode') layoutMode;

    constructor(
        private _renderer: Renderer2,
@@ -29,7 +29,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
                .subscribe(
                    (newSettings) => {
                        this.fuseSettings = newSettings;
-                        this.boxed = this.fuseSettings.layout.mode === 'boxed';
+                        this.layoutMode = this.fuseSettings.layout.mode;
                    }
                );

@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FuseMainComponent } from '../../main.component';

@Component({
    selector     : 'fuse-navbar-horizontal',
@@ -6,13 +7,19 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
    styleUrls    : ['./navbar-horizontal.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarHorizontalComponent implements OnInit
+export class FuseNavbarHorizontalComponent implements OnInit, OnDestroy
 {
-    constructor() {
+    constructor(private fuseMainComponent: FuseMainComponent)
+    {
    }

    ngOnInit()
    {
+        this.fuseMainComponent.addClass('fuse-nav-bar-horizontal');
+    }

+    ngOnDestroy()
+    {
+        this.fuseMainComponent.removeClass('fuse-nav-bar-horizontal');
    }
 }
@@ -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>
@@ -2,7 +2,7 @@

 fuse-main {

-    &.fuse-nav-bar-folded {
+    &.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {

        .content-wrapper {

@@ -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;
@@ -18,14 +18,37 @@ import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/anim
 export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 {
    private _backdropElement: HTMLElement | null = null;
+    private _folded = false;
+
    @HostBinding('class.close') isClosed: boolean;
    @HostBinding('class.folded') isFoldedActive: boolean;
    @HostBinding('class.folded-open') isFoldedOpen: boolean;
    @HostBinding('class.initialized') initialized: boolean;
-    @Input('folded') foldedByDefault = false;
    @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;

+    @Input()
+    set folded(value: boolean)
+    {
+        this._folded = value;
+
+        if ( this._folded )
+        {
+            this.activateFolded();
+        }
+        else
+        {
+            this.deActivateFolded();
+        }
+    }
+
+    get folded(): boolean
+    {
+        return this._folded;
+    }
+
    matchMediaWatcher: Subscription;
+    navigationServiceWatcher: Subscription;
+    fusePerfectScrollbarUpdateTimeout;

    player: AnimationPlayer;

@@ -34,21 +57,21 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
        private fuseMatchMedia: FuseMatchMedia,
        private fuseNavigationService: FuseNavigationService,
        private navBarService: FuseNavbarVerticalService,
-        public media: ObservableMedia,
        private router: Router,
        private _renderer: Renderer2,
        private _elementRef: ElementRef,
-        private animationBuilder: AnimationBuilder
+        private animationBuilder: AnimationBuilder,
+        public media: ObservableMedia
    )
    {
        navBarService.setNavBar(this);

-        this.fuseNavigationService.onNavCollapseToggled.subscribe(() => {
-
-            setTimeout(() => {
-                this.fusePerfectScrollbarDirective.update();
-            }, 310);
-        });
+        this.navigationServiceWatcher =
+            this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this.fusePerfectScrollbarDirective.update();
+                }, 310);
+            });

        this.matchMediaWatcher =
            this.fuseMatchMedia.onMediaChange
@@ -86,7 +109,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
    ngOnInit()
    {
        this.isClosed = false;
-        this.isFoldedActive = this.foldedByDefault;
+        this.isFoldedActive = this._folded;
        this.isFoldedOpen = false;
        this.initialized = false;
        this.updateCssClasses();
@@ -102,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
        }
        else
        {
-            if ( !this.foldedByDefault )
+            if ( !this._folded )
            {
                this.deActivateFolded();
            }
@@ -113,8 +136,20 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
        }
    }

+    ngOnDestroy()
+    {
+        clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        this.matchMediaWatcher.unsubscribe();
+        this.navigationServiceWatcher.unsubscribe();
+    }
+
    openBar()
    {
+        if ( !this.isClosed )
+        {
+            return;
+        }
+
        this.isClosed = false;
        this.updateCssClasses();
        if ( this.media.isActive('lt-lg') )
@@ -125,6 +160,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy

    closeBar()
    {
+        if ( this.isClosed )
+        {
+            return;
+        }
+
        this.isClosed = true;
        this.updateCssClasses();
        this._detachBackdrop();
@@ -182,15 +222,15 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy

    updateCssClasses()
    {
-        if ( this.isClosed )
+        if ( !this.isClosed )
        {
-            this.fuseMainComponent.addClass('fuse-nav-bar-opened');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-closed');
+            this.fuseMainComponent.addClass('fuse-navbar-opened');
+            this.fuseMainComponent.removeClass('fuse-navbar-closed');
        }
        else
        {
-            this.fuseMainComponent.addClass('fuse-nav-bar-closed');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-opened');
+            this.fuseMainComponent.addClass('fuse-navbar-closed');
+            this.fuseMainComponent.removeClass('fuse-navbar-opened');
        }
    }

@@ -236,9 +276,4 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
            });
        }
    }
-
-    ngOnDestroy()
-    {
-        this.matchMediaWatcher.unsubscribe();
-    }
 }
@@ -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>
@@ -10,6 +10,8 @@ export class FuseQuickPanelComponent implements OnInit
 {
    date: Date;
    settings: any;
+    notes = [];
+    events = [];

    constructor()
    {
@@ -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"
-                    fuseNavbarVertical="openBar" fxHide.gt-md>
-                <md-icon>menu</md-icon>
+            <button mat-button class="toggle-button-navbar mat-icon-button"
+                    fuseNavbarVertical="toggleBar" fxHide.gt-md>
+                <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,35 @@

            <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)="setLanguage(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>
@@ -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;
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { FuseConfigService } from '../../core/services/config.service';
+import { TranslateService } from '@ngx-translate/core';

@Component({
    selector   : 'fuse-toolbar',
@@ -13,12 +14,13 @@ export class FuseToolbarComponent
    userStatusOptions: any[];
    languages: any;
    selectedLanguage: any;
-    showSpinner: boolean;
+    showLoadingBar: boolean;
    horizontalNav: boolean;

    constructor(
        private router: Router,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private translate: TranslateService
    )
    {
        this.userStatusOptions = [
@@ -55,11 +57,6 @@ export class FuseToolbarComponent
                'title': 'English',
                'flag' : 'us'
            },
-            {
-                'id'   : 'es',
-                'title': 'Spanish',
-                'flag' : 'es'
-            },
            {
                'id'   : 'tr',
                'title': 'Turkish',
@@ -73,11 +70,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;
                }
            });

@@ -92,4 +89,13 @@ export class FuseToolbarComponent
        // Do your search here...
        console.log(value);
    }
+
+    setLanguage(lang)
+    {
+        // Set the selected language for toolbar
+        this.selectedLanguage = lang;
+
+        // Use the selected language for translations
+        this.translate.use(lang.id);
+    }
 }
@@ -0,0 +1,12 @@
+export const locale = {
+    lang: 'en',
+    data: {
+        'NAV': {
+            'APPLICATIONS': 'Applications',
+            'SAMPLE'        : {
+                'TITLE': 'Sample',
+                'BADGE': '25'
+            }
+        }
+    }
+};
@@ -0,0 +1,12 @@
+export const locale = {
+    lang: 'tr',
+    data: {
+        'NAV': {
+            'APPLICATIONS': 'Programlar',
+            'SAMPLE'        : {
+                'TITLE': 'Örnek',
+                'BADGE': '15'
+            }
+        }
+    }
+};
@@ -1,4 +1,6 @@
-export class NavigationModel
+import { FuseNavigationModelInterface } from '../core/components/navigation/navigation.model';
+
+export class FuseNavigationModel implements FuseNavigationModelInterface
 {
    public model: any[];

@@ -6,16 +8,21 @@ export class NavigationModel
    {
        this.model = [
            {
-                'title': 'Applications',
-                'type' : 'group',
+                'id'      : 'applications',
+                'title'   : 'Applications',
+                'translate': 'NAV.APPLICATIONS',
+                'type'    : 'group',
                'children': [
                    {
+                        'id'   : 'sample',
                        'title': 'Sample',
+                        'translate': 'NAV.SAMPLE.TITLE',
                        'type' : 'item',
                        'icon' : 'email',
                        'url'  : '/sample',
                        'badge': {
                            'title': 25,
+                            'translate': 'NAV.SAMPLE.BADGE',
                            'bg'   : '#F44336',
                            'fg'   : '#FFFFFF'
                        }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	415d7cebfa	Skeleton updates	2017-12-14 16:20:52 +03:00
Sercan Yemen	f7d1995f63	Merge branch 'master' into skeleton	2017-12-14 16:06:32 +03:00
Sercan Yemen	e477f797d0	Updated Material Moment Adapter package	2017-12-14 16:06:07 +03:00
Sercan Yemen	3741abc063	Skeleton package updates	2017-12-14 16:03:34 +03:00
Sercan Yemen	54ccdd7de2	Merge branch 'master' into skeleton	2017-12-14 16:01:09 +03:00
Sercan Yemen	fb196c3864	Angular & Angular Material versions updated	2017-12-14 15:51:09 +03:00
mustafahlvc	5cf44962fc	(Mail) back arrow visibility updated for responsive	2017-12-14 12:27:08 +03:00
mustafahlvc	06b0c3775a	(Mail-ngrx) missing deSelectCurrentFunction() added to mail.component, back arrow visibility updated for responsive	2017-12-14 12:25:48 +03:00
mustafahlvc	26690990f0	(Mail-ngrx) currentMail fixes on html	2017-12-14 11:52:53 +03:00
mustafahlvc	377092d9ec	(Mail-ngrx) unread, selected class added for mail list item	2017-12-14 11:10:35 +03:00
mustafahlvc	abede386c8	(Mail-ngrx) Ngrx version of Mail App added.	2017-12-12 22:31:50 +03:00
Sercan Yemen	242feaa169	Updated Angular to 5.0.1 + Updated Angular Material to 5.0.0 stable + Install the ngx-dnd package from its original location + Updated various other packages + Increased the Fuse version	2017-12-08 10:34:39 +03:00
Sercan Yemen	7c2494a82c	Fixed: Shortcut items duplicates on search in some cases	2017-12-08 10:31:39 +03:00
Sercan Yemen	5c2e717a40	Make sure the nav item has children before trying to get them + Added LICENSE file + Renamed the KnowledgeBase demo module	2017-12-08 09:34:30 +03:00
Sercan Yemen	6ae0a9760d	Fix the missing backgrounds + Increased the shadow weight of the content on Auth, Coming Soon and Maintenance pages	2017-12-06 14:39:24 +03:00
Sercan Yemen	2a10f3e443	Moved the navigation.model.ts into its own folder + Added support for translations in nav items + Added badge support for collapsable nav items + Initialize the navigation from app.component rather then navigation.service	2017-12-06 14:10:48 +03:00
Sercan Yemen	db7a00440c	Re-activated mail search + Small formatting in mail translation	2017-12-06 14:09:31 +03:00
Sercan Yemen	0e1c589399	Use absolute paths for importing fuse.scss	2017-12-06 11:40:43 +03:00
Sercan Yemen	2f419b1af5	Removed unused HttpModule import	2017-12-06 11:40:16 +03:00
Sercan Yemen	effd3cefcb	Scrumboard and Contacts app dialogs responsive fixes	2017-12-06 11:35:58 +03:00
Sercan Yemen	21fd488a8e	ngx-color-picker style adjustments + Calendar event form responsive fixes	2017-12-06 11:26:57 +03:00
Sercan Yemen	37a5c69269	Removed Google Calendar images as they are no longer available freely from Google	2017-12-06 10:34:40 +03:00
Sercan Yemen	8b2e6b95b1	Merge branch 'master' into skeleton	2017-11-30 15:56:00 +03:00
Sercan Yemen	9f440b1bf2	Some code inspection fixes	2017-11-30 15:55:00 +03:00
Sercan Yemen	a65f61cce4	Form Stepper examples + Simplified the mat-select style + Further simplified the mat-select in dashboard widgets	2017-11-30 15:37:32 +03:00
Sercan Yemen	e86cea1e73	Merge branch 'master' into skeleton	2017-11-30 10:38:03 +03:00
Sercan Yemen	0d8fe0be72	Trigger expand/collapse of the navigation on ngOnInit to update the active item	2017-11-30 10:37:35 +03:00
Sercan Yemen	b81638690e	Merge branch 'master' into skeleton	2017-11-30 10:23:19 +03:00
Sercan Yemen	2bbc90af64	Perfect scrollbar shouldn't be destroyed if it's not available + Print media css classes updated to hide the perfect scrollbars	2017-11-30 10:22:18 +03:00
Sercan Yemen	ad21d9fed5	Further improvements to Auth pages	2017-11-30 10:21:22 +03:00
Sercan Yemen	4c6ef29e20	Fixed: Behavior Subject must be array	2017-11-28 10:48:52 +03:00
Sercan Yemen	a74c5108fd	Fixed: Couple small issues with Auth forms Added custom validator for Password Matching to Register forms	2017-11-28 10:42:41 +03:00
Sercan Yemen	20ac3abb25	Merge branch 'master' into skeleton	2017-11-27 17:21:38 +03:00
Sercan Yemen	19fdbbdbcb	Increased version number Fixed: Sidenav helper causes issues on mobile media steps	2017-11-27 17:20:34 +03:00
Sercan Yemen	f634cb06a7	Merge branch 'master' into skeleton	2017-11-27 14:42:23 +03:00
Sercan Yemen	7d67a481ff	Merge branch 'master' into skeleton	2017-11-27 14:35:37 +03:00
Sercan Yemen	8bbabd7437	Corrected the version number	2017-11-27 14:31:57 +03:00
Sercan Yemen	5a9cd36282	Increased the Fuse version number + Updated Angular, Angular Material and Flex Layout + Updated various components for better Angular5 support + Fixed: Contacts app various issues + Fixed: Duplicate content in Profile page tabs + Fixed: Folded status of the Navbar shouldn't brake the layout if Horizontal Navbar is active	2017-11-27 14:28:08 +03:00
mustafahlvc	297bb95a2e	Temporary aot build fix for @swimlane/ngx-charts	2017-11-18 01:43:08 +03:00
Sercan Yemen	2511a03b66	Increased the Fuse version number + Updated ngx-charts and ngx-datatables + added rxjs imports for the various search	2017-11-18 00:45:42 +03:00
mustafahlvc	76358f996e	Angular material docs updated, + @angular/material-moment-adapter added to package.json	2017-11-17 18:35:44 +03:00
mustafahlvc	142fc982ca	Angular updated to 5.0.2, angular-cli updated to 1.5.2, + angular-material-elements and fakeDb folder excluded from linting, + some lint errors solved.	2017-11-17 16:57:42 +03:00
Sercan Yemen	22d9279e3b	Fix: Authentication (v2) pages not scrollable when custom scrollbars disabled	2017-11-14 09:35:03 +03:00
Sercan Yemen	4659da7390	Added missing variables that prevents skeleton from building as it is	2017-11-13 12:30:11 +03:00
Sercan Yemen	2a5d15694c	Merge branch 'master' into skeleton	2017-11-13 11:09:27 +03:00
Sercan Yemen	a1bec98d44	Todo adjustments	2017-11-13 11:04:57 +03:00
Sercan Yemen	e8449e340d	Contact list checkbox rendering broken due to ripple	2017-11-13 10:45:16 +03:00
Sercan Yemen	4cb8009c69	Scrumboard label selector not working correctly + style refinements	2017-11-13 10:36:32 +03:00
Sercan Yemen	7f357306eb	Angular 5.0.1 & Angular Material 5.0.0-rc0 compatibility (wip)	2017-11-12 22:36:14 +03:00
Sercan Yemen	8e6024c3ee	Fixes #44 : Removed angular material elements assets	2017-11-08 15:11:20 +03:00
Sercan Yemen	f4c47daadc	Merge branch 'master' into skeleton	2017-11-08 15:10:51 +03:00
Sercan Yemen	06679343a4	Fixes #44 : Example e2e test file content is wrong + Renamed 'mat-sidenav-helper' files/folders to 'fuse-mat-sidenav-helper' & fixed its import issues	2017-11-08 15:08:40 +03:00
Sercan Yemen	381bc6c0fe	Merge branch 'master' into skeleton	2017-11-04 16:50:03 +03:00
Sercan Yemen	f35d83567e	Update the footer button text	2017-11-04 16:49:47 +03:00
Sercan Yemen	b5a139f81d	Merge branch 'master' into skeleton	2017-11-04 16:32:29 +03:00
Sercan Yemen	c97fd77c13	Updated title	2017-11-04 16:32:12 +03:00
Sercan Yemen	914477da41	Merge branch 'master' into skeleton	2017-11-04 16:25:09 +03:00
Sercan Yemen	410802808e	Merge branch 'master' into skeleton	2017-11-04 16:20:46 +03:00
Sercan Yemen	62904cdb42	Updated readme file	2017-11-04 16:15:00 +03:00
Sercan Yemen	d9c36cad82	Fix: Angular 5 AoT issues	2017-11-04 16:14:12 +03:00
Sercan Yemen	d2bfc152a0	Fix: Some css issues after updating the ngx-datatable	2017-11-04 14:00:26 +03:00
Sercan Yemen	f013b2b667	Angular 5 compatibility (wip) + Fuse2 version: 1.2.0	2017-11-04 13:41:40 +03:00
Sercan Yemen	9fbcc20623	Fix: Navbar vertical puts out wrong classes	2017-11-04 13:41:24 +03:00
Sercan Yemen	0fd8a75f7d	Added exactMatch parameter to the navigation items for correctly highlighting them	2017-11-04 13:39:18 +03:00
Sercan Yemen	99d9552813	Added E-Commerce pages to the navigation for easier access	2017-11-04 12:49:38 +03:00
Sercan Yemen	3bca193bcc	Fixes #39 : Nav item not showing in Horizontal menu + its height is not correct	2017-11-04 12:46:40 +03:00
Sercan Yemen	f73ff363a5	Small fixes on cards	2017-11-04 12:45:12 +03:00
Sercan Yemen	1bf689f154	Angular 5 compatibility (wip)	2017-11-02 12:52:27 +03:00
Sercan Yemen	3499d89098	Angular 5 compatibility (wip)	2017-11-02 12:52:05 +03:00
Sercan Yemen	685cd76da2	Fixed: Minor issues with E-Commerce app + Fixed: Navigation collapsable items don't expand if the url has extra parameters in it	2017-11-02 11:16:24 +03:00
Sercan Yemen	786180958d	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-11-02 10:47:33 +03:00
Sercan Yemen	a2f72c92d5	New: Material design cards	2017-11-02 10:47:28 +03:00
mustafahlvc	6b368d2e79	Merge remote-tracking branch 'origin/master'	2017-11-01 14:32:42 +03:00
mustafahlvc	47c2cc721e	E-commerce App added.	2017-11-01 14:32:25 +03:00
Sercan Yemen	5574e3f729	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-10-31 10:08:04 +03:00
Sercan Yemen	1934bad3eb	Fixes #33 : Toolbar navigation bar button should toggle the navigation bar	2017-10-31 10:06:49 +03:00
Sercan Yemen	ee29f20304	Added an ability to control the folded status of the vertical navigation via FuseConfig	2017-10-30 13:31:23 +03:00
mustafahlvc	93c2eab584	Merge remote-tracking branch 'origin/master'	2017-10-27 18:22:44 +03:00
mustafahlvc	b0f45980be	ngx-datatable data fake api data fix.	2017-10-27 18:22:14 +03:00
Sercan Yemen	56dbc58d5e	Merge branch 'master' into skeleton + Added translation example to the sample page	2017-10-27 12:01:09 +03:00
Sercan Yemen	d7c6b2d617	Merge branch 'master' into skeleton	2017-10-27 11:49:31 +03:00
Sercan Yemen	7b10b2ad86	Added docs about vertical navigation default folded status	2017-10-27 11:45:11 +03:00
Sercan Yemen	3fc510469d	New: Knowledge base page design	2017-10-25 13:09:35 +03:00
Sercan Yemen	5d56b3bcd6	Small typo on FAQ page	2017-10-25 13:09:17 +03:00
Sercan Yemen	aaa14eb1e9	Fixed: Stagger animation doesn't have {optional:true}	2017-10-25 10:15:19 +03:00
Sercan Yemen	f43608f93b	Added a "Learn more" link to the language switcher for the demo	2017-10-24 16:02:09 +03:00
Sercan Yemen	9ecd921722	File based translations - multi language + Example in the Mail app + Component/doc page for translations	2017-10-24 15:41:44 +03:00
Sercan Yemen	98e2ff0e1e	Small adjustment on the FAQ page header	2017-10-24 11:47:10 +03:00
Sercan Yemen	b7cb09b087	Small adjustment on the layout mode setting	2017-10-24 11:02:40 +03:00
Sercan Yemen	fe8b44b14c	Fixed: FAQ page header shrinks on small heights	2017-10-24 10:19:17 +03:00
Sercan Yemen	ca8ed939ae	Added new tabbed versions of the carded sidenav layouts + Small tweaks on other carded sidenav layouts	2017-10-23 14:39:44 +03:00
Sercan Yemen	4469a2c25a	Fix: iOS10 scrolling issue in dashboard	2017-10-23 10:51:28 +03:00
Sercan Yemen	80627bdde9	removed fake-db thingy	2017-10-16 10:50:57 +03:00
Sercan Yemen	6595975f2b	Merge branch 'master' into skeleton	2017-10-16 10:45:27 +03:00
Sercan Yemen	895291c37c	Updated Fuse version + Removed unnecessary dev dependencies and updated couple of them	2017-10-16 10:45:08 +03:00
Sercan Yemen	dcb8032758	Merge branch 'master' into skeleton	2017-10-16 10:10:06 +03:00
Sercan Yemen	ac7e6f75bc	Added theme options openBar function to the navigation as an example + Removed duplicate Black and White tabs from colors	2017-10-16 10:08:40 +03:00
Sercan Yemen	fb214da5fe	Merge branch 'master' into skeleton	2017-10-14 18:53:08 +03:00
Sercan Yemen	e20687034f	Merge branch 'master' into skeleton	2017-10-14 18:53:00 +03:00
Sercan Yemen	bd8b02c82d	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-10-14 18:44:17 +03:00
Sercan Yemen	6d594d63db	Added a way of accessing and updating nav items + Added an ability to add custom functions to the nav items	2017-10-14 18:44:11 +03:00
mustafahlvc	6656410696	Calendar, Scrumboard Apps datepicker fixes.	2017-10-13 17:50:59 +03:00
mustafahlvc	470b851eae	colors styling fix.	2017-10-13 15:43:22 +03:00
mustafahlvc	fbe9cb83a2	missing destroy function added for Faq page.	2017-10-13 15:39:18 +03:00
mustafahlvc	13a09164ae	Faq page added.	2017-10-13 15:37:30 +03:00
Sercan Yemen	56d9830176	Fixed: Lock page layout issues	2017-10-13 14:39:46 +03:00
Sercan Yemen	be820804f2	New mail confirmation page	2017-10-13 14:22:59 +03:00
Sercan Yemen	7615bc1d03	Removed pricing tables from components	2017-10-13 12:24:13 +03:00
Sercan Yemen	3198663430	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-10-13 12:21:07 +03:00
Sercan Yemen	ad432ca31d	New pricing page design + Fixed: Some color issues + Fixed: Icons and Quick Nav in memory web api related data issues	2017-10-13 12:21:00 +03:00
mustafahlvc	7d26beff3d	angular updated to v4.4.5	2017-10-13 12:13:03 +03:00
mustafahlvc	4711a27814	Merge remote-tracking branch 'origin/master'	2017-10-13 11:58:12 +03:00
mustafahlvc	8205a4d5b5	<agm-map> Google Maps component library added, + some style refinements on doc pages.	2017-10-13 11:57:54 +03:00
Sercan Yemen	4f451a74e9	fixed custom colors	2017-10-12 17:40:27 +03:00
Sercan Yemen	8518408254	Merge branch 'master' of https://github.com/withinpixels/fuse2	2017-10-12 14:29:13 +03:00
Sercan Yemen	72f968b594	Fix: Auth page v2 styles iOS height issue + Fix: Perfect scrollbar causes issues on outside of the zone + Fix: Navigation must unsubscribe the nav toggle and clear the timeout + Fix: Chat view is not scrollable on mobile + Fix: Terms & Conditions checkbox styling issues on Auth forms + Fix: Sidenav z-index issue on certain page layouts + Fix: Some page layout header heights not correct on small devices	2017-10-12 14:28:58 +03:00
mustafahlvc	688b443ea8	<mat-select> wrapped with <mat-form-field> and fixed relative issues.	2017-10-12 14:05:22 +03:00
mustafahlvc	cb89da4647	angular-in-memory-web-api updated to v0.5.0, (HTTP response data no longer wrapped in object w/ data property by default.)	2017-10-12 13:05:56 +03:00
Sercan Yemen	cc4a04afcb	Removed fxFlexFill from main-content in an attempt to fix iOS scrolling and sizing issues + Updated Perfect scrollbar + updated various packages like zone-js & core-js + small tweak on contacts list item padding + removed md2 datepicker color tweak	2017-10-12 12:42:11 +03:00
mustafahlvc	bc239571a1	@angular/material v2.0.0-beta.12 examples updated.	2017-10-10 17:19:07 +03:00
mustafahlvc	c025563145	Merge remote-tracking branch 'origin/master' # Conflicts: # src/app/core/services/config.service.ts	2017-10-10 16:40:29 +03:00
mustafahlvc	c06e99dc97	@angular/material v2.0.0-beta.12 compability update, Lots of breaking changes, all "md" prefixes changed with "mat" due to angular material deprecation of "md", md2 package removed, its not compatible with latest material version, will be replaced with another date picker later.	2017-10-10 16:37:24 +03:00
Sercan Yemen	c0a1dc7c37	Changed default navbar and footer colorsˆ	2017-10-09 14:22:12 +03:00
Sercan Yemen	55e1d8b2bc	New Reset and Forgot password styles	2017-10-09 14:17:27 +03:00
Sercan Yemen	533f5f3f3f	removed unnecessary console.logs and added possible route animations	2017-10-09 12:32:40 +03:00
Sercan Yemen	f9bda99deb	Merge branch 'master' into skeleton	2017-10-02 10:15:00 +03:00
Sercan Yemen	4a7b70c874	Fixes #16 : Inconsistent font sizes across elements	2017-10-02 10:14:20 +03:00
Sercan Yemen	c101c432dc	Fixes #14 : Toolbar search bar button collapses on close	2017-10-02 10:01:22 +03:00
Sercan Yemen	04d1b2eff8	Fixes #9 : print styles and page breaks	2017-09-29 12:06:47 +03:00
Sercan Yemen	1d81e37a0f	removed markdown module imports	2017-09-28 13:00:44 +03:00
Sercan Yemen	83f0ed5ec1	Merge branch 'master' into skeleton	2017-09-28 12:52:59 +03:00
Sercan Yemen	f800dc3286	updated footer links	2017-09-28 12:52:34 +03:00
Sercan Yemen	e486413872	remove unnecessary stuff from skeleton	2017-09-28 12:51:15 +03:00
Sercan Yemen	576e167ef1	Merge branch 'master' into skeleton	2017-09-28 12:49:18 +03:00
Sercan Yemen	619433f101	updated version number	2017-09-28 12:43:27 +03:00
mustafahlvc	3e9ae83aae	Angular Material reference url fix	2017-09-28 12:26:33 +03:00
mustafahlvc	9400c3d748	Responsive refinement on some doc pages, Navigation scrool fix on collapse toggled.	2017-09-28 12:22:33 +03:00
mustafahlvc	5e4940fed9	IconSvgExample Component path corrected.	2017-09-28 11:05:11 +03:00
mustafahlvc	8910e6f5dc	angular-in-memory-web-api updated, + Http changed with HttpClient, + Angular Material Element examples added, + angular2-markdown Library added	2017-09-27 19:41:01 +03:00
mustafahlvc	52c5e6a18b	Nested group vertical navigation indentation fix	2017-09-27 18:45:24 +03:00
mustafahlvc	3d9ded9a44	Nested Group feature added to navigation	2017-09-26 11:58:34 +03:00
mustafahlvc	1be3f0066b	Angular Material updated to 2.0.0-beta.11: Do not change the prefixes md to mat for this release; They don't completely migrate.	2017-09-26 10:04:45 +03:00
				`@@ -0,0 +1 @@`
				`https://themeforest.net/licenses/terms/regular`