Merge branch 'master' into skeleton

2025-12-24 06:47:06 +00:00 · 2017-09-22 16:45:47 +03:00 · 2017-09-22 16:45:23 +03:00 · 2017-09-12 16:06:21 +03:00 · 2017-09-11 16:34:07 +03:00 · 2017-09-11 16:21:05 +03:00
1102 changed files with 5704 additions and 69471 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -9,7 +9,6 @@
            "outDir": "dist",
            "assets": [
                "assets",
-                "app/main/content/components/angular-material",
                "favicon.ico"
            ],
            "index": "index.html",
@@ -38,28 +37,13 @@
    },
    "lint": [
        {
-            "project": "src/tsconfig.app.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
+            "project": "src/tsconfig.app.json"
        },
        {
-            "project": "src/tsconfig.spec.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
+            "project": "src/tsconfig.spec.json"
        },
        {
-            "project": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
+            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
--- a/1
+++ b/1
@@ -1 +0,0 @@
-https://themeforest.net/licenses/terms/regular
--- a/README.md
+++ b/README.md
@@ -1,12 +1,6 @@
 # Fuse2

-Material Design Admin Template with Angular 5+ and Angular Material 2
-
-## The Community
-
-Share your ideas, discuss Fuse and help each other.
-
-[Click here](http://fusetheme.com/community) to see our Community page.
+Material Design Admin Template with Angular 4+ and Angular Material 2

 ## Development server

--- a/e2e/app.e2e-spec.ts
+++ b/e2e/app.e2e-spec.ts
@@ -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!!');
+  });
 });
--- a/e2e/app.po.ts
+++ b/e2e/app.po.ts
@@ -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();
+  }
 }
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@@ -2,12 +2,10 @@
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
-      "jasminewd2",
      "node"
    ]
  }
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,33 +1,33 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
+// https://karma-runner.github.io/0.13/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
+  });
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,85 +1,75 @@
 {
-  "name": "fuse",
-  "version": "5.2.8",
-  "license": "https://themeforest.net/licenses/terms/regular",
+  "name": "fuse2",
+  "version": "1.1.0",
+  "license": "",
  "scripts": {
    "ng": "ng",
-    "start": "ng serve --open",
+    "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=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+    "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",
    "test": "ng test",
    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
-    "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.8",
-    "@angular/cdk": "5.2.4",
-    "@angular/common": "5.2.8",
-    "@angular/compiler": "5.2.8",
-    "@angular/core": "5.2.8",
-    "@angular/flex-layout": "5.0.0-beta.13",
-    "@angular/forms": "5.2.8",
-    "@angular/http": "5.2.8",
-    "@angular/material": "5.2.4",
-    "@angular/material-moment-adapter": "5.2.4",
-    "@angular/platform-browser": "5.2.8",
-    "@angular/platform-browser-dynamic": "5.2.8",
-    "@angular/router": "5.2.8",
-    "@ngrx/effects": "5.2.0",
-    "@ngrx/router-store": "5.2.0",
-    "@ngrx/store": "5.2.0",
-    "@ngrx/store-devtools": "5.2.0",
-    "@ngx-translate/core": "9.1.1",
-    "@swimlane/ngx-charts": "7.1.1",
-    "@swimlane/ngx-datatable": "11.2.0",
-    "@swimlane/ngx-dnd": "3.1.0",
-    "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.6",
-    "angular-in-memory-web-api": "0.5.3",
-    "chart.js": "2.7.2",
+    "@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",
    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.13.0",
+    "core-js": "2.5.0",
+    "d3": "4.10.0",
    "hammerjs": "2.0.8",
+    "highlight.js": "9.12.0",
    "intl": "1.2.5",
-    "moment": "2.21.0",
-    "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.1",
-    "ngx-color-picker": "5.3.4",
-    "ngx-cookie-service": "1.0.10",
-    "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.11.0",
-    "rxjs": "5.5.6",
+    "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",
    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.20"
+    "zone.js": "0.8.17"
  },
  "devDependencies": {
-    "@angular/cli": "1.7.3",
-    "@angular/compiler-cli": "5.2.8",
-    "@angular/language-service": "5.2.8",
+    "@angular/cli": "1.4.2",
+    "@angular/compiler-cli": "4.4.3",
+    "@angular/language-service": "4.4.3",
    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.6",
-    "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.101",
-    "codelyzer": "4.2.1",
-    "jasmine-core": "2.8.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "2.0.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "1.4.2",
-    "karma-jasmine": "1.1.1",
+    "@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",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
+    "node-sass": "4.5.3",
    "protractor": "5.1.2",
-    "ts-node": "4.1.0",
-    "tslint": "5.9.1",
-    "typescript": "2.6.2",
-    "webpack-bundle-analyzer": "2.11.1"
+    "ts-node": "3.0.4",
+    "tslint": "5.3.2",
+    "typescript": "2.3.3"
  }
 }
--- a/protractor.conf.js
+++ b/protractor.conf.js
@@ -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 } }));
+  }
 };
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.component.html
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.component.html
@@ -1,6 +0,0 @@
-<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>
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.component.ts
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
-
-@Component({
-    selector   : 'fuse-confirm-dialog',
-    templateUrl: './confirm-dialog.component.html',
-    styleUrls  : ['./confirm-dialog.component.scss']
-})
-export class FuseConfirmDialogComponent
-{
-    public confirmMessage: string;
-
-    constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
-    {
-    }
-
-}
--- a/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
+++ b/src/@fuse/components/confirm-dialog/confirm-dialog.module.ts
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule, MatDialogModule } from '@angular/material';
-
-import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
-
-@NgModule({
-    declarations: [
-        FuseConfirmDialogComponent
-    ],
-    imports: [
-        MatDialogModule,
-        MatButtonModule
-    ],
-    entryComponents: [
-        FuseConfirmDialogComponent
-    ],
-})
-export class FuseConfirmDialogModule
-{
-}
--- a/src/@fuse/components/countdown/countdown.module.ts
+++ b/src/@fuse/components/countdown/countdown.module.ts
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
-
-@NgModule({
-    declarations: [
-        FuseCountdownComponent
-    ],
-    exports: [
-        FuseCountdownComponent
-    ],
-})
-export class FuseCountdownModule
-{
-}
--- a/src/@fuse/components/demo/demo-content/demo-content.component.html
+++ b/src/@fuse/components/demo/demo-content/demo-content.component.html
@@ -1,75 +0,0 @@
-<!-- DEMO CONTENT -->
-<div class="demo-content">
-
-    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
-
-    <h1>Early Sunrise</h1>
-    <h4 class="secondary-text">Demo Content</h4>
-
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
-        auctor venenatis nisl. Suspendisse potenti. Nullam sagittis nulla in diam finibus, sed pharetra velit
-        vestibulum. Suspendisse euismod in urna eu posuere.
-    </p>
-
-    <blockquote>
-        <p>
-            Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
-            et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
-            sollicitudin. Donec viverra augue dolor, a venenatis tellus consectetur sit amet.
-        </p>
-        <footer>
-            John Doe
-        </footer>
-    </blockquote>
-
-    <p>
-        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
-        nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
-        habitasse platea dictumst.
-    </p>
-
-    <p>
-        In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
-        Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
-        Nulla id euismod mi, et mollis tellus.
-    </p>
-
-    <p>
-        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae sagittis odio.
-        Suspendisse ullamcorper nunc non pellentesque laoreet. Curabitur eu tortor id quam pretium mattis. Proin ut quam
-        velit.
-    </p>
-
-    <p>
-        Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
-        in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
-        feugiat, sagittis nec ipsum. Quisque dapibus mollis felis non tristique.
-    </p>
-
-    <p>
-        Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
-        ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
-        sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
-        fringilla nulla, sit amet congue felis dignissim at.
-    </p>
-
-    <p>
-        Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
-        eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
-        iaculis metus. Praesent pulvinar quam eu leo consectetur faucibus. Vestibulum purus diam, gravida sagittis
-        feugiat sit amet, tincidunt in ligula. Sed semper vestibulum magna. Lorem ipsum dolor sit amet, consectetur
-        adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec, auctor venenatis nisl. Suspendisse potenti.
-    </p>
-
-    <p>
-        Nullam sagittis nulla in diam finibus, sed pharetra velit vestibulum. Suspendisse euismod in urna eu posuere.
-        Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
-        lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
-        id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
-        viverra augue dolor, a venenatis tellus consectetur sit amet...
-    </p>
-</div>
-<!-- / DEMO CONTENT -->
--- a/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.html
+++ b/src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.html
@@ -1,100 +0,0 @@
-<div class="demo-sidenav">
-    <mat-list>
-        <h3 matSubheader>Sidenav Demo</h3>
-
-        <mat-list-item>
-            <span>Sidenav Item 1</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 2</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 3</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 4</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 5</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 6</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 7</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 8</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 9</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 10</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 11</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 12</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 13</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 14</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 15</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidenav Item 16</span>
-        </mat-list-item>
-
-    </mat-list>
-</div>
--- a/src/@fuse/components/highlight/highlight.component.scss
+++ b/src/@fuse/components/highlight/highlight.component.scss
@@ -1,6 +0,0 @@
-:host {
-    display: block;
-    padding: 8px;
-    background: #263238;
-    cursor: text;
-}
--- a/src/@fuse/components/highlight/highlight.component.ts
+++ b/src/@fuse/components/highlight/highlight.component.ts
@@ -1,102 +0,0 @@
-import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import * as Prism from 'prismjs/prism';
-import './prism-languages';
-
-@Component({
-    selector : 'fuse-highlight',
-    template : ' ',
-    styleUrls: ['./highlight.component.scss']
-})
-export class FuseHighlightComponent implements OnInit
-{
-    @ContentChild('source') source: ElementRef;
-    @Input('lang') lang: string;
-    @Input('path') path: string;
-
-    constructor(
-        private elementRef: ElementRef,
-        private http: HttpClient
-    )
-    {
-    }
-
-    ngOnInit()
-    {
-        // If there is no language defined, return...
-        if ( !this.lang )
-        {
-            return;
-        }
-
-        // If the path is defined...
-        if ( this.path )
-        {
-            // Get the source
-            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
-
-                // Highlight it
-                this.highlight(response);
-            });
-        }
-
-        // If the path is not defined and the source element exists...
-        if ( !this.path && this.source )
-        {
-            // Highlight it
-            this.highlight(this.source.nativeElement.value);
-        }
-    }
-
-    highlight(sourceCode)
-    {
-        // Split the source into lines
-        const sourceLines = sourceCode.split('\n');
-
-        // Remove the first and the last line of the source
-        // code if they are blank lines. This way, the html
-        // can be formatted properly while using fuse-highlight
-        // component
-        if ( !sourceLines[0].trim() )
-        {
-            sourceLines.shift();
-        }
-
-        if ( !sourceLines[sourceLines.length - 1].trim() )
-        {
-            sourceLines.pop();
-        }
-
-        // Find the first non-whitespace char index in
-        // the first line of the source code
-        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
-
-        // Generate the trimmed source
-        let source = '';
-
-        // Iterate through all the lines
-        sourceLines.forEach((line, index) => {
-
-            // Trim the beginning white space depending on the index
-            // and concat the source code
-            source = source + line.substr(indexOfFirstChar, line.length);
-
-            // If it's not the last line...
-            if ( index !== sourceLines.length - 1 )
-            {
-                // Add a line break at the end
-                source = source + '\n';
-            }
-        });
-
-        // Generate the highlighted code
-        const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
-
-        // Replace the innerHTML of the component with the highlighted code
-        this.elementRef.nativeElement.innerHTML =
-            '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
-
-    }
-}
-
--- a/src/@fuse/components/highlight/highlight.module.ts
+++ b/src/@fuse/components/highlight/highlight.module.ts
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
-
-@NgModule({
-    declarations: [
-        FuseHighlightComponent
-    ],
-    exports: [
-        FuseHighlightComponent
-    ],
-})
-export class FuseHighlightModule
-{
-}
--- a/src/@fuse/components/highlight/prism-languages.ts
+++ b/src/@fuse/components/highlight/prism-languages.ts
@@ -1,16 +0,0 @@
-import 'prismjs/prism';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-cpp';
-import 'prismjs/components/prism-csharp';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-diff';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-perl';
-import 'prismjs/components/prism-php';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-sass';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-typescript';
--- a/src/@fuse/components/index.ts
+++ b/src/@fuse/components/index.ts
@@ -1,11 +0,0 @@
-export * from './confirm-dialog/confirm-dialog.module';
-export * from './countdown/countdown.module';
-export * from './demo/demo.module';
-export * from './highlight/highlight.module';
-export * from './material-color-picker/material-color-picker.module';
-export * from './navigation/navigation.module';
-export * from './search-bar/search-bar.module';
-export * from './shortcuts/shortcuts.module';
-export * from './sidebar/sidebar.module';
-export * from './theme-options/theme-options.module';
-export * from './widget/widget.module';
--- a/src/@fuse/components/material-color-picker/material-color-picker.component.html
+++ b/src/@fuse/components/material-color-picker/material-color-picker.component.html
@@ -1,70 +0,0 @@
-<button mat-icon-button
-        type="button"
-        class="mat-elevation-z1"
-        [matMenuTriggerFor]="colorMenu"
-        (menuOpened)="onMenuOpen()"
-        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
-    <mat-icon>palette</mat-icon>
-</button>
-
-<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
-
-    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4"
-            fxLayout="row" fxLayoutAlign="space-between center">
-
-        <button mat-icon-button
-                [style.visibility]="view==='hues'?'visible':'hidden'"
-                (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
-            <mat-icon class="s-20">arrow_back</mat-icon>
-        </button>
-
-        <span *ngIf="selectedColor?.palette">
-            {{selectedColor.palette}} {{selectedColor.hue}}
-        </span>
-
-        <span *ngIf="!selectedColor?.palette">
-            Select Color
-        </span>
-
-        <button mat-icon-button
-                class="remove-color-button"
-                (click)="$event.stopPropagation();removeColor()"
-                aria-label="Remove Color">
-            <mat-icon class="s-20">delete</mat-icon>
-        </button>
-    </header>
-
-
-    <div [ngSwitch]="view" class="views">
-
-        <div class="view" *ngSwitchCase="'palettes'">
-
-            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color"
-                     [ngClass]="'mat-'+color.key+'-bg'"
-                     *ngFor="let color of (colors | keys)"
-                     (click)="$event.stopPropagation();selectPalette(color.key)"
-                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                    <span class="label">
-                        {{color.key}}
-                    </span>
-                </div>
-            </div>
-        </div>
-
-        <div class="view" *ngSwitchCase="'hues'" >
-            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color" *ngFor="let hue of hues"
-                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
-                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
-                     (click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                    <span class="label">
-                        {{hue}}
-                    </span>
-                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
-                </div>
-            </div>
-        </div>
-
-    </div>
-</mat-menu>
--- a/src/@fuse/components/material-color-picker/material-color-picker.module.ts
+++ b/src/@fuse/components/material-color-picker/material-color-picker.module.ts
@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FlexLayoutModule } from '@angular/flex-layout';
-
-import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
-
-import { FusePipesModule } from '@fuse/pipes/pipes.module';
-
-import { FuseMaterialColorPickerComponent } from '@fuse/components/material-color-picker/material-color-picker.component';
-
-@NgModule({
-    declarations: [
-        FuseMaterialColorPickerComponent
-    ],
-    imports: [
-        CommonModule,
-
-        FlexLayoutModule,
-
-        MatButtonModule,
-        MatIconModule,
-        MatMenuModule,
-        MatRippleModule,
-
-        FusePipesModule
-    ],
-    exports: [
-        FuseMaterialColorPickerComponent
-    ],
-})
-export class FuseMaterialColorPickerModule
-{
-}
--- a/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -1,23 +0,0 @@
-<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}">
-
-    <div class="{{fuseSettings.colorClasses.navbar}}">
-
-        <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>
-
-</div>
--- a/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
+++ b/src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
@@ -1,18 +0,0 @@
-<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>
--- a/src/@fuse/components/navigation/navigation.component.scss
+++ b/src/@fuse/components/navigation/navigation.component.scss
@@ -1,12 +0,0 @@
-@import 'src/@fuse/scss/fuse';
-
-fuse-navigation {
-    display: flex;
-    flex: 1 0 auto;
-
-    #main-navigation {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-    }
-}
--- a/src/@fuse/components/navigation/navigation.component.ts
+++ b/src/@fuse/components/navigation/navigation.component.ts
@@ -1,18 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector     : 'fuse-navigation',
-    templateUrl  : './navigation.component.html',
-    styleUrls    : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class FuseNavigationComponent
-{
-    @Input() layout = 'vertical';
-    @Input() navigation: any;
-
-    constructor()
-    {
-
-    }
-}
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -1,48 +0,0 @@
-import { EventEmitter, Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-
-@Injectable()
-export class FuseNavigationService
-{
-    flatNavigation: any[] = [];
-
-    onItemCollapsed: Subject<any> = new Subject;
-    onItemCollapseToggled: Subject<any> = new Subject;
-
-    constructor()
-    {
-    }
-
-    /**
-     * Get flattened navigation array
-     * @param navigation
-     * @returns {any[]}
-     */
-    getFlatNavigation(navigation)
-    {
-        for ( const navItem of navigation )
-        {
-            if ( navItem.type === 'item' )
-            {
-                this.flatNavigation.push({
-                    title: navItem.title,
-                    type : navItem.type,
-                    icon : navItem.icon || false,
-                    url  : navItem.url
-                });
-
-                continue;
-            }
-
-            if ( navItem.type === 'collapse' || navItem.type === 'group' )
-            {
-                if ( navItem.children )
-                {
-                    this.getFlatNavigation(navItem.children);
-                }
-            }
-        }
-
-        return this.flatNavigation;
-    }
-}
--- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -1,21 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <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>
-
-</ng-container>
--- a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html
+++ b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html
@@ -1,15 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <div class="group-title">
-        <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>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
-            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
-        </ng-container>
-    </div>
-
-</ng-container>
--- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
+++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
@@ -1,22 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <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>
-
-</ng-container>
--- a/src/@fuse/components/shortcuts/shortcuts.component.html
+++ b/src/@fuse/components/shortcuts/shortcuts.component.html
@@ -1,89 +0,0 @@
-<div id="fuse-shortcuts" #shortcuts>
-
-    <div class="shortcuts-mobile-toggle" *ngIf="!mobileShortcutsPanelActive" fxLayout="row" fxLayoutAlign="start center"
-         fxHide fxShow.lt-md>
-        <button mat-icon-button (click)="showMobileShortcutsPanel()">
-            <mat-icon class="amber-600-fg">star</mat-icon>
-        </button>
-    </div>
-
-    <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
-
-        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
-
-            <div fxLayout="row" fxLayoutAlign="start center">
-
-                <div class="w-40 h-40 p-4" fxLayout="row" fxLayoutAlign="center center"
-                     *ngFor="let shortcutItem of shortcutItems">
-
-                    <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>
-                    </a>
-
-                </div>
-
-                <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 mat-icon-button (click)="hideMobileShortcutsPanel()">
-                    <mat-icon>close</mat-icon>
-                </button>
-            </div>
-
-        </div>
-
-        <mat-menu #addMenu="matMenu" class="w-240">
-
-            <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>
-
-            <mat-divider></mat-divider>
-            <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
-
-                <mat-list-item *ngFor="let shortcutItem of shortcutItems"
-                               (click)="toggleShortcut($event, shortcutItem)">
-                    <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <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 matLine fxFlex>{{shortcutItem.title}}</p>
-                        <mat-icon class="ml-8">star</mat-icon>
-                    </div>
-                </mat-list-item>
-                <mat-list-item *ngIf="shortcutItems.length === 0">
-                    <p>
-                        <small>No shortcuts yet!</small>
-                    </p>
-                </mat-list-item>
-            </mat-nav-list>
-
-            <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">
-                        <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 matLine fxFlex>{{navigationItem.title}}</p>
-                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
-                    </div>
-                </mat-list-item>
-            </mat-nav-list>
-        </mat-menu>
-
-    </div>
-
-</div>
--- a/src/@fuse/components/shortcuts/shortcuts.module.ts
+++ b/src/@fuse/components/shortcuts/shortcuts.module.ts
@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
-import { CookieService } from 'ngx-cookie-service';
-
-import { FuseShortcutsComponent } from './shortcuts.component';
-
-@NgModule({
-    declarations: [
-        FuseShortcutsComponent
-    ],
-    imports     : [
-        CommonModule,
-        RouterModule,
-
-        FlexLayoutModule,
-
-        MatButtonModule,
-        MatDividerModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatListModule,
-        MatTooltipModule
-    ],
-    exports     : [
-        FuseShortcutsComponent
-    ],
-    providers   : [
-        CookieService
-    ]
-})
-export class FuseShortcutsModule
-{
-}
--- a/src/@fuse/components/sidebar/sidebar.component.html
+++ b/src/@fuse/components/sidebar/sidebar.component.html
@@ -1 +0,0 @@
-<ng-content></ng-content>
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -1,59 +0,0 @@
-fuse-sidebar {
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 auto;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    overflow: hidden;
-    width: 280px;
-    min-width: 280px;
-    max-width: 280px;
-    z-index: 1000;
-    transition-property: transform, width, min-width, max-width;
-    transition-duration: 150ms;
-    transition-timing-function: ease-in-out;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
-
-    &.left-aligned {
-        left: 0;
-        transform: translateX(-100%);
-    }
-
-    &.right-aligned {
-        right: 0;
-        transform: translateX(100%);
-    }
-
-    &.open {
-        transform: translateX(0);
-    }
-
-    &.locked-open {
-        position: relative !important;
-        transform: translateX(0) !important;
-    }
-
-    &.folded {
-        position: absolute !important;
-        top: 0;
-        bottom: 0;
-
-        &:not(.unfolded) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-        }
-    }
-}
-
-.fuse-sidebar-overlay {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 3;
-    background-color: rgba(0, 0, 0, 0.6);
-    opacity: 0;
-}
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -1,368 +0,0 @@
-import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
-import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
-
-import { FuseSidebarService } from './sidebar.service';
-import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { DOCUMENT } from '@angular/common';
-
-@Component({
-    selector     : 'fuse-sidebar',
-    templateUrl  : './sidebar.component.html',
-    styleUrls    : ['./sidebar.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class FuseSidebarComponent implements OnInit, OnDestroy
-{
-    // Name
-    @Input()
-    name: string;
-
-    // Align
-    @Input()
-    align: string;
-
-    // Open
-    @HostBinding('class.open')
-    opened: boolean;
-
-    // Locked Open
-    @Input()
-    lockedOpen: string;
-
-    // isLockedOpen
-    @HostBinding('class.locked-open')
-    isLockedOpen: boolean;
-
-    // Folded
-    @HostBinding('class.folded')
-    @Input()
-    folded: boolean;
-
-    // Folded unfolded
-    @HostBinding('class.unfolded')
-    unfolded: boolean;
-
-    // Private
-    private _wasActive: boolean;
-    private _backdrop: HTMLElement | null = null;
-    private _player: AnimationPlayer;
-    private _matchMediaWatcher: Subscription;
-
-    /**
-     * Constructor
-     *
-     * @param renderer
-     * @param elementRef
-     * @param animationBuilder
-     * @param sidebarService
-     * @param matchMedia
-     * @param media
-     * @param document
-     */
-    constructor(
-        private renderer: Renderer2,
-        private elementRef: ElementRef,
-        private animationBuilder: AnimationBuilder,
-        private sidebarService: FuseSidebarService,
-        private matchMedia: FuseMatchMediaService,
-        private media: ObservableMedia,
-        @Inject(DOCUMENT) private document: any
-    )
-    {
-        // Set the defaults
-        this.opened = false;
-        this.folded = false;
-        this.align = 'left';
-    }
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Register the sidebar
-        this.sidebarService.register(this.name, this);
-
-        // Setup alignment
-        this._setupAlignment();
-
-        // Setup lockedOpen
-        this._setupLockedOpen();
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unregister the sidebar
-        this.sidebarService.unregister(this.name);
-
-        // Unregister the media watcher
-        this._matchMediaWatcher.unsubscribe();
-    }
-
-    /**
-     * Setup the alignment
-     *
-     * @private
-     */
-    private _setupAlignment(): void
-    {
-        if ( this.align === 'left' )
-        {
-            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
-        }
-        else
-        {
-            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
-        }
-    }
-
-    /**
-     * Setup the lockedOpen handler
-     *
-     * @private
-     */
-    private _setupLockedOpen(): void
-    {
-        // Return if the lockedOpen wasn't set
-        if ( !this.lockedOpen )
-        {
-            return;
-        }
-
-        // Set the wasActive for the first time
-        this._wasActive = false;
-
-        // Act on every media change
-        this._matchMediaWatcher =
-
-            this.matchMedia.onMediaChange.subscribe(() => {
-
-                // Get the active status
-                const isActive = this.media.isActive(this.lockedOpen);
-
-                // If the both status are the same, don't act
-                if ( this._wasActive === isActive )
-                {
-                    return;
-                }
-
-                // Store the new active status
-                this._wasActive = isActive;
-
-                // Activate the lockedOpen
-                if ( isActive )
-                {
-                    // Set the lockedOpen status
-                    this.isLockedOpen = true;
-                }
-                // De-Activate the lockedOpen
-                else
-                {
-                    // Set the lockedOpen status
-                    this.isLockedOpen = false;
-
-                    // Unfold the sidebar in case if it was folded
-                    this.unfold();
-                }
-            });
-    }
-
-    /**
-     * Open the sidebar
-     */
-    open(): void
-    {
-        if ( this.opened || this.isLockedOpen )
-        {
-            return;
-        }
-
-        // Show the backdrop
-        this.showBackdrop();
-
-        // Set the opened status
-        this.opened = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-opened');
-    }
-
-    /**
-     * Close the sidebar
-     */
-    close(): void
-    {
-        if ( !this.opened )
-        {
-            return;
-        }
-
-        // Hide the backdrop
-        this.hideBackdrop();
-
-        // Set the opened status
-        this.opened = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened');
-    }
-
-    /**
-     * Toggle open/close the sidebar
-     */
-    toggleOpen(): void
-    {
-        if ( this.opened )
-        {
-            this.close();
-        }
-        else
-        {
-            this.open();
-        }
-    }
-
-    /**
-     * Mouseenter
-     */
-    @HostListener('mouseenter')
-    onMouseEnter(): void
-    {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
-        {
-            return;
-        }
-
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded');
-    }
-
-    /**
-     * Mouseleave
-     */
-    @HostListener('mouseleave')
-    onMouseLeave(): void
-    {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
-        {
-            return;
-        }
-
-        // Fold the sidebar back
-        this.unfolded = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded');
-    }
-
-    /**
-     * Fold the sidebar permanently
-     */
-    fold(): void
-    {
-        this.folded = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
-    }
-
-    /**
-     * Unfold the sidebar permanently
-     */
-    unfold(): void
-    {
-        this.folded = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
-    }
-
-    /**
-     * Toggle the sidebar fold/unfold permanently
-     */
-    toggleFold(): void
-    {
-        if ( this.folded )
-        {
-            this.unfold();
-        }
-        else
-        {
-            this.fold();
-        }
-    }
-
-    /**
-     * Show the backdrop
-     */
-    showBackdrop(): void
-    {
-        // Create the backdrop element
-        this._backdrop = this.renderer.createElement('div');
-
-        // Add a class to the backdrop element
-        this._backdrop.classList.add('fuse-sidebar-overlay');
-
-        // Append the backdrop to the parent of the sidebar
-        this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop);
-
-        // Create the enter animation and attach it to the player
-        this._player =
-            this.animationBuilder
-                .build([
-                    animate('300ms ease', style({opacity: 1}))
-                ]).create(this._backdrop);
-
-        // Play the animation
-        this._player.play();
-
-        // Add an event listener to the overlay
-        this._backdrop.addEventListener('click', () => {
-                this.close();
-            }
-        );
-    }
-
-    /**
-     * Hide the backdrop
-     */
-    hideBackdrop(): void
-    {
-        if ( !this._backdrop )
-        {
-            return;
-        }
-
-        // Create the leave animation and attach it to the player
-        this._player =
-            this.animationBuilder
-                .build([
-                    animate('300ms ease', style({opacity: 0}))
-                ]).create(this._backdrop);
-
-        // Play the animation
-        this._player.play();
-
-        // Once the animation is done...
-        this._player.onDone(() => {
-
-            // If the backdrop still exists...
-            if ( this._backdrop )
-            {
-                // Remove the backdrop
-                this._backdrop.parentNode.removeChild(this._backdrop);
-                this._backdrop = null;
-            }
-        });
-    }
-}
--- a/src/@fuse/components/sidebar/sidebar.module.ts
+++ b/src/@fuse/components/sidebar/sidebar.module.ts
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { FuseSidebarComponent } from './sidebar.component';
-
-@NgModule({
-    declarations: [
-        FuseSidebarComponent
-    ],
-    exports     : [
-        FuseSidebarComponent
-    ]
-})
-export class FuseSidebarModule
-{
-}
--- a/src/@fuse/components/sidebar/sidebar.service.ts
+++ b/src/@fuse/components/sidebar/sidebar.service.ts
@@ -1,74 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { FuseSidebarComponent } from './sidebar.component';
-
-@Injectable()
-export class FuseSidebarService
-{
-    // Private
-    private _registry: { [key: string]: FuseSidebarComponent } = {};
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-
-    }
-
-    /**
-     * Add the sidebar to the registry
-     *
-     * @param key
-     * @param sidebar
-     */
-    register(key, sidebar): void
-    {
-        // Check if the key already being used
-        if ( this._registry[key] )
-        {
-            console.error(`The sidebar with the key '${key}' already exists. Either unregister it first or use a unique key.`);
-
-            return;
-        }
-
-        // Add to the registry
-        this._registry[key] = sidebar;
-    }
-
-    /**
-     * Remove the sidebar from the registry
-     *
-     * @param key
-     */
-    unregister(key): void
-    {
-        // Check if the sidebar exists
-        if ( !this._registry[key] )
-        {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
-        }
-
-        // Unregister the sidebar
-        delete this._registry[key];
-    }
-
-    /**
-     * Return the sidebar with the given key
-     *
-     * @param key
-     */
-    getSidebar(key): any
-    {
-        // Check if the sidebar exists
-        if ( !this._registry[key] )
-        {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
-
-            return;
-        }
-
-        // Return the sidebar
-        return this._registry[key];
-    }
-}
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -1,105 +0,0 @@
-<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 mat-white-bg mat-elevation-z8">
-
-    <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>
-        <mat-radio-group [(ngModel)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
-            <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)]="config.layout.navigationFolded"
-                          (change)="onSettingsChange()">
-            Folded
-        </mat-slide-toggle>
-
-        <h3 class="mt-24">Toolbar:</h3>
-        <mat-radio-group [(ngModel)]="config.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
-            <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>
-        <mat-radio-group [(ngModel)]="config.layout.footer" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row  wrap" fxLayoutAlign="start start">
-            <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>
-        <mat-radio-group [(ngModel)]="config.layout.mode" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row  wrap" fxLayoutAlign="start start">
-            <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>
-
-        <mat-divider></mat-divider>
-
-        <h3>Colors:</h3>
-        <div class="colors">
-
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.toolbar"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
-            </div>
-
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.navbar"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
-            </div>
-
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.footer"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
-            </div>
-
-        </div>
-
-        <mat-divider></mat-divider>
-
-        <h3>Router Animation:</h3>
-        <mat-form-field class="w-100-p">
-            <mat-select class="p-0" [(ngModel)]="config.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>
--- a/src/@fuse/components/theme-options/theme-options.module.ts
+++ b/src/@fuse/components/theme-options/theme-options.module.ts
@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
-
-import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
-import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
-
-@NgModule({
-    declarations: [
-        FuseThemeOptionsComponent
-    ],
-    imports     : [
-        CommonModule,
-        FormsModule,
-
-        FlexLayoutModule,
-
-        MatButtonModule,
-        MatDividerModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatOptionModule,
-        MatRadioModule,
-        MatSelectModule,
-        MatSlideToggleModule,
-
-        FuseMaterialColorPickerModule
-    ],
-    exports     : [
-        FuseThemeOptionsComponent
-    ]
-})
-export class FuseThemeOptionsModule
-{
-}
--- a/src/@fuse/components/widget/widget-toggle.directive.ts
+++ b/src/@fuse/components/widget/widget-toggle.directive.ts
@@ -1,11 +0,0 @@
-import { Directive, ElementRef } from '@angular/core';
-
-@Directive({
-    selector: '[fuseWidgetToggle]'
-})
-export class FuseWidgetToggleDirective
-{
-    constructor(public el: ElementRef)
-    {
-    }
-}
--- a/src/@fuse/directives/directives.ts
+++ b/src/@fuse/directives/directives.ts
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive';
-import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
-import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
-
-@NgModule({
-    declarations: [
-        FuseIfOnDomDirective,
-        FuseMatSidenavHelperDirective,
-        FuseMatSidenavTogglerDirective,
-        FusePerfectScrollbarDirective
-    ],
-    imports     : [],
-    exports     : [
-        FuseIfOnDomDirective,
-        FuseMatSidenavHelperDirective,
-        FuseMatSidenavTogglerDirective,
-        FusePerfectScrollbarDirective
-    ]
-})
-export class FuseDirectivesModule
-{
-}
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
+++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts
@@ -1,83 +0,0 @@
-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 { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.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: FuseMatchMediaService,
-        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();
-    }
-}
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@@ -1,47 +0,0 @@
-import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
-
-import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
-import { FuseCopierService } from '@fuse/services/copier.service';
-import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
-import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
-import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
-
-@NgModule({
-    entryComponents: [],
-    providers      : [
-        FuseConfigService,
-        FuseCopierService,
-        FuseMatchMediaService,
-        FuseMatSidenavHelperService,
-        FuseNavigationService,
-        FuseSidebarService,
-        FuseSplashScreenService,
-        FuseTranslationLoaderService
-    ]
-})
-export class FuseModule
-{
-    constructor(@Optional() @SkipSelf() parentModule: FuseModule)
-    {
-        if ( parentModule )
-        {
-            throw new Error('FuseModule is already loaded. Import it in the AppModule only!');
-        }
-    }
-
-    static forRoot(config): ModuleWithProviders
-    {
-        return {
-            ngModule : FuseModule,
-            providers: [
-                {
-                    provide : FUSE_CONFIG,
-                    useValue: config
-                }
-            ]
-        };
-    }
-}
--- a/src/@fuse/scss/partials/_angular-material-fix.scss
+++ b/src/@fuse/scss/partials/_angular-material-fix.scss
@@ -1,78 +0,0 @@
-// Fix: "Icon button ripple radius is not correct on Edge & Safari"
-.mat-icon-button {
-
-    .mat-button-ripple {
-        border-radius: 50%;
-    }
-}
-
-// Fix: "Inconsistent font sizes across elements"
-.mat-input-wrapper {
-    font-size: 16px;
-}
-
-.mat-checkbox {
-    font-size: 16px;
-}
-
-.mat-radio-button {
-    font-size: 16px;
-}
-
-.mat-pseudo-checkbox-checked:after {
-    width: 14px !important;
-    height: 7px !important;
-}
-
-// Fix: "Input underlines has wrong color opacity value"
-.mat-form-field-underline {
-    background-color: rgba(0, 0, 0, 0.12);
-}
-
-// Fix: "Some idiots using table-cell and inline-table in mat-select"
-.mat-form-field {
-
-    &.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;
-                }
-            }
-        }
-    }
-}
-
-// 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;
-}
--- a/src/@fuse/scss/partials/_cards.scss
+++ b/src/@fuse/scss/partials/_cards.scss
@@ -1,61 +0,0 @@
-.fuse-card {
-    max-width: 320px;
-    min-width: 320px;
-    background: white;
-    border-radius: 2px;
-    @include mat-elevation(2);
-
-    &.variable-width {
-        min-width: 0;
-    }
-
-    &.auto-width {
-        min-width: 0;
-        max-width: none;
-    }
-
-    // Buttons
-    .mat-button {
-        min-width: 0 !important;
-        padding: 0 8px !important;
-    }
-
-    // Button Toggle Group
-    .mat-button-toggle-group,
-    .mat-button-toggle-standalone {
-        box-shadow: none !important;
-    }
-
-    // Tabs
-    .mat-tab-labels {
-        justify-content: center;
-    }
-
-    .mat-tab-label {
-        min-width: 0 !important;
-    }
-
-    // Divider
-    .card-divider {
-        border-top: 1px solid rgba(0, 0, 0, 0.12);
-        margin: 16px;
-
-        &.light {
-            border-top-color: rgba(255, 255, 255, 0.12);
-        }
-
-        &.full-width {
-            margin: 0;
-        }
-    }
-
-    // Expand Area
-    .card-expand-area {
-        overflow: hidden;
-
-        .card-expanded-content {
-            padding: 8px 16px 16px 16px;
-            line-height: 1.75;
-        }
-    }
-}
--- a/src/@fuse/scss/partials/_print.scss
+++ b/src/@fuse/scss/partials/_print.scss
@@ -1,65 +0,0 @@
-/*----------------------------------------------------------------*/
-/*  Print
-/*----------------------------------------------------------------*/
-
-@media all {
-
-    /* Never show page breaks in normal view */
-    .page-break-after,
-    .page-break-before {
-        display: none;
-    }
-
-}
-
-@media print {
-
-    /* html and body tweaks */
-    html, body {
-        height: auto !important;
-        overflow: initial !important;
-    }
-
-    /* Page breaks */
-    .page-break-after {
-        display: block;
-        page-break-after: always;
-        position: relative;
-    }
-
-    .page-break-before {
-        display: block;
-        page-break-before: always;
-        position: relative;
-    }
-
-    /* General styles */
-    fuse-root {
-
-        fuse-navbar-vertical,
-        fuse-navbar-horizontal,
-        fuse-toolbar,
-        fuse-footer,
-        fuse-quick-panel,
-        fuse-theme-options,
-        .ps > .ps__rail-x,
-        .ps > .ps__rail-y {
-            display: none !important;
-        }
-
-        .ps {
-            overflow: visible !important;
-        }
-
-        .mat-drawer-container,
-        .mat-sidenav-container {
-            background-color: white !important;
-
-            .mat-drawer-content,
-            .mat-sidenav-content {
-                overflow: initial !important;
-                height: auto !important
-            }
-        }
-    }
-}
--- a/src/@fuse/scss/partials/plugins/_prism.scss
+++ b/src/@fuse/scss/partials/plugins/_prism.scss
@@ -1,269 +0,0 @@
-// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
-
-$base00: #263238;
-$base01: #2C393F;
-$base02: #62727A;
-$base03: #707880;
-$base04: #C9CCD3;
-$base05: #CDD3DE;
-$base06: #D5DBE5;
-$base07: #FFFFFF;
-$base08: #EC5F67;
-$base09: #EA9560;
-$base0A: #FFCC00;
-$base0B: #8BD649;
-$base0C: #80CBC4;
-$base0D: #89DDFF;
-$base0E: #82AAFF;
-$base0F: #EC5F67;
-
-$red: $base08;
-$orange: $base09;
-$yellow: $base0A;
-$green: $base0B;
-$cyan: $base0C;
-$blue: $base0D;
-$violet: $base0E;
-$magenta: $base0F;
-
-$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
-$code-font-size: 14px;
-$code-line-height: 1.6;
-$code-background: $base00;
-$code-color: $base05;
-$code-color-fade: $base05;
-// $code-text-shadow: none; 
-$code-color-comment: $base02;
-$code-color-keyword: $base0B;
-$code-color-value: $base0C;
-$code-color-attr-name: $base09;
-$code-color-string: $base0C;
-$code-color-name: $base0A;
-$code-color-number: $base09;
-$code-color-variable: $base0D;
-$code-color-selector: $base0E;
-$code-color-property: $base0A;
-$code-color-important: $base08;
-$code-color-tag: $base0D;
-$code-color-atrule: $base0C;
-
-// @import "../partials/prism"; 
-/**
- * Prism base code highlighter theme using Sass 
- *
- * @author @MoOx
- * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
- * slightly adapted by me, Bram de Haan
- */
-
-// prism selector
-$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
-$code-selector-block: "pre[class*=\"language-\"]";
-$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
-
-// generic stuff
-$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
-$code-font-size: 14px !default;
-$code-line-height: 1.6 !default;
-
-$code-tab-size: 4 !default;
-$code-hyphens: none !default;
-
-$code-block-padding: 12px !default;
-$code-inline-padding: 2px 6px !default;
-$code-border-radius: 0 !default;
-
-$code-border: none !default;
-$code-background: #2A2A2A !default;
-$code-color: #FFF !default;
-$code-color-fade: #BEBEC5 !default;
-// $code-text-shadow: 0 1px 0 #000 !default;
-$code-box-shadow: none !default;
-$code-color-property: #B58900 !default;
-$code-color-important: #CB4B16 !default;
-$code-color-tag: #268BD2 !default;
-$code-color-atrule: #2AA198 !default;
-$code-color-attr-name: #B65611 !default;
-
-// $code-linenums-padding:		7px !default;
-// $code-linenums-width: 			40px !default;
-// $code-linenums-background:		#444 !default;
-// $code-linenums-border-color:	#555 !default;
-// $code-linenums-border-width:	1px !default;
-
-@if $code-selector != null {
-    #{$code-selector} {
-        -moz-tab-size: $code-tab-size;
-        -o-tab-size: $code-tab-size;
-        tab-size: $code-tab-size;
-
-        -webkit-hyphens: $code-hyphens;
-        -moz-hyphens: $code-hyphens;
-        -ms-hyphens: $code-hyphens;
-        hyphens: $code-hyphens;
-
-        // whitespace management
-        white-space: pre; // fallback
-        white-space: pre-wrap;
-        word-break: break-all;
-        word-wrap: break-word;
-
-        font-family: $code-font-family;
-        font-size: $code-font-size;
-        line-height: $code-line-height;
-
-        color: $code-color;
-        // text-shadow: $code-text-shadow;
-        background: $code-background;
-    }
-}
-
-%code-background {
-    border-radius: $code-border-radius;
-    border: $code-border;
-    box-shadow: $code-box-shadow;
-}
-
-@if $code-selector-block != null {
-    #{$code-selector-block} {
-        @extend %code-background;
-        padding: $code-block-padding;
-    }
-}
-
-@if $code-selector-inline != null {
-    #{$code-selector-inline} {
-        @extend %code-background;
-        padding: $code-inline-padding;
-    }
-}
-
-// pre[class*="language-"],
-// :not(pre) > code[class*="language-"] {
-// 	background: $code-background;
-// }
-
-// prism tokens
-// 
-$code-color-comment: null !default;
-$code-color-keyword: null !default;
-$code-color-value: null !default;
-$code-color-string: null !default;
-$code-color-name: null !default;
-$code-color-number: null !default;
-$code-color-variable: null !default;
-$code-color-selector: null !default;
-$code-color-punctuation: $code-color-fade !default;
-
-#{$code-selector} {
-    .namespace {
-        opacity: .7;
-    }
-
-    .token {
-        &.comment,
-        &.prolog,
-        &.doctype,
-        &.cdata {
-            color: $code-color-comment;
-        }
-
-        &.null,
-        &.operator,
-        &.boolean,
-        &.number {
-            color: $code-color-number;
-        }
-
-        &.string {
-            color: $code-color-string;
-        }
-        &.attr-name {
-            color: $code-color-attr-name;
-        }
-
-        &.entity,
-        &.url,
-        .language-css &.string,
-        .style &.string {
-            color: $code-color-string;
-        }
-
-        &.selector {
-            color: $code-color-selector;
-        }
-
-        &.attr-value,
-        &.keyword,
-        &.control,
-        &.directive,
-        &.unit {
-            color: $code-color-keyword;
-        }
-        &.important {
-            color: $code-color-important;
-        }
-        &.atrule {
-            color: $code-color-atrule;
-        }
-
-        &.regex,
-        &.statement {
-            color: $code-color-value;
-        }
-
-        &.placeholder,
-        &.variable {
-            color: $code-color-variable;
-        }
-
-        &.property,
-        &.tag {
-            // font-style: italic;
-        }
-
-        &.property {
-            color: $code-color-property;
-        }
-        &.tag {
-            color: $code-color-tag;
-        }
-
-        &.important,
-        &.statement {
-            font-weight: bold;
-        }
-
-        // todo ?
-        // &.mixin
-        // &.gradient
-        // &.abslength
-        // &.easing
-        // &.time
-        // &.angle
-        // &.fontfamily
-
-        // ruby/vim https://github.com/LeaVerou/prism/pull/18
-        // &.inst-var
-        // &.builtin
-        // &.const
-        // &.symbol
-        //
-        // php https://github.com/LeaVerou/prism/pull/20
-        // &.deliminator
-        // &.function
-
-        &.punctuation {
-            color: $code-color-punctuation;
-        }
-
-        &.entity {
-            cursor: help;
-        }
-
-        // for dev :)
-        &.debug {
-            color: red
-        }
-    }
-}
--- a/src/@fuse/services/config.service.ts
+++ b/src/@fuse/services/config.service.ts
@@ -1,113 +0,0 @@
-import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Platform } from '@angular/cdk/platform';
-
-// Define the default config
-const DEFAULT_CONFIG = {
-    layout          : {
-        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: 'mat-white-500-bg',
-        navbar : 'mat-fuse-dark-700-bg',
-        footer : 'mat-fuse-dark-900-bg'
-    },
-    customScrollbars: true,
-    routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
-};
-
-// Create the injection token for the custom config
-export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
-
-@Injectable()
-export class FuseConfigService
-{
-    config: any;
-    defaultConfig: any;
-
-    onConfigChanged: BehaviorSubject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param router
-     * @param platform
-     * @param config
-     */
-    constructor(
-        private router: Router,
-        public platform: Platform,
-        @Inject(FUSE_CONFIG) @Optional() config
-    )
-    {
-        // Set the default settings from the constant
-        this.defaultConfig = DEFAULT_CONFIG;
-
-        // If custom config provided with forRoot,
-        // use them as default config...
-        if ( config )
-        {
-            this.defaultConfig = config;
-        }
-
-        /**
-         * Disable Custom Scrollbars if Browser is Mobile
-         */
-        if ( this.platform.ANDROID || this.platform.IOS )
-        {
-            this.defaultConfig.customScrollbars = false;
-        }
-
-        // Set the config from the default config
-        this.config = {...this.defaultConfig};
-
-        // Reload the default settings for the
-        // layout on every navigation start
-        router.events.subscribe(
-            (event) => {
-                if ( event instanceof NavigationStart )
-                {
-                    this.setConfig({
-                            layout: this.defaultConfig.layout
-                        }
-                    );
-                }
-            }
-        );
-
-        // Create the behavior subject
-        this.onConfigChanged = new BehaviorSubject(this.config);
-    }
-
-    /**
-     * Set the new config from given object
-     *
-     * @param config
-     */
-    setConfig(config): void
-    {
-        // Set the config from the given object
-        // Ugly, but works for now...
-        this.config = {
-            ...this.config,
-            ...config,
-            layout     : {
-                ...this.config.layout,
-                ...config.layout,
-            },
-            colorClasses: {
-                ...this.config.colorClasses,
-                ...config.colorClasses
-            }
-        };
-
-        // Trigger the event
-        this.onConfigChanged.next(this.config);
-    }
-}
-
--- a/src/@fuse/services/copier.service.ts
+++ b/src/@fuse/services/copier.service.ts
@@ -1,65 +0,0 @@
-/**
- * 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 FuseCopierService
-{
-
-    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;
-        }
-    }
-}
--- a/src/@fuse/services/translation-loader.service.ts
+++ b/src/@fuse/services/translation-loader.service.ts
@@ -1,27 +0,0 @@
-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);
-        });
-    }
-}
--- a/src/@fuse/shared.module.ts
+++ b/src/@fuse/shared.module.ts
@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-
-import { FlexLayoutModule } from '@angular/flex-layout';
-
-import { FuseDirectivesModule } from '@fuse/directives/directives';
-import { FusePipesModule } from '@fuse/pipes/pipes.module';
-
-@NgModule({
-    imports  : [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-
-        FlexLayoutModule,
-
-        FuseDirectivesModule,
-        FusePipesModule
-    ],
-    exports  : [
-        CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-
-        FlexLayoutModule,
-
-        FuseDirectivesModule,
-        FusePipesModule
-    ]
-})
-export class FuseSharedModule
-{
-}
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,5 @@
 import { Component } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-
-import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
-import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-
-import { locale as navigationEnglish } from './navigation/i18n/en';
-import { locale as navigationTurkish } from './navigation/i18n/tr';
+import { FuseSplashScreenService } from './core/services/splash-screen.service';

@Component({
    selector   : 'fuse-root',
@@ -15,23 +8,7 @@ import { locale as navigationTurkish } from './navigation/i18n/tr';
 })
 export class AppComponent
 {
-    constructor(
-        private translate: TranslateService,
-        private fuseNavigationService: FuseNavigationService,
-        private fuseSplashScreen: FuseSplashScreenService,
-        private fuseTranslationLoader: FuseTranslationLoaderService
-    )
+    constructor(private fuseSplashScreen: FuseSplashScreenService)
    {
-        // Add languages
-        this.translate.addLangs(['en', 'tr']);
-
-        // Set the default language
-        this.translate.setDefaultLang('en');
-
-        // Set the navigation translations
-        this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish);
-
-        // Use a language
-        this.translate.use('en');
    }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,50 +1,23 @@
 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 { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';
-
-import { FuseModule } from '@fuse/fuse.module';
-import { FuseSharedModule } from '@fuse/shared.module';
-
-import { fuseConfig } from './fuse-config';
-
+import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
-import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { FuseMainModule } from './main/main.module';
-import { AppStoreModule } from './store/store.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';

 const appRoutes: Routes = [
-    {
-        path        : 'apps',
-        loadChildren: './main/content/apps/apps.module#FuseAppsModule'
-    },
-    {
-        path        : 'pages',
-        loadChildren: './main/content/pages/pages.module#FusePagesModule'
-    },
-    {
-        path        : 'ui',
-        loadChildren: './main/content/ui/ui.module#FuseUIModule'
-    },
-    {
-        path        : 'services',
-        loadChildren: './main/content/services/services.module#FuseServicesModule'
-    },
-    {
-        path        : 'components',
-        loadChildren: './main/content/components/components.module#FuseComponentsModule'
-    },
-    {
-        path        : 'components-third-party',
-        loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
-    },
    {
        path      : '**',
-        redirectTo: 'apps/dashboards/analytics'
+        redirectTo: 'sample'
    }
 ];

@@ -54,22 +27,19 @@ const appRoutes: Routes = [
    ],
    imports     : [
        BrowserModule,
-        BrowserAnimationsModule,
+        HttpModule,
        HttpClientModule,
+        BrowserAnimationsModule,
        RouterModule.forRoot(appRoutes),
-
-        TranslateModule.forRoot(),
-        InMemoryWebApiModule.forRoot(FuseFakeDbService, {
-            delay             : 0,
-            passThruUnknownUrl: true
-        }),
-
-        // Fuse Main and Shared modules
-        FuseModule.forRoot(fuseConfig),
-        FuseSharedModule,
-
-        AppStoreModule,
-        FuseMainModule
+        SharedModule,
+        PerfectScrollbarModule.forRoot(),
+        FuseMainModule,
+        FuseSampleModule
+    ],
+    providers   : [
+        FuseSplashScreenService,
+        FuseConfigService,
+        FuseNavigationService
    ],
    bootstrap   : [
        AppComponent
--- a/src/@fuse/animations/index.ts
+++ b/src/@fuse/animations/index.ts
@@ -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', [
@@ -76,53 +76,6 @@ export const fuseAnimations = [
        transition('0 => 1', animate('300ms ease-in'))
    ]),

-    trigger('slideIn', [
-        transition('void => left', [
-                style({
-                    transform: 'translateX(100%)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(0)'
-                    })
-                )
-            ]
-        ),
-        transition('left => void', [
-                style({
-                    transform: 'translateX(0)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(-100%)'
-                    })
-                )
-            ]
-        ),
-        transition('void => right', [
-                style({
-                    transform: 'translateX(-100%)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(0)'
-                    })
-                )
-            ]
-        ),
-        transition('right => void', [
-                style({
-                    transform: 'translateX(0)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(100%)'
-                    })
-                )
-            ]
-        ),
-    ]),
-
    trigger('slideInLeft', [
        state('void', style({
            transform: 'translateX(-100%)',
@@ -176,17 +129,6 @@ 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('* => *', [
--- a/src/app/core/components/confirm-dialog/confirm-dialog.component.html
+++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +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>
+</div>
--- a/src/app/core/components/confirm-dialog/confirm-dialog.component.scss
+++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.scss
--- a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts
+++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialogRef } from '@angular/material';
+
+@Component({
+    selector   : 'fuse-confirm-dialog',
+    templateUrl: './confirm-dialog.component.html',
+    styleUrls  : ['./confirm-dialog.component.scss']
+})
+export class FuseConfirmDialogComponent implements OnInit
+{
+    public confirmMessage: string;
+
+    constructor(public dialogRef: MdDialogRef<FuseConfirmDialogComponent>)
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}
--- a/src/app/core/components/countdown/countdown.component.html
+++ b/src/app/core/components/countdown/countdown.component.html
--- a/src/app/core/components/countdown/countdown.component.scss
+++ b/src/app/core/components/countdown/countdown.component.scss
--- a/src/app/core/components/countdown/countdown.component.ts
+++ b/src/app/core/components/countdown/countdown.component.ts
@@ -1,8 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/interval';
-
 import * as moment from 'moment';
+import { Observable } from 'rxjs/Rx';

@Component({
    selector   : 'fuse-countdown',
--- a/src/app/core/components/demo/demo-content/demo-content.component.html
+++ b/src/app/core/components/demo/demo-content/demo-content.component.html
@@ -0,0 +1,75 @@
+<!-- DEMO CONTENT -->
+<div class="demo-content">
+
+    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
+
+    <h1>Early Sunrise</h1>
+    <h4 class="secondary-text">Demo Content</h4>
+
+    <p>
+        One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a
+        horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his
+        brown belly, slightly domed and divided by arches into stiff sections.
+    </p>
+
+    <blockquote>
+        <p>
+            The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs,
+            pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's
+            happened to me? " he thought. It wasn't a dream.
+        </p>
+        <footer>
+            John Doe
+        </footer>
+    </blockquote>
+
+    <p>
+        His room, a proper human room although a little too small, lay peacefully between its four familiar
+        walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman -
+        and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in
+        a nice, gilded frame.
+    </p>
+
+    <p>
+        It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that
+        covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the
+        dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad.
+    </p>
+
+    <p>
+        "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was
+        something he was unable to do because he was used to sleeping on his right, and in his present state
+        couldn't get into that position. However hard he threw himself onto his right, he always rolled back to
+        where he was.
+    </p>
+
+    <p>
+        He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering
+        legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. "Oh,
+        God", he thought, "what a strenuous career it is that I've chosen!
+    </p>
+
+    <p>
+        Travelling day in and day out. Doing business like this takes much more effort than doing your own
+        business at home, and on top of that there's the curse of travelling, worries about making train
+        connections, bad and irregular food, contact with different people all the time so that you can never
+        get to know anyone or become friendly with them.
+    </p>
+
+    <p>
+        "He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so
+        that he could lift his head better; found where the itch was, and saw that it was covered with lots of
+        little white spots which he didn't know what to make of; and when he tried to feel the place with one of
+        his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder. He
+        slid back into his former position.
+    </p>
+
+    <p>
+        "Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other
+        travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during
+        the morning to copy out the contract, these gentlemen are always still sitting there eating their
+        breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe
+        that would be the best thing for me...
+    </p>
+</div>
+<!-- / DEMO CONTENT -->
--- a/src/app/core/components/demo/demo-content/demo-content.component.scss
+++ b/src/app/core/components/demo/demo-content/demo-content.component.scss
--- a/src/app/core/components/demo/demo-content/demo-content.component.ts
+++ b/src/app/core/components/demo/demo-content/demo-content.component.ts
--- a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
+++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html
@@ -0,0 +1,100 @@
+<div class="demo-sidenav">
+    <md-list>
+        <h3 md-subheader>Sidenav Demo</h3>
+
+        <md-list-item>
+            <span>Sidenav Item 1</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 2</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 3</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 4</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 5</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 6</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 7</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 8</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 9</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 10</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 11</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 12</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 13</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 14</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 15</span>
+        </md-list-item>
+
+        <md-divider></md-divider>
+
+        <md-list-item>
+            <span>Sidenav Item 16</span>
+        </md-list-item>
+
+    </md-list>
+</div>
--- a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss
+++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.scss
--- a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts
+++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.ts
--- a/src/app/core/components/demo/demo.module.ts
+++ b/src/app/core/components/demo/demo.module.ts
@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
+import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
-
-import { MatDividerModule, MatListModule } from '@angular/material';
-
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';

@@ -12,10 +10,8 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
        FuseDemoSidenavComponent
    ],
    imports     : [
-        RouterModule,
-
-        MatDividerModule,
-        MatListModule
+        SharedModule,
+        RouterModule
    ],
    exports     : [
        FuseDemoContentComponent,
--- a/src/app/main/content/services/config/config.component.scss
+++ b/src/app/main/content/services/config/config.component.scss
--- a/src/app/core/components/hljs/hljs.component.ts
+++ b/src/app/core/components/hljs/hljs.component.ts
@@ -0,0 +1,58 @@
+import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import * as hljs from 'highlight.js';
+
+@Component({
+    selector : 'fuse-hljs',
+    template : ' ',
+    styleUrls: ['./hljs.component.scss']
+})
+export class FuseHljsComponent implements OnInit
+{
+    hljs: any;
+
+    @ContentChild('source') source: ElementRef;
+    @Input('lang') lang: string;
+
+    constructor(
+        private elementRef: ElementRef
+    )
+    {
+        this.hljs = hljs;
+    }
+
+    ngOnInit()
+    {
+        const originalSource = this.source.nativeElement.value;
+
+        if ( !originalSource || !this.lang )
+        {
+            return;
+        }
+
+        // Split the source into lines
+        const sourceLines = originalSource.split('\n');
+
+        // Find the first non-whitespace char index in
+        // the first line of the source code
+        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
+
+        // Generate the trimmed source
+        let source = '';
+
+        // Iterate through all the lines and trim the
+        // beginning white space depending on the index
+        sourceLines.forEach((line, index) => {
+
+            source = source + line.substr(indexOfFirstChar, line.length);
+
+            if ( index !== sourceLines.length - 1 )
+            {
+                source = source + '\n';
+            }
+        });
+
+        this.elementRef.nativeElement.innerHTML =
+            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
+    }
+}
+
--- a/src/app/core/components/material-color-picker/material-color-picker.component.html
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.html
@@ -0,0 +1,82 @@
+<button md-icon-button
+        type="button"
+        class="mat-elevation-z1"
+        [mdMenuTriggerFor]="colorMenu"
+        (onMenuOpen)="onMenuOpen()"
+        [ngClass]="'md-'+selectedPalette+'-'+selectedHue+'-bg'">
+    <md-icon>palette</md-icon>
+</button>
+
+<md-menu #colorMenu="mdMenu" class="fuse-material-color-picker-menu">
+
+    <header [ngClass]="selectedColor?.class || 'md-accent-bg'"
+            class="mat-elevation-z4"
+            fxLayout="row"
+            fxLayoutAlign="space-between center">
+
+        <button md-icon-button
+                [style.visibility]="view==='hues'?'visible':'hidden'"
+                (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
+            <md-icon class="s-20">arrow_back</md-icon>
+        </button>
+
+        <span *ngIf="selectedColor?.palette">
+            {{selectedColor.palette}} {{selectedColor.hue}}
+        </span>
+
+        <span *ngIf="!selectedColor?.palette">
+            Select Color
+        </span>
+
+        <button md-icon-button
+                class="remove-color-button"
+                (click)="removeColor()"
+                aria-label="Remove Color">
+            <md-icon class="s-20">delete</md-icon>
+        </button>
+    </header>
+
+
+    <div [ngSwitch]="view" class="views">
+
+        <div class="view"
+             *ngSwitchCase="'palettes'"
+             [@slideInLeft]>
+
+            <div fxLayout="row" fxLayoutWrap
+                 fxLayoutAlign="start start"
+                 class="colors" fusePerfectScrollbar>
+                <div class="color"
+                     [ngClass]="'md-'+color.key+'-bg'"
+                     *ngFor="let color of (colors | keys)"
+                     (click)="$event.stopPropagation();selectPalette(color.key)"
+                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                    <span class="label">
+                        {{color.key}}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="view"
+             *ngSwitchCase="'hues'"
+             [@slideInRight]>
+            <div fxLayout="row" fxLayoutWrap
+                 fxLayoutAlign="start start"
+                 class="colors" fusePerfectScrollbar>
+                <div class="color"
+                     *ngFor="let hue of hues"
+                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
+                     [ngClass]="'md-'+selectedPalette+'-'+hue+'-bg'"
+                     (click)="selectHue(hue)"
+                     fxLayout="row" fxLayoutAlign="start end" md-ink-ripple>
+                    <span class="label">
+                        {{hue}}
+                    </span>
+                    <md-icon *ngIf="selectedHue === hue" class="s-16">check</md-icon>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</md-menu>
--- a/src/app/core/components/material-color-picker/material-color-picker.component.scss
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.scss
@@ -11,7 +11,7 @@
            overflow: hidden;
            min-height: 258px;
            height: 308px;
-            background-color: #F7F7F7;
+            background-color: #f7f7f7;

            .view {
                position: absolute;
@@ -39,7 +39,7 @@
                            font-size: 10px;
                        }

-                        mat-icon {
+                        md-icon {
                            position: absolute;
                            top: 2px;
                            right: 2px;
--- a/src/app/core/components/material-color-picker/material-color-picker.component.ts
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.ts
@@ -1,7 +1,6 @@
-import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
-
-import { fuseAnimations } from '@fuse/animations';
-import { MatColors } from '@fuse/mat-colors';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { MatColors } from '../../matColors';
+import { fuseAnimations } from '../../animations';

@Component({
    selector     : 'fuse-material-color-picker',
@@ -10,7 +9,7 @@ import { MatColors } from '@fuse/mat-colors';
    animations   : fuseAnimations,
    encapsulation: ViewEncapsulation.None
 })
-export class FuseMaterialColorPickerComponent implements OnChanges
+export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
 {
    colors: any;
    selectedColor: any;
@@ -92,21 +91,11 @@ export class FuseMaterialColorPickerComponent implements OnChanges
        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
    }

-    ngOnChanges(changes: any)
+    ngOnInit()
    {
-        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
-            changes.selectedClass && changes.selectedClass.currentValue === '' ||
-            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
-        {
-            this.removeColor();
-            return;
-        }
-        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
-        {
-            this.updateSelectedColor();
-        }
+
    }
-    
+
    selectPalette(palette)
    {
        this.selectedPalette = palette;
@@ -125,7 +114,6 @@ export class FuseMaterialColorPickerComponent implements OnChanges
        this.selectedPalette = '';
        this.selectedHue = '';
        this.updateSelectedColor();
-        this.view = 'palettes';
    }

    updateSelectedColor()
@@ -141,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnChanges
            {
                this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
                this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
-                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+                this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
            }
            else
            {
@@ -184,4 +172,19 @@ export class FuseMaterialColorPickerComponent implements OnChanges
            this.view = 'hues';
        }
    }
+
+    ngOnChanges(changes: any)
+    {
+        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
+            changes.selectedClass && changes.selectedClass.currentValue === '' ||
+            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
+        {
+            this.removeColor();
+            return;
+        }
+        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+        {
+            this.updateSelectedColor();
+        }
+    }
 }
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -0,0 +1,18 @@
+<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>
+
+<div class="children" [ngClass]="{'open': isOpen}">
+
+    <div class="{{fuseSettings.colorClasses.navbar}}">
+
+        <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>
+        </ng-container>
+
+    </div>
+
+</div>
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { fuseAnimations } from '../../../../animations/index';
+import { fuseAnimations } from '../../../../animations';
 import { FuseConfigService } from '../../../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';

@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs/Subscription';
 })
 export class FuseNavHorizontalCollapseComponent implements OnDestroy
 {
-    onConfigChanged: Subscription;
+    onSettingsChanged: Subscription;
    fuseSettings: any;
    isOpen = false;

@@ -34,8 +34,8 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
        private fuseConfig: FuseConfigService
    )
    {
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
                .subscribe(
                    (newSettings) => {
                        this.fuseSettings = newSettings;
@@ -45,6 +45,6 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy

    ngOnDestroy()
    {
-        this.onConfigChanged.unsubscribe();
+        this.onSettingsChanged.unsubscribe();
    }
 }
--- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
@@ -0,0 +1,6 @@
+<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/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss
+++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss
--- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts
+++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -4,7 +4,7 @@
    <!-- Vertical Navigation Layout -->
    <ng-container *ngIf="layout === 'vertical'">

-        <ng-container *ngFor="let item of navigation">
+        <ng-container *ngFor="let item of navigationModel">

            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
@@ -18,11 +18,11 @@
    <!-- Horizontal Navigation Layout -->
    <ng-container *ngIf="layout === 'horizontal'">

-        <ng-container *ngFor="let item of navigation">
+        <ng-container *ngFor="let item of navigationModel">

            <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=='item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>

        </ng-container>

--- a/src/app/core/components/navigation/navigation.component.scss
+++ b/src/app/core/components/navigation/navigation.component.scss
@@ -0,0 +1,6 @@
+@import 'src/app/core/scss/fuse';
+
+#main-navigation {
+    margin: 0;
+    padding: 0;
+}
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -0,0 +1,33 @@
+import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { FuseNavigationService } from './navigation.service';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+    selector     : 'fuse-navigation',
+    templateUrl  : './navigation.component.html',
+    styleUrls    : ['./navigation.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseNavigationComponent implements OnDestroy
+{
+    navigationModel: any[];
+    navigationModelChangeSubscription: Subscription;
+
+    @Input('layout') layout = 'vertical';
+
+    constructor(private fuseNavigationService: FuseNavigationService)
+    {
+        this.navigationModelChangeSubscription =
+            this.fuseNavigationService.onNavigationModelChange
+                .subscribe((navigationModel) => {
+                    this.navigationModel = navigationModel;
+                });
+    }
+
+    ngOnDestroy()
+    {
+        console.warn('destroyed');
+        this.navigationModelChangeSubscription.unsubscribe();
+    }
+
+}
--- a/src/app/core/components/navigation/navigation.module.ts
+++ b/src/app/core/components/navigation/navigation.module.ts
@@ -1,10 +1,6 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
-import { MatIconModule, MatRippleModule } from '@angular/material';
-
-import { TranslateModule } from '@ngx-translate/core';
-
 import { FuseNavigationComponent } from './navigation.component';
 import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
 import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
@@ -14,13 +10,8 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na

@NgModule({
    imports     : [
-        CommonModule,
-        RouterModule,
-
-        MatIconModule,
-        MatRippleModule,
-
-        TranslateModule.forChild()
+        SharedModule,
+        RouterModule
    ],
    exports     : [
        FuseNavigationComponent
--- a/src/app/core/components/navigation/navigation.service.ts
+++ b/src/app/core/components/navigation/navigation.service.ts
@@ -0,0 +1,82 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { NavigationModel } from '../../../navigation.model';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class FuseNavigationService
+{
+    onNavCollapseToggled = new EventEmitter<any>();
+    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
+    navigationModel: NavigationModel;
+    flatNavigation: any[] = [];
+
+    constructor()
+    {
+        this.navigationModel = new NavigationModel();
+        this.onNavigationModelChange.next(this.navigationModel.model);
+    }
+
+    /**
+     * Get navigation model
+     * @returns {any[]}
+     */
+    getNavigationModel()
+    {
+        return this.navigationModel.model;
+    }
+
+    /**
+     * Set the navigation model
+     * @param model
+     */
+    setNavigationModel(model)
+    {
+        // console.log(model);
+
+        this.navigationModel = model;
+
+        console.log(this.navigationModel);
+
+        this.onNavigationModelChange.next(this.navigationModel.model);
+    }
+
+    /**
+     * Get flattened navigation array
+     * @param navigationItems
+     * @returns {any[]}
+     */
+    getFlatNavigation(navigationItems?)
+    {
+        if ( !navigationItems )
+        {
+            navigationItems = this.navigationModel.model;
+        }
+
+        for ( const navItem of navigationItems )
+        {
+            if ( navItem.type === 'subheader' )
+            {
+                continue;
+            }
+
+            if ( navItem.type === 'item' )
+            {
+                this.flatNavigation.push({
+                    title: navItem.title,
+                    type : navItem.type,
+                    icon : navItem.icon || false,
+                    url  : navItem.url
+                });
+
+                continue;
+            }
+
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
+            {
+                this.getFlatNavigation(navItem.children);
+            }
+        }
+
+        return this.flatNavigation;
+    }
+}
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -0,0 +1,11 @@
+<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>
+<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>
+    </ng-container>
+</div>
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.scss
@@ -1,7 +1,6 @@
 :host {

-    .folded:not(.unfolded) & {
-
+    .folded:not(.folded-open) & {
        .nav-link {

            > span {
@@ -9,17 +8,9 @@
                transition: opacity 200ms ease;
            }
        }
-
-        &.open {
-
-            .children {
-                display: none !important;
-            }
-        }
    }

    .nav-link {
-
        .collapse-arrow {
            transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;
            transform: rotate(0);
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
@@ -1,7 +1,7 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { fuseAnimations } from '../../../../animations/index';
+import { fuseAnimations } from '../../../../animations';

@Component({
    selector   : 'fuse-nav-vertical-collapse',
@@ -40,10 +40,10 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        );

        // Listen for collapsing of any navigation item
-        this.navigationService.onItemCollapsed
+        this.navigationService.onNavCollapseToggled
            .subscribe(
                (clickedItem) => {
-                    if ( clickedItem && clickedItem.children )
+                    if ( clickedItem.children )
                    {
                        // Check if the clicked item is one
                        // of the children of this item
@@ -69,20 +69,6 @@ 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
     *
@@ -95,8 +81,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        this.isOpen = !this.isOpen;

        // Navigation collapse toggled...
-        this.navigationService.onItemCollapsed.next(this.item);
-        this.navigationService.onItemCollapseToggled.next();
+        this.navigationService.onNavCollapseToggled.emit(this.item);
    }

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

        this.isOpen = true;
-        this.navigationService.onItemCollapseToggled.next();
    }

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

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

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

+    ngOnInit()
+    {
+    }
+
 }
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
@@ -0,0 +1,10 @@
+<div class="group-title">
+    <span class="hint-text">{{ 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>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+    </ng-container>
+</div>
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
@@ -1,6 +1,6 @@
 :host {

-    .folded:not(.unfolded) & {
+    .folded:not(.folded-open) & {

        > .group-title {
            align-items: center;
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
@@ -1,17 +1,21 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';

@Component({
    selector   : 'fuse-nav-vertical-group',
    templateUrl: './nav-vertical-group.component.html',
    styleUrls  : ['./nav-vertical-group.component.scss']
 })
-export class FuseNavVerticalGroupComponent
+export class FuseNavVerticalGroupComponent implements OnInit
 {
-    @HostBinding('class') classes = 'nav-group nav-item';
+    @HostBinding('class') classes = 'nav-group';
    @Input() item: any;

    constructor()
    {
    }

+    ngOnInit()
+    {
+    }
+
 }
--- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
+++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
@@ -0,0 +1,6 @@
+<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/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
+++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.scss
@@ -1,6 +1,6 @@
 :host {

-    .folded:not(.unfolded) & {
+    .folded:not(.folded-open) & {

        .nav-link {

--- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.ts
@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';

@Component({
    selector   : 'fuse-nav-vertical-item',
    templateUrl: './nav-vertical-item.component.html',
    styleUrls  : ['./nav-vertical-item.component.scss']
 })
-export class FuseNavVerticalItemComponent
+export class FuseNavVerticalItemComponent implements OnInit
 {
    @HostBinding('class') classes = 'nav-item';
    @Input() item: any;
@@ -13,4 +13,8 @@ export class FuseNavVerticalItemComponent
    constructor()
    {
    }
+
+    ngOnInit()
+    {
+    }
 }
--- a/src/app/core/components/search-bar/search-bar.component.html
+++ b/src/app/core/components/search-bar/search-bar.component.html
@@ -1,20 +1,20 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
    <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
        <label for="fuse-search-bar-input">
-            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
+            <button md-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                    *ngIf="collapsed">
-                <mat-icon class="s-24">search</mat-icon>
+                <md-icon class="s-24">search</md-icon>
            </button>
            <!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
-                <mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
+                <md-progress-spinner color="md-accent" mode="indeterminate"></md-progress-spinner>
            </span>-->
        </label>

        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>

-        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
+        <button md-icon-button class="fuse-search-bar-collapser md-icon-button" (click)="collapse()"
                aria-label="Collapse Search Bar">
-            <mat-icon class="s-24">close</mat-icon>
+            <md-icon class="s-24">close</md-icon>
        </button>

    </div>
--- a/src/app/core/components/search-bar/search-bar.component.scss
+++ b/src/app/core/components/search-bar/search-bar.component.scss
@@ -1,4 +1,4 @@
-@import "src/@fuse/scss/fuse";
+@import "src/app/core/scss/fuse";

 :host {

--- a/src/app/core/components/search-bar/search-bar.component.ts
+++ b/src/app/core/components/search-bar/search-bar.component.ts
@@ -1,27 +1,26 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';

-import { FuseConfigService } from '@fuse/services/config.service';
-
@Component({
    selector   : 'fuse-search-bar',
    templateUrl: './search-bar.component.html',
    styleUrls  : ['./search-bar.component.scss']
 })
-export class FuseSearchBarComponent
+export class FuseSearchBarComponent implements OnInit
 {
    collapsed: boolean;
    toolbarColor: string;
    @Output() onInput: EventEmitter<any> = new EventEmitter();
-    onConfigChanged: Subscription;
+    onSettingsChanged: Subscription;

    constructor(
        private fuseConfig: FuseConfigService
    )
    {
        this.collapsed = true;
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
                .subscribe(
                    (newSettings) => {
                        this.toolbarColor = newSettings.colorClasses.toolbar;
@@ -29,6 +28,11 @@ export class FuseSearchBarComponent
                );
    }

+    ngOnInit()
+    {
+
+    }
+
    collapse()
    {
        this.collapsed = true;
--- a/src/app/core/components/search-bar/search-bar.module.ts
+++ b/src/app/core/components/search-bar/search-bar.module.ts
@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';

-import { MatButtonModule, MatIconModule } from '@angular/material';
-
+import { SharedModule } from '../../modules/shared.module';
 import { FuseSearchBarComponent } from './search-bar.component';

@NgModule({
@@ -11,11 +9,8 @@ import { FuseSearchBarComponent } from './search-bar.component';
        FuseSearchBarComponent
    ],
    imports     : [
-        CommonModule,
-        RouterModule,
-
-        MatButtonModule,
-        MatIconModule
+        SharedModule,
+        RouterModule
    ],
    exports     : [
        FuseSearchBarComponent
--- a/src/app/core/components/shortcuts/shortcuts.component.html
+++ b/src/app/core/components/shortcuts/shortcuts.component.html
@@ -0,0 +1,89 @@
+<div id="fuse-shortcuts" #shortcuts>
+
+    <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>
+    </div>
+
+    <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
+
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
+
+            <div fxLayout="row" fxLayoutAlign="start center">
+
+                <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>
+                        <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
+                            {{shortcutItem.title.substr(0, 1).toUpperCase()}}
+                        </span>
+                    </a>
+
+                </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>
+
+            </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>
+            </div>
+
+        </div>
+
+        <md-menu #addMenu="mdMenu" 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>
+
+            <md-divider></md-divider>
+            <md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+
+                <md-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>
+                        <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>
+                    </div>
+                </md-list-item>
+                <md-list-item *ngIf="shortcutItems.length === 0">
+                    <p>
+                        <small>No shortcuts yet!</small>
+                    </p>
+                </md-list-item>
+            </md-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)">
+                    <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>
+                        <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>
+                    </div>
+                </md-list-item>
+            </md-nav-list>
+        </md-menu>
+
+    </div>
+
+</div>
--- a/src/app/core/components/shortcuts/shortcuts.component.scss
+++ b/src/app/core/components/shortcuts/shortcuts.component.scss
@@ -1,4 +1,4 @@
-@import 'src/@fuse/scss/fuse';
+@import 'src/app/core/scss/fuse';

 :host {

--- a/src/app/core/components/shortcuts/shortcuts.component.ts
+++ b/src/app/core/components/shortcuts/shortcuts.component.ts
@@ -1,14 +1,11 @@
 import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { FuseNavigationService } from '../navigation/navigation.service';
 import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { FuseConfigService } from '../../services/config.service';
 import { CookieService } from 'ngx-cookie-service';

-import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseConfigService } from '@fuse/services/config.service';
-
-import { navigation } from 'app/navigation/navigation';
-
@Component({
    selector   : 'fuse-shortcuts',
    templateUrl: './shortcuts.component.html',
@@ -23,7 +20,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
    mobileShortcutsPanelActive = false;
    toolbarColor: string;
    matchMediaSubscription: Subscription;
-    onConfigChanged: Subscription;
+    onSettingsChanged: Subscription;

    @ViewChild('searchInput') searchInputField;
    @ViewChild('shortcuts') shortcutsEl: ElementRef;
@@ -31,16 +28,16 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
    constructor(
        private renderer: Renderer2,
        private observableMedia: ObservableMedia,
-        private fuseMatchMedia: FuseMatchMediaService,
+        private fuseMatchMedia: FuseMatchMedia,
        private fuseNavigationService: FuseNavigationService,
        private fuseConfig: FuseConfigService,
        private cookieService: CookieService
    )
    {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();

-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
+        this.onSettingsChanged =
+            this.fuseConfig.onSettingsChanged
                .subscribe(
                    (newSettings) => {
                        this.toolbarColor = newSettings.colorClasses.toolbar;
@@ -152,9 +149,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy

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

    showMobileShortcutsPanel()
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	cf9e9fc209	Merge branch 'master' into skeleton	2017-09-22 16:45:47 +03:00
Sercan Yemen	ff0f2933d9	Merge branch 'master' into skeleton	2017-09-22 16:45:23 +03:00
Sercan Yemen	62467c8ddf	Merge branch 'master' into skeleton	2017-09-12 16:06:21 +03:00
Sercan Yemen	024ab15b25	Merge branch 'master' into skeleton	2017-09-11 16:34:07 +03:00
Sercan Yemen	915ad52863	Merge branch 'master' into skeleton	2017-09-11 16:21:05 +03:00
Sercan Yemen	97bfaa9979	Merge branch 'master' into skeleton	2017-09-11 13:06:42 +03:00
Sercan Yemen	6ae3e154c3	Merge branch 'master' into skeleton	2017-09-11 12:59:36 +03:00
Sercan Yemen	49b6ff7292	navigation model for horizontal nav	2017-09-11 12:58:24 +03:00
Sercan Yemen	903688ab43	Merge branch 'master' into skeleton	2017-09-11 12:57:59 +03:00
Sercan Yemen	19f822cbab	removed unnecessary md2 from skeleton	2017-09-01 09:05:56 +03:00
Sercan Yemen	1d21a14d0e	Merge branch 'master' into skeleton	2017-08-30 20:52:23 +03:00
Sercan Yemen	4bf2ba73ad	merge 'master' into skeleton	2017-08-30 20:08:12 +03:00
Sercan Yemen	6a3972fff8	Merge branch 'master' into skeleton	2017-08-30 14:43:10 +03:00
Sercan Yemen	dca16238eb	Merge branch 'master' into skeleton	2017-08-30 14:41:30 +03:00
Sercan Yemen	2b91119d00	Merge branch 'master' into skeleton	2017-08-30 11:50:56 +03:00
Sercan Yemen	ff4899e8d2	Merge branch 'master' into skeleton # Conflicts: # src/app/app.module.ts # src/app/main/content/apps/calendar/calendar.component.html # src/app/main/content/apps/contacts/contact-list/contact-list.component.html # src/app/main/content/apps/contacts/contacts.component.html # src/app/main/content/apps/contacts/contacts.component.scss # src/app/main/content/apps/contacts/contacts.module.ts # src/app/main/content/apps/contacts/contacts.service.ts # src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html # src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html # src/app/navigation.model.ts	2017-08-24 11:18:24 +03:00
Sercan Yemen	e818c53f1d	navbar fixes	2017-08-22 16:05:32 +03:00
Sercan Yemen	ca96fffadf	removed fuse fake db	2017-08-22 15:58:35 +03:00
Sercan Yemen	d7003711ee	skeleton branch	2017-08-22 15:55:48 +03:00
				`@@ -1 +0,0 @@`
				`https://themeforest.net/licenses/terms/regular`