angular.json for skeleton

Merge branch 'master' into skeleton
Set the output path
2026-04-26 11:54:13 +00:00 · 2018-05-06 14:47:26 +03:00 · 2018-05-06 14:47:07 +03:00 · 2018-05-06 14:33:17 +03:00 · 2018-05-06 14:32:10 +03:00 · 2018-05-06 14:19:28 +03:00
1046 changed files with 10759 additions and 60268 deletions
@@ -1,74 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "project": {
-        "name": "fuse2"
-    },
-    "apps": [
-        {
-            "root": "src",
-            "outDir": "dist",
-            "assets": [
-                "assets",
-                "app/main/content/components/angular-material",
-                "favicon.ico"
-            ],
-            "index": "index.html",
-            "main": "main.ts",
-            "polyfills": "polyfills.ts",
-            "test": "test.ts",
-            "tsconfig": "tsconfig.app.json",
-            "testTsconfig": "tsconfig.spec.json",
-            "prefix": "app",
-            "styles": [
-                "styles.scss"
-            ],
-            "scripts": [],
-            "environmentSource": "environments/environment.ts",
-            "environments": {
-                "dev": "environments/environment.ts",
-                "hmr": "environments/environment.hmr.ts",
-                "prod": "environments/environment.prod.ts"
-            }
-        }
-    ],
-    "e2e": {
-        "protractor": {
-            "config": "./protractor.conf.js"
-        }
-    },
-    "lint": [
-        {
-            "project": "src/tsconfig.app.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        },
-        {
-            "project": "src/tsconfig.spec.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        },
-        {
-            "project": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        }
-    ],
-    "test": {
-        "karma": {
-            "config": "./karma.conf.js"
-        }
-    },
-    "defaults": {
-        "styleExt": "scss",
-        "component": {}
-    }
-}
@@ -1,3 +1,4 @@
+# Editor configuration, see http://editorconfig.org
 root = true

 [*]
@@ -30,13 +30,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings

-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db
@@ -1,6 +1,12 @@
 # Fuse2

-Material Design Admin Template with Angular 5+ and Angular Material 2
+Material Design Admin Template with Angular 6+ 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.

 ## Development server

@@ -8,11 +14,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w

 ## Code scaffolding

-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

 ## Build

-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

 ## Running unit tests

@@ -21,4 +27,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests

 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
@@ -0,0 +1,135 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "fuse": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "styleext": "scss"
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "fuse:build:production"
+                        },
+                        "hmr": {
+                            "hmr": true,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "styles.scss"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        },
+        "fuse-e2e": {
+            "root": "e2e/",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "fuse:serve"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "fuse"
+}
@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const {SpecReporter} = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs            : [
+        './src/**/*.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: require('path').join(__dirname, './tsconfig.e2e.json')
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
+    }
+};
@@ -9,6 +9,6 @@ describe('Fuse2 App', () => {

    it('should display welcome message', () => {
        page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to app!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
    });
 });
@@ -1,8 +1,7 @@
 {
  "extends": "../tsconfig.json",
  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
+    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "target": "es5",
    "types": [
@@ -11,4 +10,4 @@
      "node"
    ]
  }
-}
+}
@@ -1,33 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
-            require('@angular/cli/plugins/karma')
-        ],
-        client:{
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        coverageIstanbulReporter: {
-            reports: [ 'html', 'lcovonly' ],
-            fixWebpackSourcePaths: true
-        },
-        angularCli: {
-            environment: 'dev'
-        },
-        reporters: ['progress', 'kjhtml'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        browsers: ['Chrome'],
-        singleRun: false
-    });
-};
@@ -1,80 +1,88 @@
 {
-  "name": "fuse2",
-  "version": "1.3.1",
+  "name": "fuse",
+  "version": "6.0.0",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
-    "start": "ng serve",
-    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
+    "start": "ng serve --open",
+    "start-hmr": "ng serve --configuration 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",
    "test": "ng test",
    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.1.2",
-    "@angular/cdk": "5.0.2",
-    "@angular/common": "5.1.2",
-    "@angular/compiler": "5.1.2",
-    "@angular/core": "5.1.2",
-    "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.1.2",
-    "@angular/http": "5.1.2",
-    "@angular/material": "5.0.2",
-    "@angular/material-moment-adapter": "5.0.2",
-    "@angular/platform-browser": "5.1.2",
-    "@angular/platform-browser-dynamic": "5.1.2",
-    "@angular/router": "5.1.2",
-    "@ngx-translate/core": "9.0.2",
-    "@swimlane/ngx-charts": "7.0.1",
-    "@swimlane/ngx-datatable": "11.1.7",
-    "@swimlane/ngx-dnd": "3.1.0",
-    "angular-calendar": "0.23.0",
-    "angular-in-memory-web-api": "0.5.2",
-    "angular2-markdown": "1.6.0",
+    "@angular/animations": "6.0.0",
+    "@angular/cdk": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/flex-layout": "6.0.0-beta.15",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/material": "6.0.0",
+    "@angular/material-moment-adapter": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/router": "6.0.0",
+    "@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": "10.0.1",
+    "@swimlane/ngx-charts": "7.3.0",
+    "@swimlane/ngx-datatable": "11.3.2",
+    "@swimlane/ngx-dnd": "3.2.0",
+    "@types/prismjs": "1.9.0",
+    "angular-calendar": "0.24.0",
+    "angular-in-memory-web-api": "0.6.0",
+    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.12.0",
+    "core-js": "2.5.5",
+    "d3": "5.1.0",
    "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
-    "intl": "1.2.5",
-    "moment": "2.20.1",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
-    "ngrx-store-freeze": "0.2.0",
-    "ngx-color-picker": "5.3.0",
-    "ngx-cookie-service": "1.0.9",
+    "lodash": "4.17.10",
+    "moment": "2.22.1",
+    "ng2-charts": "1.6.0",
+    "ngrx-store-freeze": "0.2.2",
+    "ngx-color-picker": "5.3.8",
+    "ngx-cookie-service": "1.0.10",
    "perfect-scrollbar": "1.3.0",
-    "rxjs": "5.5.6",
+    "prismjs": "1.14.0",
+    "rxjs": "6.1.0",
+    "rxjs-compat": "6.1.0",
    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.26"
  },
  "devDependencies": {
-    "@angular/cli": "1.6.2",
-    "@angular/compiler-cli": "5.1.2",
-    "@angular/language-service": "5.1.2",
+    "@angular/cli": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "0.6.0",
    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.5.54",
+    "@types/jasmine": "2.8.7",
    "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.95",
-    "codelyzer": "4.0.2",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
+    "@types/lodash": "4.14.108",
+    "@types/node": "8.9.5",
+    "codelyzer": "4.2.1",
+    "jasmine-core": "2.99.1",
+    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.1",
-    "karma-jasmine": "1.1.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-coverage-istanbul-reporter": "1.4.2",
+    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
-    "ts-node": "3.2.2",
-    "tslint": "5.7.0",
-    "typescript": "2.4.2"
+    "protractor": "5.3.1",
+    "ts-node": "5.0.1",
+    "tslint": "5.9.1",
+    "typescript": "2.7.2",
+    "webpack-bundle-analyzer": "2.11.1"
  }
 }
@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-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 } }));
-    }
-};
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialogRef } from '@angular/material';

@Component({
@@ -6,7 +6,7 @@ import { MatDialogRef } from '@angular/material';
    templateUrl: './confirm-dialog.component.html',
    styleUrls  : ['./confirm-dialog.component.scss']
 })
-export class FuseConfirmDialogComponent implements OnInit
+export class FuseConfirmDialogComponent
 {
    public confirmMessage: string;

@@ -14,8 +14,4 @@ export class FuseConfirmDialogComponent implements OnInit
    {
    }

-    ngOnInit()
-    {
-    }
-
 }
@@ -0,0 +1,20 @@
+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
+{
+}
@@ -1,8 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
-import * as moment from 'moment';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/interval';

+import * as moment from 'moment';
+
@Component({
    selector   : 'fuse-countdown',
    templateUrl: './countdown.component.html',
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
+
+@NgModule({
+    declarations: [
+        FuseCountdownComponent
+    ],
+    exports: [
+        FuseCountdownComponent
+    ],
+})
+export class FuseCountdownModule
+{
+}
@@ -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>
+        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 -->
@@ -1,6 +1,8 @@
 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';

@@ -10,8 +12,10 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
        FuseDemoSidenavComponent
    ],
    imports     : [
-        SharedModule,
-        RouterModule
+        RouterModule,
+
+        MatDividerModule,
+        MatListModule
    ],
    exports     : [
        FuseDemoContentComponent,
@@ -0,0 +1,6 @@
+:host {
+    display: block;
+    padding: 8px;
+    background: #263238;
+    cursor: text;
+}
@@ -0,0 +1,102 @@
+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>';
+
+    }
+}
+
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
+
+@NgModule({
+    declarations: [
+        FuseHighlightComponent
+    ],
+    exports: [
+        FuseHighlightComponent
+    ],
+})
+export class FuseHighlightModule
+{
+}
@@ -0,0 +1,17 @@
+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-markup-templating';
+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';
@@ -0,0 +1,11 @@
+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';
@@ -9,10 +9,8 @@

 <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">
+    <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'"
@@ -30,7 +28,7 @@

        <button mat-icon-button
                class="remove-color-button"
-                (click)="removeColor()"
+                (click)="$event.stopPropagation();removeColor()"
                aria-label="Remove Color">
            <mat-icon class="s-20">delete</mat-icon>
        </button>
@@ -39,13 +37,9 @@

    <div [ngSwitch]="view" class="views">

-        <div class="view"
-             *ngSwitchCase="'palettes'"
-             [@slideInLeft]>
+        <div class="view" *ngSwitchCase="'palettes'">

-            <div fxLayout="row" fxLayoutWrap
-                 fxLayoutAlign="start start"
-                 class="colors" fusePerfectScrollbar>
+            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
                <div class="color"
                     [ngClass]="'mat-'+color.key+'-bg'"
                     *ngFor="let color of (colors | keys)"
@@ -58,18 +52,12 @@
            </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"
+        <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>
+                     (click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                    <span class="label">
                        {{hue}}
                    </span>
@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { MatColors } from '../../matColors';
-import { fuseAnimations } from '../../animations';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+import { MatColors } from '@fuse/mat-colors';

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

-    ngOnInit()
+    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();
+        }
    }
-
+    
    selectPalette(palette)
    {
        this.selectedPalette = palette;
@@ -114,6 +125,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
        this.selectedPalette = '';
        this.selectedHue = '';
        this.updateSelectedColor();
+        this.view = 'palettes';
    }

    updateSelectedColor()
@@ -172,19 +184,4 @@ export class FuseMaterialColorPickerComponent implements OnInit, 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();
-        }
-    }
 }
@@ -0,0 +1,33 @@
+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
+{
+}
@@ -0,0 +1,52 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
+        <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>
+    </ng-template>
+
+    <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>
+
+</ng-container>
@@ -1,5 +1,5 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { fuseAnimations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations/index';
 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
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
    fuseSettings: any;
    isOpen = false;

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

    ngOnDestroy()
    {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
    }
 }
@@ -0,0 +1,30 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
+        <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>
+    </ng-template>
+
+</ng-container>
@@ -4,7 +4,7 @@
    <!-- Vertical Navigation Layout -->
    <ng-container *ngIf="layout === 'vertical'">

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

            <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,7 +18,7 @@
    <!-- Horizontal Navigation Layout -->
    <ng-container *ngIf="layout === 'horizontal'">

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

            <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>
@@ -0,0 +1,12 @@
+@import 'src/@fuse/scss/fuse';
+
+fuse-navigation {
+    display: flex;
+    flex: 1 0 auto;
+
+    #main-navigation {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+}
@@ -0,0 +1,18 @@
+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()
+    {
+
+    }
+}
@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
+import { CommonModule } from '@angular/common';
 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';
@@ -10,8 +14,13 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na

@NgModule({
    imports     : [
-        SharedModule,
-        RouterModule
+        CommonModule,
+        RouterModule,
+
+        MatIconModule,
+        MatRippleModule,
+
+        TranslateModule.forChild()
    ],
    exports     : [
        FuseNavigationComponent
@@ -0,0 +1,48 @@
+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;
+    }
+}
@@ -0,0 +1,45 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function" (click)="toggleOpen($event)"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="toggleOpen($event);item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="toggleOpen($event);item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
+        <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>
+    </ng-template>
+
+    <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>
@@ -1,6 +1,7 @@
 :host {

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

            > span {
@@ -8,9 +9,17 @@
                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);
@@ -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';
+import { fuseAnimations } from '../../../../animations/index';

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

        // Listen for collapsing of any navigation item
-        this.navigationService.onNavCollapseToggled
+        this.navigationService.onItemCollapsed
            .subscribe(
                (clickedItem) => {
                    if ( clickedItem && clickedItem.children )
@@ -95,8 +95,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
        this.isOpen = !this.isOpen;

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

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

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

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

        this.isOpen = false;
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
    }

    /**
@@ -0,0 +1,15 @@
+<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>
@@ -1,6 +1,6 @@
 :host {

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

        > .group-title {
            align-items: center;
@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';

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

-    ngOnInit()
-    {
-    }
-
 }
@@ -0,0 +1,31 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
+        <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>
+    </ng-template>
+
+</ng-container>
@@ -1,6 +1,6 @@
 :host {

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

        .nav-link {

@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';

@Component({
    selector   : 'fuse-nav-vertical-item',
    templateUrl: './nav-vertical-item.component.html',
    styleUrls  : ['./nav-vertical-item.component.scss']
 })
-export class FuseNavVerticalItemComponent implements OnInit
+export class FuseNavVerticalItemComponent
 {
    @HostBinding('class') classes = 'nav-item';
    @Input() item: any;
@@ -13,8 +13,4 @@ export class FuseNavVerticalItemComponent implements OnInit
    constructor()
    {
    }
-
-    ngOnInit()
-    {
-    }
 }
@@ -1,5 +1,7 @@
-<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
-    <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
+
+    <div class="fuse-search-bar-content" [ngClass]="toolbarColor">
+
        <label for="fuse-search-bar-input">
            <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                    *ngIf="collapsed">
@@ -10,12 +12,14 @@
            </span>-->
        </label>

-        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
+        <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 mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
                aria-label="Collapse Search Bar">
            <mat-icon class="s-24">close</mat-icon>
        </button>

    </div>
+
 </div>
@@ -0,0 +1,91 @@
+@import "src/@fuse/scss/fuse";
+
+:host {
+
+    .fuse-search-bar {
+        display: flex;
+        flex: 0 1 auto;
+        min-width: 64px;
+        height: 64px;
+        font-size: 13px;
+
+        @include media-breakpoint-down('sm') {
+            height: 56px;
+        }
+
+        .fuse-search-bar-content {
+            display: flex;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: flex-start;
+
+            .fuse-search-bar-expander,
+            .fuse-search-bar-collapser {
+                cursor: pointer;
+                padding: 0 20px;
+                margin: 0;
+                width: 64px !important;
+                height: 64px !important;
+                line-height: 64px !important;
+
+                @include media-breakpoint-down('sm') {
+                    height: 56px !important;
+                    line-height: 56px !important;
+                }
+            }
+
+            .fuse-search-bar-loader {
+                width: 64px !important;
+                height: 64px !important;
+                line-height: 64px !important;
+
+                @include media-breakpoint-down('sm') {
+                    height: 56px !important;
+                    line-height: 56px !important;
+                }
+            }
+
+            .fuse-search-bar-collapser {
+                display: none;
+            }
+
+            #fuse-search-bar-input {
+                display: none;
+                flex: 1 0 auto;
+                min-height: 64px;
+                background-color: transparent;
+                font-size: 16px;
+            }
+        }
+
+        &.expanded {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 10;
+
+            .fuse-search-bar-content {
+
+                #fuse-search-bar-input {
+                    display: flex;
+                }
+
+                .fuse-search-bar-collapser {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    body {
+
+        &.fuse-search-bar-expanded {
+
+            #toolbar {
+                z-index: 999 !important;
+            }
+        }
+    }
+}
@@ -1,26 +1,27 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { FuseConfigService } from '../../services/config.service';
+import { Component, EventEmitter, Output } from '@angular/core';
 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 implements OnInit
+export class FuseSearchBarComponent
 {
    collapsed: boolean;
    toolbarColor: string;
    @Output() onInput: EventEmitter<any> = new EventEmitter();
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;

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

-    ngOnInit()
-    {
-
-    }
-
    collapse()
    {
        this.collapsed = true;
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';

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

@NgModule({
@@ -9,8 +11,11 @@ import { FuseSearchBarComponent } from './search-bar.component';
        FuseSearchBarComponent
    ],
    imports     : [
-        SharedModule,
-        RouterModule
+        CommonModule,
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule
    ],
    exports     : [
        FuseSearchBarComponent
@@ -17,7 +17,7 @@
                     *ngFor="let shortcutItem of shortcutItems">

                    <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+                        <mat-icon class="secondary-text" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                        <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                            {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                        </span>
@@ -42,46 +42,70 @@

        <mat-menu #addMenu="matMenu" class="w-240">

-            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatLabel="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>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *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>
+
+                        <mat-icon class="ml-8 amber-fg">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>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *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>
+
+                        <mat-icon class="ml-8 amber-fg" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
                    </div>
+
                </mat-list-item>
+
            </mat-nav-list>
+
        </mat-menu>

    </div>
@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';

 :host {

@@ -1,11 +1,12 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { FuseNavigationService } from '../navigation/navigation.service';
+import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 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';
+
@Component({
    selector   : 'fuse-shortcuts',
    templateUrl: './shortcuts.component.html',
@@ -20,7 +21,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
    mobileShortcutsPanelActive = false;
    toolbarColor: string;
    matchMediaSubscription: Subscription;
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
+
+    @Input() navigation: any;

    @ViewChild('searchInput') searchInputField;
    @ViewChild('shortcuts') shortcutsEl: ElementRef;
@@ -28,16 +31,14 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
    constructor(
        private renderer: Renderer2,
        private observableMedia: ObservableMedia,
-        private fuseMatchMedia: FuseMatchMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
        private fuseNavigationService: FuseNavigationService,
        private fuseConfig: FuseConfigService,
        private cookieService: CookieService
    )
    {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
-
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                .subscribe(
                    (newSettings) => {
                        this.toolbarColor = newSettings.colorClasses.toolbar;
@@ -47,6 +48,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy

    ngOnInit()
    {
+        // Get the navigation items and flatten them
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(this.navigation);
+
        const cookieExists = this.cookieService.check('FUSE2.shortcuts');

        if ( cookieExists )
@@ -0,0 +1,38 @@
+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
+{
+}
@@ -0,0 +1 @@
+<ng-content></ng-content>
@@ -0,0 +1,60 @@
+fuse-sidebar {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    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;
+}
@@ -0,0 +1,442 @@
+import { Component, ElementRef, HostBinding, HostListener, 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 { FuseConfigService } from '@fuse/services/config.service';
+
+@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: 'left' | 'right';
+
+    // Open
+    @HostBinding('class.open')
+    opened: boolean;
+
+    // Locked Open
+    @Input()
+    lockedOpen: string;
+
+    // isLockedOpen
+    @HostBinding('class.locked-open')
+    isLockedOpen: boolean;
+
+    // Folded
+    @HostBinding('class.folded')
+    @Input()
+    set folded(value: boolean)
+    {
+        // Only work if the sidebar is not closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Set the folded
+        this._folded = value;
+
+        // Programmatically add/remove margin to the element
+        // that comes after or before based on the alignment
+        let sibling,
+            styleRule;
+
+        const styleValue = '64px';
+
+        // Get the sibling and set the style rule
+        if ( this.align === 'left' )
+        {
+            sibling = this.elementRef.nativeElement.nextElementSibling;
+            styleRule = 'marginLeft';
+        }
+        else
+        {
+            sibling = this.elementRef.nativeElement.previousElementSibling;
+            styleRule = 'marginRight';
+        }
+
+        // If there is no sibling, return...
+        if ( !sibling )
+        {
+            return;
+        }
+
+        // If folded...
+        if ( value )
+        {
+            // Set the style
+            this.renderer.setStyle(sibling, styleRule, styleValue);
+        }
+        // If unfolded...
+        else
+        {
+            // Remove the style
+            this.renderer.removeStyle(sibling, styleRule);
+        }
+    }
+
+    get folded(): boolean
+    {
+        return this._folded;
+    }
+
+    // Folded unfolded
+    @HostBinding('class.unfolded')
+    unfolded: boolean;
+
+    // Private
+    private _folded: boolean;
+    private _wasActive: boolean;
+    private _backdrop: HTMLElement | null = null;
+    private _player: AnimationPlayer;
+    private _onMediaChangeSubscription: Subscription;
+
+    /**
+     * Constructor
+     *
+     * @param {Renderer2} renderer
+     * @param {ElementRef} elementRef
+     * @param {AnimationBuilder} animationBuilder
+     * @param {ObservableMedia} observableMedia
+     * @param {FuseConfigService} fuseConfigService
+     * @param {FuseSidebarService} fuseSidebarService
+     * @param {FuseMatchMediaService} fuseMatchMediaService
+     */
+    constructor(
+        private renderer: Renderer2,
+        private elementRef: ElementRef,
+        private animationBuilder: AnimationBuilder,
+        private observableMedia: ObservableMedia,
+        private fuseConfigService: FuseConfigService,
+        private fuseSidebarService: FuseSidebarService,
+        private fuseMatchMediaService: FuseMatchMediaService
+    )
+    {
+        // Set the defaults
+        this.opened = false;
+        this.folded = false;
+        this.align = 'left';
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Register the sidebar
+        this.fuseSidebarService.register(this.name, this);
+
+        // Setup alignment
+        this._setupAlignment();
+
+        // Setup lockedOpen
+        this._setupLockedOpen();
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // If the sidebar is folded, unfold it to revert modifications
+        if ( this.folded )
+        {
+            this.unfold();
+        }
+
+        // Unregister the sidebar
+        this.fuseSidebarService.unregister(this.name);
+
+        // Unsubscribe from the media watcher subscription
+        this._onMediaChangeSubscription.unsubscribe();
+    }
+
+    /**
+     * Set the sidebar alignment
+     *
+     * @private
+     */
+    private _setupAlignment(): void
+    {
+        // Add the correct class name to the sidebar
+        // element depending on the align attribute
+        if ( this.align === 'right' )
+        {
+            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
+        }
+        else
+        {
+            this.renderer.addClass(this.elementRef.nativeElement, 'left-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._onMediaChangeSubscription =
+
+            this.fuseMatchMediaService.onMediaChange.subscribe(() => {
+
+                // Get the active status
+                const isActive = this.observableMedia.isActive(this.lockedOpen);
+
+                // If the both status are the same, don't act
+                if ( this._wasActive === isActive )
+                {
+                    return;
+                }
+
+                // Activate the lockedOpen
+                if ( isActive )
+                {
+                    // Set the lockedOpen status
+                    this.isLockedOpen = true;
+
+                    // Force the the opened status to true
+                    this.opened = true;
+
+                    // Read the folded setting from the config
+                    // and fold the sidebar if it's true
+                    if ( this.fuseConfigService.config.layout.navigationFolded )
+                    {
+                        this.fold();
+                    }
+
+                    // Hide the backdrop if any exists
+                    this.hideBackdrop();
+                }
+                // De-Activate the lockedOpen
+                else
+                {
+                    // Set the lockedOpen status
+                    this.isLockedOpen = false;
+
+                    // Unfold the sidebar in case if it was folded
+                    this.unfold();
+
+                    // Force the the opened status to close
+                    this.opened = false;
+                }
+
+                // Store the new active status
+                this._wasActive = isActive;
+            });
+    }
+
+    /**
+     * Open the sidebar
+     */
+    open(): void
+    {
+        if ( this.opened || this.isLockedOpen )
+        {
+            return;
+        }
+
+        // Show the backdrop
+        this.showBackdrop();
+
+        // Set the opened status
+        this.opened = true;
+    }
+
+    /**
+     * Close the sidebar
+     */
+    close(): void
+    {
+        if ( !this.opened || this.isLockedOpen )
+        {
+            return;
+        }
+
+        // Hide the backdrop
+        this.hideBackdrop();
+
+        // Set the opened status
+        this.opened = false;
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * Mouseleave
+     */
+    @HostListener('mouseleave')
+    onMouseLeave(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Fold the sidebar back
+        this.unfolded = false;
+    }
+
+    /**
+     * Fold the sidebar permanently
+     */
+    fold(): void
+    {
+        // Only work if the sidebar is not folded
+        if ( this.folded )
+        {
+            return;
+        }
+
+        // Fold
+        this.folded = true;
+    }
+
+    /**
+     * Unfold the sidebar permanently
+     */
+    unfold(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Unfold
+        this.folded = false;
+    }
+
+    /**
+     * 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;
+            }
+        });
+    }
+}
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseSidebarComponent } from './sidebar.component';
+
+@NgModule({
+    declarations: [
+        FuseSidebarComponent
+    ],
+    exports     : [
+        FuseSidebarComponent
+    ]
+})
+export class FuseSidebarModule
+{
+}
@@ -0,0 +1,75 @@
+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.warn(`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
+     * @returns {FuseSidebarComponent}
+     */
+    getSidebar(key): FuseSidebarComponent
+    {
+        // Check if the sidebar exists
+        if ( !this._registry[key] )
+        {
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+
+            return;
+        }
+
+        // Return the sidebar
+        return this._registry[key];
+    }
+}
@@ -13,8 +13,8 @@
    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">

        <h3>Navigation:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+        <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>
@@ -22,30 +22,30 @@
        </mat-radio-group>

        <h3>Navigation Fold (for vertical navigation):</h3>
-        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+        <mat-slide-toggle [(ngModel)]="config.layout.navigationFolded"
                          (change)="onSettingsChange()">
            Folded
        </mat-slide-toggle>

        <h3 class="mt-24">Toolbar:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+        <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)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+        <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)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+        <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>
@@ -57,19 +57,19 @@

            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                <h4 class="mr-8">Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
+                <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)]="fuseSettings.colorClasses.navbar"
+                <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)]="fuseSettings.colorClasses.footer"
+                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.footer"
                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
            </div>

@@ -79,7 +79,7 @@

        <h3>Router Animation:</h3>
        <mat-form-field class="w-100-p">
-            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+            <mat-select class="p-0" [(ngModel)]="config.routerAnimation">
                <mat-option value="none">
                    None
                </mat-option>
@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";

@keyframes rotating {
    from {
@@ -1,9 +1,10 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseConfigService } from '../../services/config.service';
-import { fuseAnimations } from '../../animations';
-import { FuseNavigationService } from '../navigation/navigation.service';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';

@Component({
    selector   : 'fuse-theme-options',
@@ -13,14 +14,15 @@ import { FuseNavigationService } from '../navigation/navigation.service';
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
+    @Input() navigation;
    @ViewChild('openButton') openButton;
    @ViewChild('panel') panel;
    @ViewChild('overlay') overlay: ElementRef;

    public player: AnimationPlayer;
-    fuseSettings: any;
+    config: any;

-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;

    @HostBinding('class.bar-closed') barClosed: boolean;

@@ -33,19 +35,26 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
    {
        this.barClosed = true;

-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
                .subscribe(
-                    (newSettings) => {
-                        this.fuseSettings = newSettings;
+                    (newConfig) => {
+                        this.config = newConfig;
                    }
                );
+    }
+
+    ngOnInit()
+    {
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
+        });

        // Get the nav model and add customize nav item
        // that opens the bar programmatically
-        const navModel = this.navigationService.getNavigationModel();
+        const nav: any = this.navigation;

-        navModel.push({
+        nav.push({
            'id'      : 'custom-function',
            'title'   : 'Custom Function',
            'type'    : 'group',
@@ -63,16 +72,14 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        });
    }

-    ngOnInit()
+    ngOnDestroy()
    {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
-        });
+        this.onConfigChanged.unsubscribe();
    }

    onSettingsChange()
    {
-        this.fuseConfig.setSettings(this.fuseSettings);
+        this.fuseConfig.setConfig(this.config);
    }

    closeBar()
@@ -104,9 +111,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy

        this.player.play();
    }
-
-    ngOnDestroy()
-    {
-        this.onSettingsChanged.unsubscribe();
-    }
 }
@@ -0,0 +1,37 @@
+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
+{
+}
@@ -0,0 +1,11 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+    selector: '[fuseWidgetToggle]'
+})
+export class FuseWidgetToggleDirective
+{
+    constructor(public el: ElementRef)
+    {
+    }
+}
@@ -67,16 +67,16 @@ fuse-widget {

        &.mat-form-field-type-mat-select {

-            .mat-input-wrapper {
+            .mat-form-field-wrapper {
                padding: 16px 0;

-                .mat-input-infix {
+                .mat-form-field-infix {
                    border: none;
                    padding: 0;
                }
            }

-            .mat-input-underline {
+            .mat-form-field-underline {
                display: none;
            }
        }
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, OnInit, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
 import { FuseWidgetToggleDirective } from './widget-toggle.directive';

@Component({
@@ -8,7 +8,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
    encapsulation: ViewEncapsulation.None
 })

-export class FuseWidgetComponent implements OnInit, AfterContentInit
+export class FuseWidgetComponent implements AfterContentInit
 {
    @HostBinding('class.flipped') flipped = false;
    @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
@@ -17,11 +17,6 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
    {
    }

-    ngOnInit()
-    {
-
-    }
-
    ngAfterContentInit()
    {
        setTimeout(() => {
@@ -1,20 +1,17 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
+
 import { FuseWidgetComponent } from './widget.component';
 import { FuseWidgetToggleDirective } from './widget-toggle.directive';

@NgModule({
-    imports     : [
-        SharedModule
+    declarations: [
+        FuseWidgetComponent,
+        FuseWidgetToggleDirective
    ],
    exports     : [
        FuseWidgetComponent,
        FuseWidgetToggleDirective
    ],
-    declarations: [
-        FuseWidgetComponent,
-        FuseWidgetToggleDirective
-    ]
 })
 export class FuseWidgetModule
 {
@@ -0,0 +1,24 @@
+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
+{
+}
@@ -2,8 +2,9 @@ import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '
 import { MatSidenav } from '@angular/material';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
+
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';

@Directive({
    selector: '[fuseMatSidenavHelper]'
@@ -11,15 +12,13 @@ import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
 export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 {
    matchMediaSubscription: Subscription;
-
    @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
-
    @Input('fuseMatSidenavHelper') id: string;
    @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;

    constructor(
        private fuseMatSidenavService: FuseMatSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
        private observableMedia: ObservableMedia,
        private matSidenav: MatSidenav
    )
@@ -1,19 +1,21 @@
-import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import PerfectScrollbar from 'perfect-scrollbar';
-import { FuseConfigService } from '../../services/config.service';
-import { Subscription } from 'rxjs/Subscription';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { Subscription } from 'rxjs/Subscription';
+
+import PerfectScrollbar from 'perfect-scrollbar';
+
+import { FuseConfigService } from '@fuse/services/config.service';

@Directive({
    selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
    isDisableCustomScrollbars = false;
    isMobile = false;
    isInitialized = true;
-    ps;
+    ps: PerfectScrollbar;

    constructor(
        public element: ElementRef,
@@ -21,13 +23,16 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
        private platform: Platform
    )
    {
-        this.onSettingsChanged =
-            this.fuseConfig.onSettingsChanged
-                .subscribe(
-                    (settings) => {
-                        this.isDisableCustomScrollbars = !settings.customScrollbars;
-                    }
-                );
+    }
+
+    ngOnInit()
+    {
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged.subscribe(
+                (settings) => {
+                    this.isDisableCustomScrollbars = !settings.customScrollbars;
+                }
+            );

        if ( this.platform.ANDROID || this.platform.IOS )
        {
@@ -56,12 +61,27 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
            return;
        }

-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();

        // Destroy the perfect-scrollbar
        this.ps.destroy();
    }

+    @HostListener('document:click', ['$event'])
+    documentClick(event: Event): void
+    {
+        if ( !this.isInitialized || !this.ps )
+        {
+            return;
+        }
+
+        // Update the scrollbar on document click..
+        // This isn't the most elegant solution but there is no other way
+        // of knowing when the contents of the scrollable container changes.
+        // Therefore, we update scrollbars on every document click.
+        this.ps.update();
+    }
+
    update()
    {
        if ( !this.isInitialized )
@@ -0,0 +1,47 @@
+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
+                }
+            ]
+        };
+    }
+}
@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { FuseUtils } from '../fuseUtils';
+import { FuseUtils } from '@fuse/utils';

@Pipe({name: 'filter'})
 export class FilterPipe implements PipeTransform
@@ -13,7 +13,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
        HtmlToPlaintextPipe,
        FilterPipe,
        CamelCaseToDashPipe
-
    ],
    imports     : [],
    exports     : [
@@ -24,8 +23,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
        CamelCaseToDashPipe
    ]
 })
-
 export class FusePipesModule
 {
-
 }
@@ -1,16 +1,22 @@
+// This file meant to be imported only once! Use fuse.scss to access
+// to the core Fuse and Angular Material mixins
+
 // ngx-datatable
-@import '~@swimlane/ngx-datatable/release/index.css';
-@import '~@swimlane/ngx-datatable/release/themes/material.css';
-@import '~@swimlane/ngx-datatable/release/assets/icons.css';
+@import '~@swimlane/ngx-datatable/release/themes/material';
+
 // Perfect scrollbar
-@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar';
+
 // Fuse
@import "fuse";

-// Theming
+// Include core Angular Material styles
@include mat-core();

-// Include theme styles for core and each component used in your app.
+// Setup the typography
+@include angular-material-typography($typography);
+
+// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);

 // Partials
@@ -0,0 +1,5 @@
+// Material theming
+@import "theming";
+
+// Breakpoint mixins
+@import "mixins/breakpoints";
@@ -7,7 +7,7 @@
 }

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

@@ -20,8 +20,8 @@
 }

 .mat-pseudo-checkbox-checked:after {
-    width: 14px;
-    height: 7px;
+    width: 14px !important;
+    height: 7px !important;
 }

 // Fix: "Input underlines has wrong color opacity value"
@@ -34,7 +34,7 @@

    &.mat-form-field-type-mat-select {

-        .mat-input-infix {
+        .mat-form-field-infix {
            display: inline-flex;
            width: auto;

@@ -57,7 +57,7 @@
    }
 }

-// Fix: "Stepper icons are broken due to Fuse's icon helpers"
+// Fix: Stepper icons are broken due to Fuse's icon helpers
 mat-horizontal-stepper,
 mat-vertical-stepper {

@@ -68,11 +68,20 @@ mat-vertical-stepper {
            width: 16px !important;
            min-width: 0 !important;
            min-height: 0 !important;
-            color: rgba(255, 255, 255, 0.87) !important;
+            color: inherit !important;
        }
    }
 }

 mat-vertical-stepper {
    padding: 16px 0;
+}
+
+// Fix: Chip remove icon is broken due to Fuse's icon helpers
+mat-chip {
+
+    mat-icon {
+        min-width: 0 !important;
+        min-height: 0 !important;
+    }
 }
@@ -0,0 +1,61 @@
+.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;
+        }
+    }
+}
@@ -1,6 +1,6 @@
 .secondary-text,
-.mat-icon,
-.icon {
+.icon,
+i {
    color: rgba(0, 0, 0, 0.54);
 }

@@ -51,7 +51,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
    // If the base text color is black...
    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {

-        .mat-icon,
+        i,
        .icon {
            color: rgba(0, 0, 0, 0.54);
        }
@@ -81,7 +81,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        // If the base text color is white...
    @else {

-        .mat-icon,
+        i,
        .icon {
            color: rgba(255, 255, 255, 1);
        }
@@ -135,11 +135,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
    }

    // Input
-    .mat-input-placeholder {
+    .mat-form-field-label {
        color: map_get($fuseForeground, hint-text);
    }

-    .mat-input-underline {
+    .mat-form-field-underline {
        background-color: map_get($fuseForeground, divider);
    }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	eb231c5ca8	angular.json for skeleton	2018-05-06 14:47:26 +03:00
Sercan Yemen	954d61b73a	Merge branch 'master' into skeleton	2018-05-06 14:47:07 +03:00
Sercan Yemen	a2187e0134	Set the output path	2018-05-06 14:33:17 +03:00
Sercan Yemen	a1cf7dba91	Angular version name	2018-05-06 14:32:10 +03:00
Sercan Yemen	b8039899db	Fixed various dialog issues + (Shortcuts) Icon colors in shortcuts menu	2018-05-06 14:19:28 +03:00
Sercan Yemen	26e55d7f3d	(Navigation) Fixed: Horizontal navigation items don't have 'hidden' and 'custom function' features	2018-05-06 13:44:34 +03:00
Sercan Yemen	1a9229a3ae	(Contacts) Fixed: List item cell forces the list item width	2018-05-06 13:38:15 +03:00
Sercan Yemen	ebf865e2c7	Angular and Angular Material 6 compatibility + Small adjustments and polishing up in various apps and pages	2018-05-06 13:29:08 +03:00
Sercan Yemen	5fd146b8da	Angular and Angular Material 6 compatibility (wip)	2018-05-05 19:54:52 +03:00
Sercan Yemen	3401a67959	intl polyfill is no longer required	2018-05-05 15:31:29 +03:00
Sercan Yemen	10dad46d7c	Updated the position attribute of the sidenav Did some changes on the core styles + forced input font sizes to 16px	2018-05-05 15:28:05 +03:00
Sercan Yemen	1c4983c756	rxjs upgrade	2018-05-05 14:42:18 +03:00
Sercan Yemen	f4636d9a37	Update Angular, Angular Material and Flex Layout to 6 Updated additional project files Updated Angular Material examples	2018-05-04 19:28:20 +03:00
Sercan Yemen	46c37042a2	Merge branch 'master' into skeleton	2018-04-04 14:42:49 +03:00
Sercan Yemen	02df48ab4e	Remove the {navigation} import from the ThemeOptions and inject it where we actually use the fuseThemeOptions	2018-04-04 14:41:43 +03:00
Sercan Yemen	831d48f5a3	Remove the {navigation} import from the Shortcuts and inject it from the toolbar where we actually use the fuseShortcuts	2018-04-04 14:36:33 +03:00
Sercan Yemen	ca42f71b0e	Added lodash for convenience + Removed the default settings from the settings service - this means the user must provide the default settings at all time	2018-04-04 14:30:52 +03:00
Sercan Yemen	ed4a3cb8d7	Move the layout settings reset to the 'NavigationEnd' to make things smoother on lazily loaded components	2018-04-04 14:20:45 +03:00
Sercan Yemen	5c66d95951	Warn the user about the missing sidebars in registry + Check if the sidebar exists before trying to close it	2018-04-04 13:37:59 +03:00
Sercan Yemen	44663342f4	Set the correct return type for the 'getSidebar' method + Close the navbar on NavigationEnd on mobile devices	2018-04-04 11:36:00 +03:00
Sercan Yemen	47ee65a980	Merge branch 'master' into skeleton	2018-03-31 13:22:27 +03:00
Sercan Yemen	4e6207fef5	Fixed: Small issues caused by Flex Layout update Fixed: Profile page header bg image doesn't correctly cover the header on mobile devices Fixed: Contacts app form dialog header irregularities Fixed: Analytics module doesn't import MatButtons Fixed: Scrumboard card dialog toolbar issues	2018-03-31 13:20:22 +03:00
Sercan Yemen	bd67b660c8	Updated Flex Layout package + Fixed: Fuse sidebar doesn't scroll when the custom scrollbars disabled + Fixed: Expanded search bar style	2018-03-31 12:03:21 +03:00
Sercan Yemen	5f974c4ed2	Merge branch 'master' into skeleton	2018-03-11 18:27:10 +03:00
Sercan Yemen	174789930d	Allow url and function on collapsable nav items + Allow url and function to be exist at the same time on collapsable and normal nav items	2018-03-11 18:26:57 +03:00
Sercan Yemen	605f4d9463	Merge branch 'master' into skeleton	2018-03-10 14:35:24 +03:00
Sercan Yemen	7af9c57977	Changed the title	2018-03-10 14:35:09 +03:00
Sercan Yemen	874ef26f0b	Increase the version number	2018-03-10 14:34:17 +03:00
Sercan Yemen	329fbb5a38	Fix issues with folded navigation	2018-03-10 14:32:37 +03:00
Sercan Yemen	4be77a19ed	Removed unnecessary lines from angular-cli.json file	2018-03-09 20:17:38 +03:00
Sercan Yemen	8374c7d059	Merge branch 'master' into skeleton	2018-03-09 20:14:36 +03:00
Sercan Yemen	7db4715eb2	Increased the Fuse version number	2018-03-09 20:14:25 +03:00
Sercan Yemen	e57061b133	Replaced the project name in angular-cli.json	2018-03-09 20:07:42 +03:00
Sercan Yemen	da615585d0	Merge branch 'master' into skeleton	2018-03-09 20:03:43 +03:00
Sercan Yemen	096e1b47d2	Fixed: Sidebar folded doesn't push the content if activated programmatically	2018-03-09 20:03:12 +03:00
Sercan Yemen	7c50487164	Removed unnecessary Angular Material example files, fixes AoT builds	2018-03-09 06:30:59 +03:00
Sercan Yemen	9c0f89953c	Fixed Scrumboard 'Remove Card' and 'Remove Board' actions.	2018-03-09 06:29:20 +03:00
Sercan Yemen	97c7f136bf	Merge branch 'master' into skeleton	2018-03-08 12:44:21 +03:00
Sercan Yemen	20bb52df50	Removed shared.module + tweaked module import order	2018-03-08 12:43:24 +03:00
Sercan Yemen	1cddda02b1	Merge branch 'master' into skeleton	2018-03-08 12:42:14 +03:00
Sercan Yemen	c178eeedaa	Merge branch 'master' into skeleton	2018-03-08 12:38:51 +03:00
Sercan Yemen	ddcd7c6831	Removed a comment	2018-03-08 12:27:12 +03:00
Sercan Yemen	30825e7927	Fixed Calendar day view weird characters issue + Added TranslateModule to the NavigationModule so the translate pipe can work + Small tweaks	2018-03-08 12:25:27 +03:00
Sercan Yemen	535dbdfe57	Updated Angular and Angular Material and various other libs + Added Community page link to the Readme	2018-03-08 11:49:13 +03:00
Sercan Yemen	8c4a714d39	Updated Angular Material element examples	2018-03-08 11:48:38 +03:00
Sercan Yemen	c9168717a4	Added component doc for the FuseSidebar	2018-03-06 11:57:01 +03:00
Sercan Yemen	2e76bf398f	Added missing MatButtonModule import	2018-03-06 11:42:49 +03:00
Sercan Yemen	2803fd6e90	Fixed: fxLayoutAlign must be fxLayout	2018-03-06 11:30:52 +03:00
Sercan Yemen	681a75e683	Fixed couple bugs with FuseMaterialColorPicker	2018-03-06 11:24:20 +03:00
Sercan Yemen	ae6bc37664	Removed "fxLayoutWrap" and added "wrap" into fxLayout attributes where it's necessary	2018-03-06 11:23:59 +03:00
Sercan Yemen	583e74d99f	Updated Angular, Angular Material, Flex Layout and various other packages	2018-03-06 11:23:20 +03:00
Sercan Yemen	82ca0329e9	Material module imports for the pages and rest of the Fuse + Couple tweaks & fixes	2018-03-06 10:38:30 +03:00
Sercan Yemen	7b474e54f0	Added missing 'MatRippleModule' import	2018-03-05 12:43:03 +03:00
Sercan Yemen	ab61faaba5	Material module imports for the apps + Couple fixes	2018-03-05 12:17:32 +03:00
Sercan Yemen	863fa5cc46	Reverted tsconfig.json to its original	2018-03-05 12:16:59 +03:00
Sercan Yemen	2509ad4e71	Merge branch 'master' into v5	2018-03-05 09:06:06 +03:00
Sercan Yemen	6108679f46	Fixed tabbed layouts issue on Firefox	2018-03-05 09:05:05 +03:00
Sercan Yemen	b34f7fca20	Replaced demo text with lorem ipsum	2018-02-23 19:57:31 +03:00
Sercan Yemen	fa53e773ae	Separately importing Angular Material modules (wip)	2018-02-23 19:35:28 +03:00
Sercan Yemen	397c304ab2	Created modules for custom components and the main fuse components + Changed the Shared Module (WIP)	2018-02-21 09:36:41 +03:00
Sercan Yemen	3dfb79423a	Changed how navigation data passed into the fuse-navigation + Added hidden property to the nav items + Updated fuse-navigation component docs + Updated other components that uses fuse-navigation service + Updated various packages including Angular and Angular Material	2018-02-20 11:05:07 +03:00
Sercan Yemen	51bd636ba6	Moved core into @fuse + New fuse sidebar component + Moved the navbar to the sidebar	2018-02-17 17:21:39 +03:00
Sercan Yemen	43b22e609e	Merge branch 'master' into skeleton	2018-02-08 11:06:42 +03:00
Sercan Yemen	e55a385858	Navigation: Hide the children of the expanded items when the navbar collapsed	2018-02-08 11:06:23 +03:00
Sercan Yemen	a914ad6dc1	Merge branch 'master' into skeleton	2018-02-05 17:17:24 +03:00
Sercan Yemen	43b85ca3b6	Reverted the ngx-dnd back to 3.1.0 + Added missing debounceTime imports to prevent errors	2018-02-05 17:04:22 +03:00
Sercan Yemen	99696cabf7	Finished up the Analytics Dashboard + Updated the Angular Material version along with couple other libraries + Increased the version number of the Fuse	2018-02-05 15:08:18 +03:00
Sercan Yemen	f246fab1f4	Make sure the splash screen element exists before adding an event to it	2018-02-05 11:29:30 +03:00
Sercan Yemen	b0101a1f8c	Fix the wrong api url	2018-02-05 11:28:24 +03:00
Sercan Yemen	8f5e947c28	Added a new dashboard (Analytics)	2018-02-01 15:30:44 +03:00
Sercan Yemen	dfd430712d	Fixed some naming inconsistencies in Project dashboard + Added fake db for Analytics Dashboard	2018-02-01 15:30:30 +03:00
Sercan Yemen	8431c19133	Added Chart.js + Some improvements on Helper classes and Fuse Card	2018-02-01 15:28:40 +03:00
Sercan Yemen	6ee6934e0d	Fixed a small typo in multi-language component page	2018-01-30 15:18:50 +03:00
Sercan Yemen	3253fbfaf4	Updated readme with slack workspace invitation	2018-01-29 11:24:47 +03:00
Sercan Yemen	b2e840cb60	Merge branch 'master' into skeleton	2018-01-23 17:03:44 +03:00
mustafahlvc	985a8dd3a9	ngrx updated to v5.0.0	2018-01-23 13:37:58 +03:00
Sercan Yemen	0c99c075f3	Updated Angular CLI and couple other packages to fix the devkit issue + Increase the Fuse version number	2018-01-23 12:47:31 +03:00
Sercan Yemen	c79db27092	Updated package-lock.json file	2018-01-18 13:37:57 +03:00
Sercan Yemen	d7c67ca5a8	Updated package-lock.json file	2018-01-18 13:34:27 +03:00
Sercan Yemen	cf7ab3861d	Merge branch 'master' into skeleton	2018-01-18 13:21:58 +03:00
Sercan Yemen	ab4ed81cfc	Merge branch 'master' into skeleton	2018-01-18 13:19:38 +03:00
Sercan Yemen	a92cb8b7b6	Quick panel width is too wide for smaller screens + (Academy app) Course page doesn't scroll on mobile	2018-01-18 13:18:09 +03:00
Sercan Yemen	bb3d6d4839	Updated Angular, Angular Material and various other packages + Increased the Fuse version + Replaced datatable icons + Removed broken css imports	2018-01-18 13:13:40 +03:00
Sercan Yemen	9c06622efb	Small fixes	2018-01-12 10:19:10 +03:00
Sercan Yemen	2022b7307e	Merge branch 'master' into skeleton	2018-01-11 13:37:32 +03:00
Sercan Yemen	46de82a7fa	Merge branch 'master' into skeleton	2018-01-11 13:37:03 +03:00
Sercan Yemen	8b590408b0	Updated Angular & Angular Material + Increased the Fuse version	2018-01-11 12:57:38 +03:00
Sercan Yemen	18b2bdf5ab	Mail-Ngrx app throws errors for certain rxjs operators + Various other small code fixes	2018-01-11 12:31:06 +03:00
Sercan Yemen	ba49621e79	Update perfect scrollbar on document click... This isn't the most elegant solution but there is no other way of knowing when the contents of the scrollable container changes. Therefore, we update scrollbars on every document click.	2018-01-09 11:30:11 +03:00
Sercan Yemen	bc2b2c75fa	Merge branch 'master' into skeleton	2018-01-08 16:41:04 +03:00
Sercan Yemen	02653cd0f4	Merge branch 'master' into skeleton	2018-01-08 16:40:33 +03:00
Sercan Yemen	416f1997a9	Updated Angular Material, Angular and various other modules to latest versions	2018-01-08 16:39:44 +03:00
Sercan Yemen	ff14879a94	Merge branch 'master' into skeleton	2018-01-08 16:11:29 +03:00
Sercan Yemen	49c49c46d1	Merge branch 'master' into skeleton	2018-01-08 16:09:12 +03:00
Sercan Yemen	915e9203ef	Merge branch 'master' into skeleton	2018-01-08 16:08:56 +03:00
Sercan Yemen	fcfbedfd74	Increase the version number to 1.3.2	2018-01-08 16:02:45 +03:00
Sercan Yemen	35f3512e89	Added the [path] input to the fuse-highlight for loading source code externally + Removed highlight.js and angular2-markdown + Updated the Angular Material example viewer	2018-01-08 16:02:00 +03:00
Sercan Yemen	2288905cbd	Merge branch 'master' of https://github.com/withinpixels/fuse2 + fuse-hljs replaced with fuse-highlight	2018-01-08 15:29:04 +03:00
Sercan Yemen	5a40116c7b	Merge branch 'master' of https://github.com/withinpixels/fuse2 + fuse-hljs replaced with fuse-highlight	2018-01-08 15:28:50 +03:00
Sercan Yemen	b7c10a515c	Added new cards	2018-01-08 12:40:39 +03:00
Sercan Yemen	65e637eeb9	Use [overlapTrigger] in toolbar menus	2018-01-08 12:40:25 +03:00
Sercan Yemen	b56088948c	added --open to the "npm start"	2018-01-08 12:39:55 +03:00
mustafahlvc	0c5066e7d0	Lazy loading applied to group of demo modules.	2018-01-08 12:37:52 +03:00
Sercan Yemen	751497556a	(Contacts App) Fixed: Selected filter is not preserved on route changes	2018-01-03 10:32:15 +03:00
Sercan Yemen	33d295f42c	Merge branch 'master' into skeleton	2018-01-02 12:37:12 +03:00
Sercan Yemen	91e277ce3f	Merge branch 'master' into skeleton	2018-01-02 12:32:01 +03:00
Sercan Yemen	b7a3d35eb8	Updated package-lock.json	2017-12-28 10:52:40 +03:00
Sercan Yemen	f29f11232f	Merge branch 'master' into skeleton	2017-12-28 10:51:09 +03:00
Sercan Yemen	16ffb09350	Merge branch 'master' into skeleton	2017-12-26 10:49:15 +03:00
Sercan Yemen	643a129a46	Merge branch 'master' into skeleton	2017-12-21 10:06:16 +03:00
Sercan Yemen	de16f4f866	Merge branch 'master' into skeleton	2017-12-18 12:25:56 +03:00
Sercan Yemen	415d7cebfa	Skeleton updates	2017-12-14 16:20:52 +03:00
Sercan Yemen	f7d1995f63	Merge branch 'master' into skeleton	2017-12-14 16:06:32 +03:00
Sercan Yemen	3741abc063	Skeleton package updates	2017-12-14 16:03:34 +03:00
Sercan Yemen	54ccdd7de2	Merge branch 'master' into skeleton	2017-12-14 16:01:09 +03:00
Sercan Yemen	8b2e6b95b1	Merge branch 'master' into skeleton	2017-11-30 15:56:00 +03:00
Sercan Yemen	e86cea1e73	Merge branch 'master' into skeleton	2017-11-30 10:38:03 +03:00
Sercan Yemen	b81638690e	Merge branch 'master' into skeleton	2017-11-30 10:23:19 +03:00
Sercan Yemen	20ac3abb25	Merge branch 'master' into skeleton	2017-11-27 17:21:38 +03:00
Sercan Yemen	f634cb06a7	Merge branch 'master' into skeleton	2017-11-27 14:42:23 +03:00
Sercan Yemen	7d67a481ff	Merge branch 'master' into skeleton	2017-11-27 14:35:37 +03:00
Sercan Yemen	4659da7390	Added missing variables that prevents skeleton from building as it is	2017-11-13 12:30:11 +03:00
Sercan Yemen	2a5d15694c	Merge branch 'master' into skeleton	2017-11-13 11:09:27 +03:00
Sercan Yemen	8e6024c3ee	Fixes #44 : Removed angular material elements assets	2017-11-08 15:11:20 +03:00
Sercan Yemen	f4c47daadc	Merge branch 'master' into skeleton	2017-11-08 15:10:51 +03:00
Sercan Yemen	381bc6c0fe	Merge branch 'master' into skeleton	2017-11-04 16:50:03 +03:00
Sercan Yemen	b5a139f81d	Merge branch 'master' into skeleton	2017-11-04 16:32:29 +03:00
Sercan Yemen	914477da41	Merge branch 'master' into skeleton	2017-11-04 16:25:09 +03:00
Sercan Yemen	410802808e	Merge branch 'master' into skeleton	2017-11-04 16:20:46 +03:00
Sercan Yemen	56dbc58d5e	Merge branch 'master' into skeleton + Added translation example to the sample page	2017-10-27 12:01:09 +03:00
Sercan Yemen	d7c6b2d617	Merge branch 'master' into skeleton	2017-10-27 11:49:31 +03:00
Sercan Yemen	80627bdde9	removed fake-db thingy	2017-10-16 10:50:57 +03:00
Sercan Yemen	6595975f2b	Merge branch 'master' into skeleton	2017-10-16 10:45:27 +03:00
Sercan Yemen	dcb8032758	Merge branch 'master' into skeleton	2017-10-16 10:10:06 +03:00
Sercan Yemen	fb214da5fe	Merge branch 'master' into skeleton	2017-10-14 18:53:08 +03:00
Sercan Yemen	e20687034f	Merge branch 'master' into skeleton	2017-10-14 18:53:00 +03:00
Sercan Yemen	f9bda99deb	Merge branch 'master' into skeleton	2017-10-02 10:15:00 +03:00
Sercan Yemen	1d81e37a0f	removed markdown module imports	2017-09-28 13:00:44 +03:00
Sercan Yemen	83f0ed5ec1	Merge branch 'master' into skeleton	2017-09-28 12:52:59 +03:00
Sercan Yemen	e486413872	remove unnecessary stuff from skeleton	2017-09-28 12:51:15 +03:00
Sercan Yemen	576e167ef1	Merge branch 'master' into skeleton	2017-09-28 12:49:18 +03:00
Sercan Yemen	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