Merge branch 'master' into skeleton

+ Removed highlight.js and angular2-markdown
+ Updated the Angular Material example viewer

.angular-cli.json

@@ -37,13 +37,28 @@
     },
     "lint": [
         {
-            "project": "src/tsconfig.app.json"
+            "project": "src/tsconfig.app.json",
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
         },
         {
-            "project": "src/tsconfig.spec.json"
+            "project": "src/tsconfig.spec.json",
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
         },
         {
-            "project": "e2e/tsconfig.e2e.json"
+            "project": "e2e/tsconfig.e2e.json",
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
         }
     ],
     "test": {

LICENSE

@@ -0,0 +1 @@
+https://themeforest.net/licenses/terms/regular

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-Material Design Admin Template with Angular 4+ and Angular Material 2
+Material Design Admin Template with Angular 5+ and Angular Material 2
 
 ## Development server
 

e2e/app.e2e-spec.ts

@@ -1,14 +1,14 @@
 import { Fuse2Page } from './app.po';
 
-describe('fuse2 App', () => {
-  let page: Fuse2Page;
+describe('Fuse2 App', () => {
+    let page: Fuse2Page;
 
-  beforeEach(() => {
-    page = new Fuse2Page();
-  });
+    beforeEach(() => {
+        page = new Fuse2Page();
+    });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
-  });
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
+    });
 });

e2e/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class Fuse2Page {
-  navigateTo() {
-    return browser.get('/');
-  }
+    navigateTo() {
+        return browser.get('/');
+    }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+    getParagraphText() {
+        return element(by.css('app-root h1')).getText();
+    }
 }

e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

karma.conf.js

@@ -1,33 +1,33 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular/cli'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular/cli/plugins/karma')
+        ],
+        client:{
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+            reports: [ 'html', 'lcovonly' ],
+            fixWebpackSourcePaths: true
+        },
+        angularCli: {
+            environment: 'dev'
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false
+    });
 };

package.json

@@ -1,72 +1,84 @@
 {
   "name": "fuse2",
-  "version": "1.1.2",
-  "license": "",
+  "version": "1.3.2",
+  "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --open",
     "start-hmr": "ng serve --hmr -e=hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
-    "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build",
-    "build-prod": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "build-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.1",
-    "@angular/animations": "4.4.5",
-    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.4.5",
-    "@angular/compiler": "4.4.5",
-    "@angular/core": "4.4.5",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.4.5",
-    "@angular/http": "4.4.5",
-    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.4.5",
-    "@angular/platform-browser-dynamic": "4.4.5",
-    "@angular/router": "4.4.5",
-    "@swimlane/ngx-charts": "6.0.2",
-    "@swimlane/ngx-datatable": "9.3.1",
-    "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.21.2",
-    "angular-in-memory-web-api": "0.5.0",
+    "@agm/core": "1.0.0-beta.2",
+    "@angular/animations": "5.1.3",
+    "@angular/cdk": "5.0.3",
+    "@angular/common": "5.1.3",
+    "@angular/compiler": "5.1.3",
+    "@angular/core": "5.1.3",
+    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/forms": "5.1.3",
+    "@angular/http": "5.1.3",
+    "@angular/material": "5.0.3",
+    "@angular/material-moment-adapter": "5.0.3",
+    "@angular/platform-browser": "5.1.3",
+    "@angular/platform-browser-dynamic": "5.1.3",
+    "@angular/router": "5.1.3",
+    "@ngrx/effects": "4.1.1",
+    "@ngrx/router-store": "4.1.1",
+    "@ngrx/store": "4.1.1",
+    "@ngrx/store-devtools": "4.1.1",
+    "@ngx-translate/core": "9.0.2",
+    "@swimlane/ngx-charts": "7.0.1",
+    "@swimlane/ngx-datatable": "11.1.7",
+    "@swimlane/ngx-dnd": "3.1.0",
+    "@types/prismjs": "1.9.0",
+    "angular-calendar": "0.23.1",
+    "angular-in-memory-web-api": "0.5.2",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.1",
-    "d3": "4.10.0",
+    "core-js": "2.5.3",
+    "d3": "4.12.2",
     "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
     "intl": "1.2.5",
-    "moment": "2.19.1",
-    "ngx-color-picker": "4.4.0",
+    "moment": "2.20.1",
+    "ngrx-store-freeze": "0.2.0",
+    "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.9",
-    "perfect-scrollbar": "1.0.3",
-    "rxjs": "5.4.3",
+    "perfect-scrollbar": "1.3.0",
+    "prismjs": "1.9.0",
+    "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.19"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.7",
-    "@angular/compiler-cli": "4.4.5",
-    "@angular/language-service": "4.4.5",
+    "@angular/cli": "1.6.3",
+    "@angular/compiler-cli": "5.1.3",
+    "@angular/language-service": "5.1.3",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.6.0",
-    "@types/jasminewd2": "2.0.2",
-    "@types/node": "6.0.88",
-    "codelyzer": "3.2.0",
-    "jasmine-core": "2.6.2",
-    "jasmine-spec-reporter": "4.1.0",
+    "@types/jasmine": "2.5.54",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "6.0.96",
+    "codelyzer": "4.0.2",
+    "jasmine-core": "2.6.4",
+    "jasmine-spec-reporter": "4.1.1",
     "karma": "1.7.1",
     "karma-chrome-launcher": "2.1.1",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.2.1",
-    "karma-jasmine": "1.1.0",
+    "karma-coverage-istanbul-reporter": "1.3.3",
+    "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.1.2",
-    "ts-node": "3.2.0",
+    "ts-node": "3.2.2",
     "tslint": "5.7.0",
-    "typescript": "2.3.3"
+    "typescript": "2.4.2",
+    "webpack-bundle-analyzer": "2.9.2"
   }
 }

protractor.conf.js

@@ -4,25 +4,25 @@
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
+    allScriptsTimeout: 11000,
+    specs: [
+        './e2e/**/*.e2e-spec.ts'
+    ],
+    capabilities: {
+        'browserName': 'chrome'
+    },
+    directConnect: true,
+    baseUrl: 'http://localhost:4200/',
+    framework: 'jasmine',
+    jasmineNodeOpts: {
+        showColors: true,
+        defaultTimeoutInterval: 30000,
+        print: function() {}
+    },
+    onPrepare() {
+        require('ts-node').register({
+            project: 'e2e/tsconfig.e2e.json'
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    }
 };

src/app/app.component.ts

@@ -1,5 +1,12 @@
 import { Component } from '@angular/core';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
+import { TranslateService } from '@ngx-translate/core';
+import { FuseTranslationLoaderService } from './core/services/translation-loader.service';
+
+import { FuseNavigationService } from './core/components/navigation/navigation.service';
+import { FuseNavigationModel } from './navigation/navigation.model';
+import { locale as navigationEnglish } from './navigation/i18n/en';
+import { locale as navigationTurkish } from './navigation/i18n/tr';
 
 @Component({
     selector   : 'fuse-root',
@@ -8,7 +15,26 @@ import { FuseSplashScreenService } from './core/services/splash-screen.service';
 })
 export class AppComponent
 {
-    constructor(private fuseSplashScreen: FuseSplashScreenService)
+    constructor(
+        private fuseNavigationService: FuseNavigationService,
+        private fuseSplashScreen: FuseSplashScreenService,
+        private translate: TranslateService,
+        private translationLoader: FuseTranslationLoaderService
+    )
     {
+        // Add languages
+        this.translate.addLangs(['en', 'tr']);
+
+        // Set the default language
+        this.translate.setDefaultLang('en');
+
+        // Use a language
+        this.translate.use('en');
+
+        // Set the navigation model
+        this.fuseNavigationService.setNavigationModel(new FuseNavigationModel());
+
+        // Set the navigation translations
+        this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish);
     }
 }

src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
@@ -12,6 +11,7 @@ import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
 import { FuseSampleModule } from './main/content/sample/sample.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 const appRoutes: Routes = [
     {
@@ -26,11 +26,11 @@ const appRoutes: Routes = [
     ],
     imports     : [
         BrowserModule,
-        HttpModule,
         HttpClientModule,
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
+        TranslateModule.forRoot(),
         FuseMainModule,
         FuseSampleModule
     ],

src/app/core/animations.ts

@@ -33,21 +33,21 @@ export const fuseAnimations = [
                     stagger('50ms', [
                         animateChild()
                     ])
-                ])),
+                ], {optional: true})),
         transition('void => 100',
             query('@*',
                 [
                     stagger('100ms', [
                         animateChild()
                     ])
-                ])),
+                ], {optional: true})),
         transition('void => 200',
             query('@*',
                 [
                     stagger('200ms', [
                         animateChild()
                     ])
-                ]))
+                ], {optional: true}))
     ]),
 
     trigger('fadeInOut', [
@@ -76,6 +76,53 @@ export const fuseAnimations = [
         transition('0 => 1', animate('300ms ease-in'))
     ]),
 
+    trigger('slideIn', [
+        transition('void => left', [
+                style({
+                    transform: 'translateX(100%)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(0)'
+                    })
+                )
+            ]
+        ),
+        transition('left => void', [
+                style({
+                    transform: 'translateX(0)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(-100%)'
+                    })
+                )
+            ]
+        ),
+        transition('void => right', [
+                style({
+                    transform: 'translateX(-100%)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(0)'
+                    })
+                )
+            ]
+        ),
+        transition('right => void', [
+                style({
+                    transform: 'translateX(0)'
+                }),
+                animate('300ms ease-in',
+                    style({
+                        transform: 'translateX(100%)'
+                    })
+                )
+            ]
+        ),
+    ]),
+
     trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
@@ -129,6 +176,17 @@ export const fuseAnimations = [
         transition('* => void', animate('300ms'))
     ]),
 
+    trigger('expandCollapse', [
+        state('void', style({
+            height: '0px'
+        })),
+        state('*', style({
+            height: '*'
+        })),
+        transition('void => *', animate('300ms ease-out')),
+        transition('* => void', animate('300ms ease-in'))
+    ]),
+
     trigger('routerTransitionLeft', [
 
         transition('* => *', [

src/app/core/components/countdown/countdown.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import * as moment from 'moment';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/interval';
 
 @Component({
     selector   : 'fuse-countdown',

src/app/core/components/highlight/highlight.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: block;
+    padding: 8px;
+    background: #263238;
+    cursor: text;
+}

src/app/core/components/highlight/highlight.component.ts

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

src/app/core/components/highlight/prism-languages.ts

@@ -0,0 +1,16 @@
+import 'prismjs/prism';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-perl';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-typescript';

src/app/core/components/hljs/hljs.component.scss

@@ -1,3 +0,0 @@
-:host {
-
-}

src/app/core/components/hljs/hljs.component.ts

@@ -1,58 +0,0 @@
-import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
-import * as hljs from 'highlight.js';
-
-@Component({
-    selector : 'fuse-hljs',
-    template : ' ',
-    styleUrls: ['./hljs.component.scss']
-})
-export class FuseHljsComponent implements OnInit
-{
-    hljs: any;
-
-    @ContentChild('source') source: ElementRef;
-    @Input('lang') lang: string;
-
-    constructor(
-        private elementRef: ElementRef
-    )
-    {
-        this.hljs = hljs;
-    }
-
-    ngOnInit()
-    {
-        const originalSource = this.source.nativeElement.value;
-
-        if ( !originalSource || !this.lang )
-        {
-            return;
-        }
-
-        // Split the source into lines
-        const sourceLines = originalSource.split('\n');
-
-        // Find the first non-whitespace char index in
-        // the first line of the source code
-        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
-
-        // Generate the trimmed source
-        let source = '';
-
-        // Iterate through all the lines and trim the
-        // beginning white space depending on the index
-        sourceLines.forEach((line, index) => {
-
-            source = source + line.substr(indexOfFirstChar, line.length);
-
-            if ( index !== sourceLines.length - 1 )
-            {
-                source = source + '\n';
-            }
-        });
-
-        this.elementRef.nativeElement.innerHTML =
-            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
-    }
-}
-

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

@@ -2,7 +2,7 @@
         type="button"
         class="mat-elevation-z1"
         [matMenuTriggerFor]="colorMenu"
-        (onMenuOpen)="onMenuOpen()"
+        (menuOpened)="onMenuOpen()"
         [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
     <mat-icon>palette</mat-icon>
 </button>

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

@@ -1,6 +1,10 @@
 <a class="nav-link" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
     <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
 

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

@@ -1,7 +1,8 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge"
+    <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>
@@ -9,8 +10,8 @@
 
 <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge"
+    <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>

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

@@ -22,7 +22,7 @@
 
             <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
             <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
-            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
 
         </ng-container>
 

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

@@ -0,0 +1,5 @@
+export interface FuseNavigationModelInterface
+{
+    model: any[];
+}
+

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

@@ -1,6 +1,6 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { NavigationModel } from '../../../navigation.model';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { FuseNavigationModelInterface } from './navigation.model';
 
 @Injectable()
 export class FuseNavigationService
@@ -8,13 +8,11 @@ export class FuseNavigationService
     onNavCollapseToggle = new EventEmitter<any>();
     onNavCollapseToggled = new EventEmitter<any>();
     onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
-    navigationModel: NavigationModel;
+    navigationModel: FuseNavigationModelInterface;
     flatNavigation: any[] = [];
 
     constructor()
     {
-        this.navigationModel = new NavigationModel();
-        this.onNavigationModelChange.next(this.navigationModel.model);
     }
 
     /**
@@ -155,8 +153,15 @@ export class FuseNavigationService
      */
     getFlatNavigation(navigationItems?)
     {
+        // If navigation items not provided,
+        // that means we are running the function
+        // for the first time...
         if ( !navigationItems )
         {
+            // Reset the flat navigation
+            this.flatNavigation = [];
+
+            // Get the entire navigation model
             navigationItems = this.navigationModel.model;
         }
 
@@ -181,7 +186,10 @@ export class FuseNavigationService
 
             if ( navItem.type === 'collapse' || navItem.type === 'group' )
             {
-                this.getFlatNavigation(navItem.children);
+                if ( navItem.children )
+                {
+                    this.getFlatNavigation(navItem.children);
+                }
             }
         }
 

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

@@ -1,8 +1,13 @@
 <a class="nav-link" matRipple (click)="toggleOpen($event)">
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
     <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
 </a>
+
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">
         <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>

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

@@ -69,6 +69,20 @@ export class FuseNavVerticalCollapseComponent implements OnInit
             );
     }
 
+    ngOnInit()
+    {
+        // Check if the url can be found in
+        // one of the children of this item
+        if ( this.isUrlInChildren(this.item, this.router.url) )
+        {
+            this.expand();
+        }
+        else
+        {
+            this.collapse();
+        }
+    }
+
     /**
      * Toggle collapse
      *
@@ -108,6 +122,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         {
             return;
         }
+
         this.isOpen = false;
         this.navigationService.onNavCollapseToggle.emit();
     }
@@ -166,7 +181,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
                 }
             }
 
-            if ( parent.children[i].url === url )
+            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
             {
                 return true;
             }
@@ -175,8 +190,4 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         return false;
     }
 
-    ngOnInit()
-    {
-    }
-
 }

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

@@ -1,6 +1,7 @@
 <div class="group-title">
-    <span class="hint-text">{{ item.title }}</span>
+    <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
 </div>
+
 <div class="group-items">
     <ng-container *ngFor="let item of item.children">
         <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>

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

@@ -1,7 +1,8 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge"
+    <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>
@@ -9,8 +10,8 @@
 
 <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge"
+    <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>

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

@@ -26,7 +26,7 @@
                 </div>
 
                 <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
-                        (onMenuOpen)="onMenuOpen()">
+                        (menuOpened)="onMenuOpen()">
                     <mat-icon class="amber-600-fg">star</mat-icon>
                 </button>
 

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

@@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     onMenuOpen()
     {
-        this.searchInputField.nativeElement.focus();
+        setTimeout(() => {
+            this.searchInputField.nativeElement.focus();
+        });
     }
 
     showMobileShortcutsPanel()

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

@@ -21,6 +21,12 @@
             <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
         </mat-radio-group>
 
+        <h3>Navigation Fold (for vertical navigation):</h3>
+        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+                          (change)="onSettingsChange()">
+            Folded
+        </mat-slide-toggle>
+
         <h3 class="mt-24">Toolbar:</h3>
         <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
                          fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>

src/app/core/components/widget/widget.component.scss

@@ -62,4 +62,23 @@ fuse-widget {
             transform: rotateY(360deg);
         }
     }
+
+    .mat-form-field {
+
+        &.mat-form-field-type-mat-select {
+
+            .mat-input-wrapper {
+                padding: 16px 0;
+
+                .mat-input-infix {
+                    border: none;
+                    padding: 0;
+                }
+            }
+
+            .mat-input-underline {
+                display: none;
+            }
+        }
+    }
 }

src/app/core/components/widget/widget.component.ts

@@ -27,7 +27,9 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
         setTimeout(() => {
 
             this.toggleButtons.forEach(flipButton => {
-                this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
+                this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
                     this.toggle();
                 });
             });

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

@@ -1,9 +1,9 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
-import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
-import { FuseMatchMedia } from '../../services/match-media.service';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
 
 @Directive({
     selector: '[fuseMatSidenavHelper]'
@@ -13,7 +13,6 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
     matchMediaSubscription: Subscription;
 
     @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
-    @HostBinding('class.mat-stop-transition') stopTransition = true;
 
     @Input('fuseMatSidenavHelper') id: string;
     @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
@@ -33,45 +32,31 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 
         if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
         {
-            setTimeout(() => {
-                this.isLockedOpen = true;
-                this.matSidenav.mode = 'side';
-                this.matSidenav.open();
-            });
-            this.stopTransition = false;
+            this.isLockedOpen = true;
+            this.matSidenav.mode = 'side';
+            this.matSidenav.toggle(true);
         }
         else
         {
-            setTimeout(() => {
-                this.isLockedOpen = false;
-                this.matSidenav.mode = 'over';
-                this.matSidenav.close();
-            });
-
-            setTimeout(() => {
-                this.stopTransition = false;
-            }, 3000);
+            this.isLockedOpen = false;
+            this.matSidenav.mode = 'over';
+            this.matSidenav.toggle(false);
         }
 
         this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
             if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
             {
-                setTimeout(() => {
-                    this.isLockedOpen = true;
-                    this.matSidenav.mode = 'side';
-                    this.matSidenav.open();
-                });
+                this.isLockedOpen = true;
+                this.matSidenav.mode = 'side';
+                this.matSidenav.toggle(true);
             }
             else
             {
-                setTimeout(() => {
-                    this.isLockedOpen = false;
-                    this.matSidenav.mode = 'over';
-                    this.matSidenav.close();
-                });
+                this.isLockedOpen = false;
+                this.matSidenav.mode = 'over';
+                this.matSidenav.toggle(false);
             }
         });
-
     }
 
     ngOnDestroy()

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

@@ -7,7 +7,7 @@ import { Platform } from '@angular/cdk/platform';
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
     onSettingsChanged: Subscription;
     isDisableCustomScrollbars = false;
@@ -16,7 +16,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
     ps;
 
     constructor(
-        private element: ElementRef,
+        public element: ElementRef,
         private fuseConfig: FuseConfigService,
         private platform: Platform
     )
@@ -35,11 +35,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         }
     }
 
-    ngOnInit()
-    {
-
-    }
-
     ngAfterViewInit()
     {
         if ( this.isMobile || this.isDisableCustomScrollbars )
@@ -49,12 +44,14 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         }
 
         // Initialize the perfect-scrollbar
-        this.ps = new PerfectScrollbar(this.element.nativeElement);
+        this.ps = new PerfectScrollbar(this.element.nativeElement, {
+            wheelPropagation: true
+        });
     }
 
     ngOnDestroy()
     {
-        if ( !this.isInitialized )
+        if ( !this.isInitialized || !this.ps )
         {
             return;
         }

src/app/core/fuseUtils.ts

@@ -82,10 +82,12 @@ export class FuseUtils
     {
         function S4()
         {
-            return (((1 + Math.random()) * 0x10000) || 0).toString(16).substring(1);
+            return Math.floor((1 + Math.random()) * 0x10000)
+                       .toString(16)
+                       .substring(1);
         }
 
-        return (S4() + S4());
+        return S4() + S4();
     }
 
     public static toggleInArray(item, array)
@@ -99,4 +101,14 @@ export class FuseUtils
             array.splice(array.indexOf(item), 1);
         }
     }
+
+    public static handleize(text)
+    {
+        return text.toString().toLowerCase()
+                   .replace(/\s+/g, '-')           // Replace spaces with -
+                   .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+                   .replace(/\-\-+/g, '-')         // Replace multiple - with single -
+                   .replace(/^-+/, '')             // Trim - from start of text
+                   .replace(/-+$/, '');            // Trim - from end of text
+    }
 }

src/app/core/matColors.ts

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

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

@@ -8,18 +8,20 @@ import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@swimlane/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
-import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive';
+import { FuseMatSidenavHelperService } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
-import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FuseHighlightComponent } from '../components/highlight/highlight.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
+import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
     declarations   : [
@@ -27,7 +29,7 @@ import { CookieService } from 'ngx-cookie-service';
         FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FuseIfOnDomDirective,
         FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
@@ -52,14 +54,15 @@ import { CookieService } from 'ngx-cookie-service';
         FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FusePerfectScrollbarDirective,
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
         NgxDatatableModule,
         FuseIfOnDomDirective,
-        FuseMaterialColorPickerComponent
+        FuseMaterialColorPickerComponent,
+        TranslateModule
     ],
     entryComponents: [
         FuseConfirmDialogComponent
@@ -68,7 +71,8 @@ import { CookieService } from 'ngx-cookie-service';
         CookieService,
         FuseMatchMedia,
         FuseNavbarVerticalService,
-        FuseMatSidenavHelperService
+        FuseMatSidenavHelperService,
+        FuseTranslationLoaderService
     ]
 })
 

src/app/core/scss/core.scss

@@ -25,6 +25,7 @@
 @import "partials/angular-material-fix";
 @import "partials/typography";
 @import "partials/page-layouts";
+@import "partials/cards";
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";

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

@@ -6,42 +6,6 @@
     }
 }
 
-// Fix: "Sidenav opening with animations for the first time"
-mat-sidenav-container {
-
-    mat-sidenav {
-
-        &[mat-is-locked-open].mat-stop-transition {
-            transition: none !important;
-            transform: translate3d(0, 0, 0) !important;
-            opacity: 0;
-
-            ~ .mat-sidenav-content,
-            ~ .mat-drawer-content {
-                transition: none !important;
-            }
-        }
-
-        &.mat-sidenav-opened {
-
-            &.mat-drawer-side {
-
-                ~ .mat-sidenav-content,
-                ~ .mat-drawer-content {
-                    transition: none !important;
-                    transform: translate3d(0, 0, 0) !important;
-                }
-            }
-        }
-
-        &.mat-drawer-end {
-        }
-    }
-
-    .mat-drawer-content {
-    }
-}
-
 // Fix: "Inconsistent font sizes across elements"
 .mat-input-wrapper {
     font-size: 16px;
@@ -56,6 +20,59 @@ mat-sidenav-container {
 }
 
 .mat-pseudo-checkbox-checked:after {
-    width: 14px;
-    height: 7px;
+    width: 14px !important;
+    height: 7px !important;
 }
+
+// Fix: "Input underlines has wrong color opacity value"
+.mat-form-field-underline {
+    background-color: rgba(0, 0, 0, 0.12);
+}
+
+// Fix: "Some idiots using table-cell and inline-table in mat-select"
+.mat-form-field {
+
+    &.mat-form-field-type-mat-select {
+
+        .mat-input-infix {
+            display: inline-flex;
+            width: auto;
+
+            .mat-select-trigger {
+                display: inline-flex;
+                align-items: center;
+                width: 100%;
+
+                .mat-select-value {
+                    display: flex;
+                    max-width: none;
+                    margin-right: 8px;
+                }
+
+                .mat-select-arrow-wrapper {
+                    display: inline-flex;
+                }
+            }
+        }
+    }
+}
+
+// Fix: "Stepper icons are broken due to Fuse's icon helpers"
+mat-horizontal-stepper,
+mat-vertical-stepper {
+
+    mat-step-header {
+
+        mat-icon {
+            height: 16px !important;
+            width: 16px !important;
+            min-width: 0 !important;
+            min-height: 0 !important;
+            color: rgba(255, 255, 255, 0.87) !important;
+        }
+    }
+}
+
+mat-vertical-stepper {
+    padding: 16px 0;
+}

src/app/core/scss/partials/_cards.scss

@@ -0,0 +1,56 @@
+.fuse-card {
+    max-width: 320px;
+    min-width: 320px;
+    background: white;
+    border-radius: 2px;
+    @include mat-elevation(2);
+
+    &.variable-width {
+        min-width: 0;
+    }
+
+    // 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;
+        }
+    }
+}

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

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

src/app/core/scss/partials/_helpers.scss

@@ -1,9 +1,59 @@
+// ######################
+// POSITION HELPERS
+// ######################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .position#{$infix}-relative {
+            position: relative;
+        }
+
+        .position#{$infix}-absolute {
+            position: absolute;
+        }
+
+        .position#{$infix}-static {
+            position: static;
+        }
+    }
+}
+
+// ####################################
+// ABSOLUTE POSITION ALIGNMENT HELPERS
+// ####################################
+@each $breakpoint in map-keys($grid-breakpoints) {
+
+    @include media-breakpoint-up($breakpoint) {
+
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .align#{$infix}-top {
+            top: 0;
+        }
+
+        .align#{$infix}-right {
+            right: 0;
+        }
+
+        .align#{$infix}-bottom {
+            bottom: 0;
+        }
+
+        .align#{$infix}-left {
+            left: 0;
+        }
+    }
+}
+
 // ######################
 // SIZE HELPERS
 // ######################
 @each $prop, $abbrev in (height: h, width: w) {
 
-    @for $index from 0 through 128 {
+    @for $index from 0 through 180 {
         $size: $index * 4;
         $length: #{$size}px;
 
@@ -28,7 +78,6 @@
 // ######################
 // SPACING HELPERS
 // ######################
-
 @each $breakpoint in map-keys($grid-breakpoints) {
 
     @include media-breakpoint-up($breakpoint) {
@@ -83,47 +132,45 @@
             }
 
             @if ($abbrev == m) {
-                @for $index from 0 through 64 {
-                    $size: $index * 4;
-                    $length: #{$size}px;
 
-                    // Some special margin utils for flex alignments
-                    .m#{$infix}-auto {
-                        margin: auto !important;
-                    }
+                // Some special margin utils for flex alignments
+                .m#{$infix}-auto {
+                    margin: auto !important;
+                }
 
-                    .mt#{$infix}-auto {
-                        margin-top: auto !important;
-                    }
+                .mt#{$infix}-auto {
+                    margin-top: auto !important;
+                }
 
-                    .mr#{$infix}-auto {
-                        margin-right: auto !important;
-                    }
+                .mr#{$infix}-auto {
+                    margin-right: auto !important;
+                }
 
-                    .mb#{$infix}-auto {
-                        margin-bottom: auto !important;
-                    }
+                .mb#{$infix}-auto {
+                    margin-bottom: auto !important;
+                }
 
-                    .ml#{$infix}-auto {
-                        margin-left: auto !important;
-                    }
+                .ml#{$infix}-auto {
+                    margin-left: auto !important;
+                }
 
-                    .mx#{$infix}-auto {
-                        margin-right: auto !important;
-                        margin-left: auto !important;
-                    }
+                .mx#{$infix}-auto {
+                    margin-right: auto !important;
+                    margin-left: auto !important;
+                }
 
-                    .my#{$infix}-auto {
-                        margin-top: auto !important;
-                        margin-bottom: auto !important;
-                    }
+                .my#{$infix}-auto {
+                    margin-top: auto !important;
+                    margin-bottom: auto !important;
                 }
             }
         }
     }
 }
 
-// Border helpers
+// ######################
+// BORDER HELPERS
+// ######################
 $border-style: 1px solid rgba(0, 0, 0, 0.12);
 
 .border,
@@ -162,3 +209,10 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
     border-top: $border-style;
     border-bottom: $border-style;
 }
+
+// ######################
+// BORDER RADIUS HELPERS
+// ######################
+.border-radius-100 {
+    border-radius: 100%;
+}

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

@@ -411,7 +411,6 @@ table {
                     color: rgba(0, 0, 0, 0.54);
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                     white-space: nowrap;
-                    min-width: 120px;
 
                     &:first-child {
                         padding-left: 24px;

src/app/core/scss/partials/_navigation.scss

@@ -47,14 +47,20 @@
             }
 
             .nav-link-badge {
+                display: flex;
+                align-items: center;
                 min-width: 20px;
                 height: 20px;
-                line-height: 20px;
                 padding: 0 7px;
                 font-size: 11px;
                 font-weight: 500;
                 border-radius: 20px;
                 transition: opacity 0.2s ease-in-out 0.1s;
+                margin-left: 8px;
+
+                + .collapse-arrow {
+                    margin-left: 8px;
+                }
             }
 
             &:hover {
@@ -195,6 +201,10 @@
 
         > .nav-item {
 
+            > .nav-link {
+                height: 56px;
+            }
+
             &.nav-collapse {
                 position: relative;
 

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

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

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

@@ -42,8 +42,8 @@
         fuse-footer,
         fuse-quick-panel,
         fuse-theme-options,
-        .ps > .ps__scrollbar-x-rail,
-        .ps > .ps__scrollbar-y-rail {
+        .ps > .ps__rail-x,
+        .ps > .ps__rail-y {
             display: none !important;
         }
 

src/app/core/scss/partials/_typography.scss

@@ -229,6 +229,22 @@ strong {
     }
 }
 
+.line-height-1 {
+    line-height: 1;
+}
+
+.line-height-1\.25 {
+    line-height: 1.25;
+}
+
+.line-height-1\.50 {
+    line-height: 1.5;
+}
+
+.line-height-1\.75 {
+    line-height: 1.75;
+}
+
 // Boxed text
 .text-boxed {
     border-radius: 2px;

src/app/core/scss/partials/plugins/_highlight.scss

@@ -1,124 +0,0 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-*/
-
-hljs,
-[hljs] {
-    display: block;
-    overflow-x: auto;
-    //    padding: 0.5em;
-    color: #333;
-    background: #F8F8F8;
-    -webkit-text-size-adjust: none;
-}
-
-.hljs-comment,
-.diff .hljs-header {
-    color: #998;
-    font-style: italic;
-}
-
-.hljs-keyword,
-.css .rule .hljs-keyword,
-.hljs-winutils,
-.nginx .hljs-title,
-.hljs-subst,
-.hljs-request,
-.hljs-status {
-    color: #333;
-    font-weight: bold;
-}
-
-.hljs-number,
-.hljs-hexcolor,
-.ruby .hljs-constant {
-    color: #008080;
-}
-
-.hljs-string,
-.hljs-tag .hljs-value,
-.hljs-doctag,
-.tex .hljs-formula {
-    color: #D14;
-}
-
-.hljs-title,
-.hljs-id,
-.scss .hljs-preprocessor {
-    color: #900;
-    font-weight: bold;
-}
-
-.hljs-list .hljs-keyword,
-.hljs-subst {
-    font-weight: normal;
-}
-
-.hljs-class .hljs-title,
-.hljs-type,
-.vhdl .hljs-literal,
-.tex .hljs-command {
-    color: #458;
-    font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-tag .hljs-title,
-.hljs-rule .hljs-property,
-.django .hljs-tag .hljs-keyword {
-    color: #000080;
-    font-weight: normal;
-}
-
-.hljs-attribute,
-.hljs-variable,
-.lisp .hljs-body,
-.hljs-name {
-    color: #008080;
-}
-
-.hljs-regexp {
-    color: #009926;
-}
-
-.hljs-symbol,
-.ruby .hljs-symbol .hljs-string,
-.lisp .hljs-keyword,
-.clojure .hljs-keyword,
-.scheme .hljs-keyword,
-.tex .hljs-special,
-.hljs-prompt {
-    color: #990073;
-}
-
-.hljs-built_in {
-    color: #0086B3;
-}
-
-.hljs-preprocessor,
-.hljs-pragma,
-.hljs-pi,
-.hljs-doctype,
-.hljs-shebang,
-.hljs-cdata {
-    color: #999;
-    font-weight: bold;
-}
-
-.hljs-deletion {
-    background: #FDD;
-}
-
-.hljs-addition {
-    background: #DFD;
-}
-
-.diff .hljs-change {
-    background: #0086B3;
-}
-
-.hljs-chunk {
-    color: #AAA;
-}

src/app/core/scss/partials/plugins/_ngx-color-picker.scss

@@ -3,20 +3,21 @@
 .color-picker {
     height: auto !important;
     border: none !important;
+
     @include mat-elevation(4);
 
     .preset-area {
-        //padding: 4px 15px;
-        padding: 0 0 12px 12px !important;
+        padding: 0 0 16px 16px !important;
         height: 140px;
         overflow-y: auto;
         overflow-x: hidden;
+
         > hr {
             display: none;
         }
+
         .preset-label {
             display: none;
-
         }
 
         .preset-color {
@@ -25,7 +26,8 @@
             margin: 0 !important;
             border: none !important;
             border-radius: 0 !important;
-            &:nth-child(14n+3) {
+
+            &:nth-child(14n+1) {
                 clear: both;
             }
         }

src/app/core/scss/partials/plugins/_ngx-datatable.scss

@@ -55,6 +55,7 @@
                     min-height: 48px;
                     transition: none;
                     padding: 0 24px;
+                    overflow: hidden;
                 }
             }
         }
@@ -82,6 +83,16 @@
 
                 .datatable-pager {
                     margin: 0 0 0 24px;
+
+                    .pager {
+
+                        li {
+
+                            a {
+                                text-decoration: none !important;
+                            }
+                        }
+                    }
                 }
             }
         }

src/app/core/scss/partials/plugins/_plugins.scss

@@ -1,4 +1,4 @@
-@import "highlight";
+@import "prism";
 @import "perfect-scrollbar";
 @import "ngx-datatable";
 @import "ngx-color-picker";

src/app/core/scss/partials/plugins/_prism.scss

@@ -0,0 +1,269 @@
+// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme
+
+$base00: #263238;
+$base01: #2C393F;
+$base02: #62727A;
+$base03: #707880;
+$base04: #C9CCD3;
+$base05: #CDD3DE;
+$base06: #D5DBE5;
+$base07: #FFFFFF;
+$base08: #EC5F67;
+$base09: #EA9560;
+$base0A: #FFCC00;
+$base0B: #8BD649;
+$base0C: #80CBC4;
+$base0D: #89DDFF;
+$base0E: #82AAFF;
+$base0F: #EC5F67;
+
+$red: $base08;
+$orange: $base09;
+$yellow: $base0A;
+$green: $base0B;
+$cyan: $base0C;
+$blue: $base0D;
+$violet: $base0E;
+$magenta: $base0F;
+
+$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+$code-font-size: 14px;
+$code-line-height: 1.6;
+$code-background: $base00;
+$code-color: $base05;
+$code-color-fade: $base05;
+// $code-text-shadow: none; 
+$code-color-comment: $base02;
+$code-color-keyword: $base0B;
+$code-color-value: $base0C;
+$code-color-attr-name: $base09;
+$code-color-string: $base0C;
+$code-color-name: $base0A;
+$code-color-number: $base09;
+$code-color-variable: $base0D;
+$code-color-selector: $base0E;
+$code-color-property: $base0A;
+$code-color-important: $base08;
+$code-color-tag: $base0D;
+$code-color-atrule: $base0C;
+
+// @import "../partials/prism"; 
+/**
+ * Prism base code highlighter theme using Sass 
+ *
+ * @author @MoOx
+ * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss
+ * slightly adapted by me, Bram de Haan
+ */
+
+// prism selector
+$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]";
+$code-selector-block: "pre[class*=\"language-\"]";
+$code-selector-inline: ":not(pre) > code[class*=\"language-\"]";
+
+// generic stuff
+$code-font-family: Menlo, Monaco, "Courier New", monospace !default;
+$code-font-size: 14px !default;
+$code-line-height: 1.6 !default;
+
+$code-tab-size: 4 !default;
+$code-hyphens: none !default;
+
+$code-block-padding: 12px !default;
+$code-inline-padding: 2px 6px !default;
+$code-border-radius: 0 !default;
+
+$code-border: none !default;
+$code-background: #2A2A2A !default;
+$code-color: #FFF !default;
+$code-color-fade: #BEBEC5 !default;
+// $code-text-shadow: 0 1px 0 #000 !default;
+$code-box-shadow: none !default;
+$code-color-property: #B58900 !default;
+$code-color-important: #CB4B16 !default;
+$code-color-tag: #268BD2 !default;
+$code-color-atrule: #2AA198 !default;
+$code-color-attr-name: #B65611 !default;
+
+// $code-linenums-padding:		7px !default;
+// $code-linenums-width: 			40px !default;
+// $code-linenums-background:		#444 !default;
+// $code-linenums-border-color:	#555 !default;
+// $code-linenums-border-width:	1px !default;
+
+@if $code-selector != null {
+    #{$code-selector} {
+        -moz-tab-size: $code-tab-size;
+        -o-tab-size: $code-tab-size;
+        tab-size: $code-tab-size;
+
+        -webkit-hyphens: $code-hyphens;
+        -moz-hyphens: $code-hyphens;
+        -ms-hyphens: $code-hyphens;
+        hyphens: $code-hyphens;
+
+        // whitespace management
+        white-space: pre; // fallback
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
+
+        font-family: $code-font-family;
+        font-size: $code-font-size;
+        line-height: $code-line-height;
+
+        color: $code-color;
+        // text-shadow: $code-text-shadow;
+        background: $code-background;
+    }
+}
+
+%code-background {
+    border-radius: $code-border-radius;
+    border: $code-border;
+    box-shadow: $code-box-shadow;
+}
+
+@if $code-selector-block != null {
+    #{$code-selector-block} {
+        @extend %code-background;
+        padding: $code-block-padding;
+    }
+}
+
+@if $code-selector-inline != null {
+    #{$code-selector-inline} {
+        @extend %code-background;
+        padding: $code-inline-padding;
+    }
+}
+
+// pre[class*="language-"],
+// :not(pre) > code[class*="language-"] {
+// 	background: $code-background;
+// }
+
+// prism tokens
+// 
+$code-color-comment: null !default;
+$code-color-keyword: null !default;
+$code-color-value: null !default;
+$code-color-string: null !default;
+$code-color-name: null !default;
+$code-color-number: null !default;
+$code-color-variable: null !default;
+$code-color-selector: null !default;
+$code-color-punctuation: $code-color-fade !default;
+
+#{$code-selector} {
+    .namespace {
+        opacity: .7;
+    }
+
+    .token {
+        &.comment,
+        &.prolog,
+        &.doctype,
+        &.cdata {
+            color: $code-color-comment;
+        }
+
+        &.null,
+        &.operator,
+        &.boolean,
+        &.number {
+            color: $code-color-number;
+        }
+
+        &.string {
+            color: $code-color-string;
+        }
+        &.attr-name {
+            color: $code-color-attr-name;
+        }
+
+        &.entity,
+        &.url,
+        .language-css &.string,
+        .style &.string {
+            color: $code-color-string;
+        }
+
+        &.selector {
+            color: $code-color-selector;
+        }
+
+        &.attr-value,
+        &.keyword,
+        &.control,
+        &.directive,
+        &.unit {
+            color: $code-color-keyword;
+        }
+        &.important {
+            color: $code-color-important;
+        }
+        &.atrule {
+            color: $code-color-atrule;
+        }
+
+        &.regex,
+        &.statement {
+            color: $code-color-value;
+        }
+
+        &.placeholder,
+        &.variable {
+            color: $code-color-variable;
+        }
+
+        &.property,
+        &.tag {
+            // font-style: italic;
+        }
+
+        &.property {
+            color: $code-color-property;
+        }
+        &.tag {
+            color: $code-color-tag;
+        }
+
+        &.important,
+        &.statement {
+            font-weight: bold;
+        }
+
+        // todo ?
+        // &.mixin
+        // &.gradient
+        // &.abslength
+        // &.easing
+        // &.time
+        // &.angle
+        // &.fontfamily
+
+        // ruby/vim https://github.com/LeaVerou/prism/pull/18
+        // &.inst-var
+        // &.builtin
+        // &.const
+        // &.symbol
+        //
+        // php https://github.com/LeaVerou/prism/pull/20
+        // &.deliminator
+        // &.function
+
+        &.punctuation {
+            color: $code-color-punctuation;
+        }
+
+        &.entity {
+            cursor: help;
+        }
+
+        // for dev :)
+        &.debug {
+            color: red
+        }
+    }
+}

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

@@ -22,10 +22,11 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation: 'left', // 'right', 'left', 'top', 'none'
-                toolbar   : 'below', // 'above', 'below', 'none'
-                footer    : 'below', // 'above', 'below', 'none'
-                mode      : 'fullwidth' // 'boxed', 'fullwidth'
+                navigation      : 'left', // 'right', 'left', 'top', 'none'
+                navigationFolded: false, // true, false
+                toolbar         : 'below', // 'above', 'below', 'none'
+                footer          : 'below', // 'above', 'below', 'none'
+                mode            : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
                 toolbar: 'mat-white-500-bg',
@@ -33,7 +34,7 @@ export class FuseConfigService
                 footer : 'mat-fuse-dark-900-bg'
             },
             customScrollbars: true,
-            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft
+            routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
         };
 
         /**
@@ -44,6 +45,7 @@ export class FuseConfigService
             this.defaultSettings.customScrollbars = false;
         }
 
+        // Set the settings from the default settings
         this.settings = Object.assign({}, this.defaultSettings);
 
         // Reload the default settings on every navigation start
@@ -58,7 +60,6 @@ export class FuseConfigService
 
         // Create the behavior subject
         this.onSettingsChanged = new BehaviorSubject(this.settings);
-
     }
 
     /**
@@ -67,7 +68,10 @@ export class FuseConfigService
      */
     setSettings(settings)
     {
+        // Set the settings from the given object
         this.settings = Object.assign({}, this.settings, settings);
+
+        // Trigger the event
         this.onSettingsChanged.next(this.settings);
     }
 }

src/app/core/services/translation-loader.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface Locale
+{
+    lang: string;
+    data: Object;
+}
+
+@Injectable()
+export class FuseTranslationLoaderService
+{
+    constructor(private translate: TranslateService)
+    {
+    }
+
+    public loadTranslations(...args: Locale[]): void
+    {
+        const locales = [...args];
+
+        locales.forEach((locale) => {
+            // use setTranslation() with the third argument set to true
+            // to append translations instead of replacing them
+            this.translate.setTranslation(locale.lang, locale.data, true);
+        });
+    }
+}

src/app/main/content/sample/i18n/en.ts

@@ -0,0 +1,8 @@
+export const locale = {
+    lang: 'en',
+    data: {
+        'SAMPLE': {
+            'HELLO': 'Hello, World!'
+        }
+    }
+};

src/app/main/content/sample/i18n/tr.ts

@@ -0,0 +1,8 @@
+export const locale = {
+    lang: 'tr',
+    data: {
+        'SAMPLE': {
+            'HELLO': 'Merhaba Dünya!'
+        }
+    }
+};

src/app/main/content/sample/sample.component.html

@@ -1,5 +1,5 @@
 <div class="page-layout blank p-24" fusePerfectScrollbar>
 
-    <h2>Sample Page</h2>
+    <h2>{{'SAMPLE.HELLO' | translate}}</h2>
 
 </div>

src/app/main/content/sample/sample.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { FuseTranslationLoaderService } from '../../../core/services/translation-loader.service';
+
+import { locale as english } from './i18n/en';
+import { locale as turkish } from './i18n/tr';
 
 @Component({
     selector   : 'fuse-sample',
@@ -7,7 +11,8 @@ import { Component } from '@angular/core';
 })
 export class FuseSampleComponent
 {
-    constructor()
+    constructor(private translationLoader: FuseTranslationLoaderService)
     {
+        this.translationLoader.loadTranslations(english, turkish);
     }
 }

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

@@ -6,7 +6,7 @@
            target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
-            <span>Purchase FUSE (Angular4+)</span>
+            <span>Purchase FUSE (Angular5+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>

src/app/main/main.component.html

@@ -4,13 +4,13 @@
 
         <!-- TOOLBAR: Above -->
         <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
-            <fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+            <fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
         </ng-container>
         <!-- / TOOLBAR: Above -->
 
         <!-- NAVBAR: Top -->
         <fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
-                                [class]="fuseSettings.colorClasses.navbar"
+                                [ngClass]="fuseSettings.colorClasses.navbar"
                                 *ngIf="fuseSettings.layout.navigation === 'top'">
         </fuse-navbar-horizontal>
         <!-- / NAVBAR: Top -->
@@ -18,9 +18,9 @@
         <div id="wrapper">
 
             <!-- NAVBAR: Left -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="left-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Left -->
@@ -29,7 +29,7 @@
 
                 <!-- TOOLBAR: Below -->
                 <ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
-                    <fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+                    <fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
                 </ng-container>
                 <!-- / TOOLBAR: Below -->
 
@@ -37,16 +37,16 @@
 
                 <!-- FOOTER: Below -->
                 <ng-container *ngIf="fuseSettings.layout.footer === 'below'">
-                    <fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+                    <fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
                 </ng-container>
                 <!-- / FOOTER: Below -->
 
             </div>
 
             <!-- NAVBAR: Right -->
-            <fuse-navbar-vertical [folded]="false"
+            <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="right-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'right'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Right -->
@@ -55,7 +55,7 @@
 
         <!-- FOOTER: Above -->
         <ng-container *ngIf="fuseSettings.layout.footer === 'above'">
-            <fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+            <fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
         </ng-container>
         <!-- FOOTER: Above -->
 

src/app/main/main.component.scss

@@ -6,12 +6,6 @@ fuse-main {
     width: 100%;
     height: 100%;
 
-    &.boxed {
-        max-width: 1200px;
-        margin: 0 auto;
-        @include mat-elevation(8);
-    }
-
     > .mat-sidenav-container {
         display: flex;
         flex: 1;
@@ -72,4 +66,10 @@ fuse-main {
             }
         }
     }
+
+    &[fuse-layout-mode="boxed"] {
+        max-width: 1200px;
+        margin: 0 auto;
+        @include mat-elevation(8);
+    }
 }

src/app/main/main.component.ts

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

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

@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FuseMainComponent } from '../../main.component';
 
 @Component({
     selector     : 'fuse-navbar-horizontal',
@@ -6,14 +7,19 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
     styleUrls    : ['./navbar-horizontal.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarHorizontalComponent implements OnInit
+export class FuseNavbarHorizontalComponent implements OnInit, OnDestroy
 {
-    constructor()
+    constructor(private fuseMainComponent: FuseMainComponent)
     {
     }
 
     ngOnInit()
     {
+        this.fuseMainComponent.addClass('fuse-nav-bar-horizontal');
+    }
 
+    ngOnDestroy()
+    {
+        this.fuseMainComponent.removeClass('fuse-nav-bar-horizontal');
     }
 }

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

@@ -2,7 +2,7 @@
 
 fuse-main {
 
-    &.fuse-nav-bar-folded {
+    &.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {
 
         .content-wrapper {
 
@@ -123,6 +123,7 @@ fuse-navbar-vertical {
 
             .logo-icon {
                 width: 38px;
+                height: 38px;
             }
 
             .logo-text {

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

@@ -18,13 +18,34 @@ import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/anim
 export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 {
     private _backdropElement: HTMLElement | null = null;
+    private _folded = false;
+
     @HostBinding('class.close') isClosed: boolean;
     @HostBinding('class.folded') isFoldedActive: boolean;
     @HostBinding('class.folded-open') isFoldedOpen: boolean;
     @HostBinding('class.initialized') initialized: boolean;
-    @Input('folded') foldedByDefault = false;
     @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
 
+    @Input()
+    set folded(value: boolean)
+    {
+        this._folded = value;
+
+        if ( this._folded )
+        {
+            this.activateFolded();
+        }
+        else
+        {
+            this.deActivateFolded();
+        }
+    }
+
+    get folded(): boolean
+    {
+        return this._folded;
+    }
+
     matchMediaWatcher: Subscription;
     navigationServiceWatcher: Subscription;
     fusePerfectScrollbarUpdateTimeout;
@@ -36,11 +57,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         private fuseMatchMedia: FuseMatchMedia,
         private fuseNavigationService: FuseNavigationService,
         private navBarService: FuseNavbarVerticalService,
-        public media: ObservableMedia,
         private router: Router,
         private _renderer: Renderer2,
         private _elementRef: ElementRef,
-        private animationBuilder: AnimationBuilder
+        private animationBuilder: AnimationBuilder,
+        public media: ObservableMedia
     )
     {
         navBarService.setNavBar(this);
@@ -88,7 +109,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
     ngOnInit()
     {
         this.isClosed = false;
-        this.isFoldedActive = this.foldedByDefault;
+        this.isFoldedActive = this._folded;
         this.isFoldedOpen = false;
         this.initialized = false;
         this.updateCssClasses();
@@ -104,7 +125,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
         }
         else
         {
-            if ( !this.foldedByDefault )
+            if ( !this._folded )
             {
                 this.deActivateFolded();
             }
@@ -124,6 +145,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     openBar()
     {
+        if ( !this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = false;
         this.updateCssClasses();
         if ( this.media.isActive('lt-lg') )
@@ -134,6 +160,11 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     closeBar()
     {
+        if ( this.isClosed )
+        {
+            return;
+        }
+
         this.isClosed = true;
         this.updateCssClasses();
         this._detachBackdrop();
@@ -191,15 +222,15 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 
     updateCssClasses()
     {
-        if ( this.isClosed )
+        if ( !this.isClosed )
         {
-            this.fuseMainComponent.addClass('fuse-nav-bar-opened');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-closed');
+            this.fuseMainComponent.addClass('fuse-navbar-opened');
+            this.fuseMainComponent.removeClass('fuse-navbar-closed');
         }
         else
         {
-            this.fuseMainComponent.addClass('fuse-nav-bar-closed');
-            this.fuseMainComponent.removeClass('fuse-nav-bar-opened');
+            this.fuseMainComponent.addClass('fuse-navbar-closed');
+            this.fuseMainComponent.removeClass('fuse-navbar-opened');
         }
     }
 

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

@@ -1,6 +1,6 @@
-<mat-list class="date" cdk-focus-region-start>
+<mat-list class="date" cdkFocusRegionStart>
 
-    <h3 matSubheader cdk-focus-init>
+    <h3 matSubheader cdkFocusInit>
         <span>Today</span>
     </h3>
 
@@ -16,7 +16,7 @@
     </div>
 </mat-list>
 
-<mat-divider cdk-focus-region-end></mat-divider>
+<mat-divider cdkFocusRegionEnd></mat-divider>
 
 <mat-list>
     <h3 matSubheader>

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

@@ -10,6 +10,8 @@ export class FuseQuickPanelComponent implements OnInit
 {
     date: Date;
     settings: any;
+    notes = [];
+    events = [];
 
     constructor()
     {

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

@@ -7,7 +7,7 @@
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
             <button mat-button class="toggle-button-navbar mat-icon-button"
-                    fuseNavbarVertical="openBar" fxHide.gt-md>
+                    fuseNavbarVertical="toggleBar" fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
             </button>
 
@@ -36,7 +36,7 @@
                 </div>
             </button>
 
-            <mat-menu #userMenu="matMenu">
+            <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
 
                 <button mat-menu-item>
                     <mat-icon>account_circle</mat-icon>
@@ -70,13 +70,15 @@
                 </div>
             </button>
 
-            <mat-menu #languageMenu="matMenu">
-                <button mat-menu-item *ngFor="let lang of languages" (click)="selectedLanguage = lang">
+            <mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
+
+                <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">
                         <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
                         <span class="iso">{{lang.title}}</span>
                     </div>
                 </button>
+
             </mat-menu>
 
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { FuseConfigService } from '../../core/services/config.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -18,7 +19,8 @@ export class FuseToolbarComponent
 
     constructor(
         private router: Router,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private translate: TranslateService
     )
     {
         this.userStatusOptions = [
@@ -55,11 +57,6 @@ export class FuseToolbarComponent
                 'title': 'English',
                 'flag' : 'us'
             },
-            {
-                'id'   : 'es',
-                'title': 'Spanish',
-                'flag' : 'es'
-            },
             {
                 'id'   : 'tr',
                 'title': 'Turkish',
@@ -92,4 +89,13 @@ export class FuseToolbarComponent
         // Do your search here...
         console.log(value);
     }
+
+    setLanguage(lang)
+    {
+        // Set the selected language for toolbar
+        this.selectedLanguage = lang;
+
+        // Use the selected language for translations
+        this.translate.use(lang.id);
+    }
 }

src/app/navigation/i18n/en.ts

@@ -0,0 +1,12 @@
+export const locale = {
+    lang: 'en',
+    data: {
+        'NAV': {
+            'APPLICATIONS': 'Applications',
+            'SAMPLE'        : {
+                'TITLE': 'Sample',
+                'BADGE': '25'
+            }
+        }
+    }
+};

src/app/navigation/i18n/tr.ts

@@ -0,0 +1,12 @@
+export const locale = {
+    lang: 'tr',
+    data: {
+        'NAV': {
+            'APPLICATIONS': 'Programlar',
+            'SAMPLE'        : {
+                'TITLE': 'Örnek',
+                'BADGE': '15'
+            }
+        }
+    }
+};

src/app/navigation/navigation.model.ts

@@ -1,4 +1,6 @@
-export class NavigationModel
+import { FuseNavigationModelInterface } from '../core/components/navigation/navigation.model';
+
+export class FuseNavigationModel implements FuseNavigationModelInterface
 {
     public model: any[];
 
@@ -8,16 +10,19 @@ export class NavigationModel
             {
                 'id'      : 'applications',
                 'title'   : 'Applications',
+                'translate': 'NAV.APPLICATIONS',
                 'type'    : 'group',
                 'children': [
                     {
                         'id'   : 'sample',
                         'title': 'Sample',
+                        'translate': 'NAV.SAMPLE.TITLE',
                         'type' : 'item',
                         'icon' : 'email',
                         'url'  : '/sample',
                         'badge': {
                             'title': 25,
+                            'translate': 'NAV.SAMPLE.BADGE',
                             'bg'   : '#F44336',
                             'fg'   : '#FFFFFF'
                         }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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