Updated package-lock.json file

+ (Academy app) Course page doesn't scroll on mobile

package.json

@@ -1,80 +1,84 @@
 {
   "name": "fuse2",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "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=6144 ./node_modules/@angular/cli/bin/ng build --dev",
+    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
     "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
   },
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.1.2",
-    "@angular/cdk": "5.0.2",
-    "@angular/common": "5.1.2",
-    "@angular/compiler": "5.1.2",
-    "@angular/core": "5.1.2",
+    "@angular/animations": "5.2.1",
+    "@angular/cdk": "5.1.0",
+    "@angular/common": "5.2.1",
+    "@angular/compiler": "5.2.1",
+    "@angular/core": "5.2.1",
     "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.1.2",
-    "@angular/http": "5.1.2",
-    "@angular/material": "5.0.2",
-    "@angular/material-moment-adapter": "5.0.2",
-    "@angular/platform-browser": "5.1.2",
-    "@angular/platform-browser-dynamic": "5.1.2",
-    "@angular/router": "5.1.2",
-    "@ngx-translate/core": "9.0.2",
-    "@swimlane/ngx-charts": "7.0.1",
-    "@swimlane/ngx-datatable": "11.1.7",
-    "@swimlane/ngx-dnd": "3.1.0",
-    "angular-calendar": "0.23.0",
-    "angular-in-memory-web-api": "0.5.2",
-    "angular2-markdown": "1.6.0",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.12.0",
-    "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
-    "intl": "1.2.5",
-    "moment": "2.20.1",
+    "@angular/forms": "5.2.1",
+    "@angular/http": "5.2.1",
+    "@angular/material": "5.1.0",
+    "@angular/material-moment-adapter": "5.1.0",
+    "@angular/platform-browser": "5.2.1",
+    "@angular/platform-browser-dynamic": "5.2.1",
+    "@angular/router": "5.2.1",
     "@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.1.1",
+    "@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.2",
+    "angular-in-memory-web-api": "0.5.2",
+    "classlist.js": "1.1.20150312",
+    "core-js": "2.5.3",
+    "d3": "4.12.2",
+    "hammerjs": "2.0.8",
+    "intl": "1.2.5",
+    "moment": "2.20.1",
     "ngrx-store-freeze": "0.2.0",
     "ngx-color-picker": "5.3.0",
-    "ngx-cookie-service": "1.0.9",
+    "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
+    "prismjs": "1.10.0",
     "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.18"
+    "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.2",
-    "@angular/compiler-cli": "5.1.2",
-    "@angular/language-service": "5.1.2",
+    "@angular/cli": "1.6.4",
+    "@angular/compiler-cli": "5.2.1",
+    "@angular/language-service": "5.2.1",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.5.54",
+    "@types/jasmine": "2.8.4",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.95",
+    "@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",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.1",
+    "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.2",
-    "tslint": "5.7.0",
-    "typescript": "2.4.2"
+    "tslint": "5.9.1",
+    "typescript": "2.5.3",
+    "webpack-bundle-analyzer": "2.9.2"
   }
 }

src/app/app.module.ts

@@ -7,62 +7,38 @@ import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import 'hammerjs';
 import { SharedModule } from './core/modules/shared.module';
 import { AppComponent } from './app.component';
-import { ProjectModule } from './main/content/apps/dashboards/project/project.module';
 import { FuseFakeDbService } from './fuse-fake-db/fuse-fake-db.service';
 import { FuseMainModule } from './main/main.module';
-import { PagesModule } from './main/content/pages/pages.module';
-import { UIModule } from './main/content/ui/ui.module';
-import { ComponentsModule } from './main/content/components/components.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
-import { ServicesModule } from './main/content/services/services.module';
-import { FuseAngularMaterialModule } from './main/content/components/angular-material/angular-material.module';
-import { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
 
 const appRoutes: Routes = [
     {
-        path        : 'apps/mail',
-        loadChildren: './main/content/apps/mail/mail.module#FuseMailModule'
+        path        : 'apps',
+        loadChildren: './main/content/apps/apps.module#FuseAppsModule'
     },
     {
-        path        : 'apps/mail-ngrx',
-        loadChildren: './main/content/apps/mail-ngrx/mail.module#FuseMailNgrxModule'
+        path        : 'pages',
+        loadChildren: './main/content/pages/pages.module#FusePagesModule'
     },
     {
-        path        : 'apps/chat',
-        loadChildren: './main/content/apps/chat/chat.module#FuseChatModule'
+        path        : 'ui',
+        loadChildren: './main/content/ui/ui.module#FuseUIModule'
     },
     {
-        path        : 'apps/calendar',
-        loadChildren: './main/content/apps/calendar/calendar.module#FuseCalendarModule'
+        path        : 'services',
+        loadChildren: './main/content/services/services.module#FuseServicesModule'
     },
     {
-        path        : 'apps/e-commerce',
-        loadChildren: './main/content/apps/e-commerce/e-commerce.module#FuseEcommerceModule'
+        path        : 'components',
+        loadChildren: './main/content/components/components.module#FuseComponentsModule'
     },
     {
-        path        : 'apps/academy',
-        loadChildren: './main/content/apps/academy/academy.module#FuseAcademyModule'
-    },
-    {
-        path        : 'apps/todo',
-        loadChildren: './main/content/apps/todo/todo.module#FuseTodoModule'
-    },
-    {
-        path        : 'apps/file-manager',
-        loadChildren: './main/content/apps/file-manager/file-manager.module#FuseFileManagerModule'
-    },
-    {
-        path        : 'apps/contacts',
-        loadChildren: './main/content/apps/contacts/contacts.module#FuseContactsModule'
-    },
-    {
-        path        : 'apps/scrumboard',
-        loadChildren: './main/content/apps/scrumboard/scrumboard.module#FuseScrumboardModule'
+        path        : 'components-third-party',
+        loadChildren: './main/content/components-third-party/components-third-party.module#FuseComponentsThirdPartyModule'
     },
     {
         path      : '**',
@@ -80,21 +56,13 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
-        MarkdownModule.forRoot(),
         TranslateModule.forRoot(),
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {
             delay             : 0,
             passThruUnknownUrl: true
         }),
         AppStoreModule,
-        FuseMainModule,
-        ProjectModule,
-        PagesModule,
-        UIModule,
-        ServicesModule,
-        ComponentsModule,
-        FuseAngularMaterialModule,
-        ComponentsThirdPartyModule
+        FuseMainModule
     ],
     providers   : [
         FuseSplashScreenService,

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/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,8 +1,8 @@
-import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import PerfectScrollbar from 'perfect-scrollbar';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
 import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
+import PerfectScrollbar from 'perfect-scrollbar';
 
 @Directive({
     selector: '[fusePerfectScrollbar]'
@@ -13,7 +13,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
-    ps;
+    ps: PerfectScrollbar;
 
     constructor(
         public element: ElementRef,
@@ -62,6 +62,21 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps.destroy();
     }
 
+    @HostListener('document:click', ['$event'])
+    documentClick(event: Event): void
+    {
+        if ( !this.isInitialized || !this.ps )
+        {
+            return;
+        }
+
+        // Update the scrollbar on document click..
+        // This isn't the most elegant solution but there is no other way
+        // of knowing when the contents of the scrollable container changes.
+        // Therefore, we update scrollbars on every document click.
+        this.ps.update();
+    }
+
     update()
     {
         if ( !this.isInitialized )

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

@@ -15,13 +15,12 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.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 { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
@@ -30,7 +29,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FuseIfOnDomDirective,
         FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
@@ -44,8 +43,7 @@ import { TranslateModule } from '@ngx-translate/core';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule,
-        MarkdownModule
+        NgxDatatableModule
     ],
     exports        : [
         FlexLayoutModule,
@@ -56,7 +54,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FusePerfectScrollbarDirective,
         ReactiveFormsModule,
         ColorPickerModule,
@@ -64,7 +62,6 @@ import { TranslateModule } from '@ngx-translate/core';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        MarkdownModule,
         TranslateModule
     ],
     entryComponents: [

src/app/core/scss/core.scss

@@ -1,9 +1,9 @@
 // ngx-datatable
-@import '~@swimlane/ngx-datatable/release/index.css';
-@import '~@swimlane/ngx-datatable/release/themes/material.css';
-@import '~@swimlane/ngx-datatable/release/assets/icons.css';
+@import '~@swimlane/ngx-datatable/release/themes/material';
+
 // Perfect scrollbar
-@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+@import '~perfect-scrollbar/css/perfect-scrollbar';
+
 // Fuse
 @import "fuse";
 

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

@@ -20,8 +20,8 @@
 }
 
 .mat-pseudo-checkbox-checked:after {
-    width: 14px;
-    height: 7px;
+    width: 14px !important;
+    height: 7px !important;
 }
 
 // Fix: "Input underlines has wrong color opacity value"

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

@@ -9,145 +9,47 @@
         min-width: 0;
     }
 
-    .card-rich-media {
-        position: relative;
+    // Buttons
+    .mat-button {
+        min-width: 0 !important;
+        padding: 0 8px !important;
+    }
 
-        .card-title {
-            position: absolute;
-            right: 16px;
-            bottom: 16px;
-            left: 16px;
-            font-size: 20px;
-            color: white;
-        }
-    }
-
-    .card-media-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        &.medium {
-            align-items: flex-start;
-
-            .card-rich-media {
-                width: 120px;
-                height: 120px;
-            }
-        }
-
-        &.large {
-            align-items: flex-start;
-
-            .card-rich-media {
-                width: 160px;
-                height: 160px;
-            }
-        }
-
-        .card-primary-title {
-            padding: 0 16px 0 0;
-            flex: 1;
-        }
-
-        .card-rich-media {
-            width: 80px;
-            height: 80px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-avatar-header {
-        display: flex;
-        padding: 16px;
-        align-items: center;
-
-        .card-avatar {
-            width: 40px;
-            height: 40px;
-            border-radius: 100%;
-            margin-right: 16px;
-        }
-
-        .card-avatar-title {
-
-            .card-title {
-                font-size: 14px;
-                font-weight: bold;
-            }
-
-            .card-subtitle {
-                font-size: 13px;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .card-primary-title {
-        padding: 16px;
-
-        .card-title {
-            font-size: 24px;
-        }
-
-        .card-subtitle {
-            font-size: 14px;
-        }
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-supporting-text {
-        padding: 16px;
-        font-size: 14px;
-        line-height: 1.75;
-
-        + div {
-            padding-top: 0;
-        }
-    }
-
-    .card-actions {
-        display: flex;
-        padding: 8px;
-
-        &.icon-buttons {
-            padding: 0 8px;
-        }
-
-        &.align-center {
-            justify-content: center;
-        }
-
-        &.align-right {
-            justify-content: flex-end;
-        }
-
-        .mat-button {
-            min-width: 0 !important;
-            padding: 0 8px !important;
-        }
-
-        .card-expander {
-            margin-left: auto;
-        }
-
-        + div {
-            padding-top: 0;
+    // 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-supporting-text {
+        .card-expanded-content {
             padding: 8px 16px 16px 16px;
-            font-size: 14px;
             line-height: 1.75;
         }
     }

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/_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-datatable.scss

@@ -98,3 +98,68 @@
         }
     }
 }
+
+[class*="datatable-icon-"] {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+.datatable-icon-filter:before {
+    content: "filter_list";
+}
+.datatable-icon-collapse:before {
+    content: "unfold_less";
+}
+.datatable-icon-expand:before {
+    content: "unfold_more";
+}
+.datatable-icon-close:before {
+    content: "close";
+}
+.datatable-icon-up:before {
+    content: "keyboard_arrow_up";
+}
+.datatable-icon-down:before {
+    content: "keyboard_arrow_down";
+}
+.datatable-icon-sort:before {
+    content: "sort";
+}
+.datatable-icon-done:before {
+    content: "done";
+}
+.datatable-icon-done-all:before {
+    content: "done_all";
+}
+.datatable-icon-search:before {
+    content: "search";
+}
+.datatable-icon-pin:before {
+    content: "lock";
+}
+.datatable-icon-add:before {
+    content: "add";
+}
+.datatable-icon-left:before {
+    content: "chevron_left";
+}
+.datatable-icon-right:before {
+    content: "chevron_right";
+}
+.datatable-icon-skip:before {
+    content: "skip_next";
+}
+.datatable-icon-prev:before {
+    content: "skip_previous";
+}

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

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

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

@@ -2,7 +2,7 @@
 
 $base00: #263238;
 $base01: #2C393F;
-$base02: #37474F;
+$base02: #62727A;
 $base03: #707880;
 $base04: #C9CCD3;
 $base05: #CDD3DE;

src/app/main/content/apps/academy/course/course.component.scss

@@ -161,6 +161,7 @@
                 bottom: 0;
                 left: 0;
                 padding: 48px;
+                overflow: auto;
 
                 @media (max-width: 720px) {
                     padding: 0 0 120px 0;

src/app/main/content/apps/apps.module.ts

@@ -0,0 +1,63 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseAngularMaterialModule } from '../components/angular-material/angular-material.module';
+
+const routes = [
+    {
+        path        : 'dashboards/project',
+        loadChildren: './dashboards/project/project.module#FuseProjectDashboardModule'
+    },
+    {
+        path        : 'mail',
+        loadChildren: './mail/mail.module#FuseMailModule'
+    },
+    {
+        path        : 'mail-ngrx',
+        loadChildren: './mail-ngrx/mail.module#FuseMailNgrxModule'
+    },
+    {
+        path        : 'chat',
+        loadChildren: './chat/chat.module#FuseChatModule'
+    },
+    {
+        path        : 'calendar',
+        loadChildren: './calendar/calendar.module#FuseCalendarModule'
+    },
+    {
+        path        : 'e-commerce',
+        loadChildren: './e-commerce/e-commerce.module#FuseEcommerceModule'
+    },
+    {
+        path        : 'academy',
+        loadChildren: './academy/academy.module#FuseAcademyModule'
+    },
+    {
+        path        : 'todo',
+        loadChildren: './todo/todo.module#FuseTodoModule'
+    },
+    {
+        path        : 'file-manager',
+        loadChildren: './file-manager/file-manager.module#FuseFileManagerModule'
+    },
+    {
+        path        : 'contacts',
+        loadChildren: './contacts/contacts.module#FuseContactsModule'
+    },
+    {
+        path        : 'scrumboard',
+        loadChildren: './scrumboard/scrumboard.module#FuseScrumboardModule'
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes),
+        FuseAngularMaterialModule
+    ],
+    declarations: []
+})
+export class FuseAppsModule
+{
+}

src/app/main/content/apps/calendar/calendar.component.ts

@@ -25,21 +25,13 @@ import { fuseAnimations } from '../../../../core/animations';
 export class FuseCalendarComponent implements OnInit
 {
     view: string;
-
     viewDate: Date;
-
     events: CalendarEvent[];
-
     public actions: CalendarEventAction[];
-
     activeDayIsOpen: boolean;
-
     refresh: Subject<any> = new Subject();
-
     dialogRef: any;
-
     confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
-
     selectedDay: any;
 
     constructor(

src/app/main/content/apps/contacts/sidenavs/main/main.component.ts

@@ -1,26 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { ContactsService } from '../../contacts.service';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-contacts-main-sidenav',
     templateUrl: './main.component.html',
     styleUrls  : ['./main.component.scss']
 })
-export class FuseContactsMainSidenavComponent implements OnInit
+export class FuseContactsMainSidenavComponent implements OnDestroy
 {
     user: any;
     filterBy: string;
+    onUserDataChangedSubscription: Subscription;
 
     constructor(private contactsService: ContactsService)
     {
-        this.filterBy = 'all';
-        this.contactsService.onUserDataChanged.subscribe(user => {
-            this.user = user;
-        });
-    }
-
-    ngOnInit()
-    {
+        this.filterBy = this.contactsService.filterBy || 'all';
+        this.onUserDataChangedSubscription =
+            this.contactsService.onUserDataChanged.subscribe(user => {
+                this.user = user;
+            });
     }
 
     changeFilter(filter)
@@ -28,4 +27,9 @@ export class FuseContactsMainSidenavComponent implements OnInit
         this.filterBy = filter;
         this.contactsService.onFilterChanged.next(this.filterBy);
     }
+
+    ngOnDestroy()
+    {
+        this.onUserDataChangedSubscription.unsubscribe();
+    }
 }

src/app/main/content/apps/dashboards/project/project.module.ts

@@ -8,7 +8,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes: Routes = [
     {
-        path     : 'apps/dashboards/project',
+        path     : '**',
         component: FuseProjectComponent,
         resolve  : {
             data: ProjectsDashboardService
@@ -30,7 +30,7 @@ const routes: Routes = [
         ProjectsDashboardService
     ]
 })
-export class ProjectModule
+export class FuseProjectDashboardModule
 {
 }
 

src/app/main/content/apps/mail-ngrx/mail.component.ts

@@ -7,6 +7,8 @@ import { locale as english } from './i18n/en';
 import { locale as turkish } from './i18n/tr';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
 import * as fromStore from './store';
 import { FuseConfigService } from '../../../../core/services/config.service';
 

src/app/main/content/apps/mail-ngrx/store/effects/mails.effects.ts

@@ -4,6 +4,7 @@ import { Actions, Effect } from '@ngrx/effects';
 import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 import { map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+import 'rxjs/add/operator/debounceTime';
 import { getRouterState, State } from '../../../../../../store/reducers';
 import { getMailsState } from '../selectors';
 import * as MailsActions from '../actions/mails.actions';

src/app/main/content/apps/scrumboard/board/list/card/card.component.scss

@@ -4,8 +4,8 @@
     position: relative;
     display: block;
     width: 100%;
-    margin: 16px 0;
-    background-color: white;
+    margin: 16px 0 !important;
+    background-color: white !important;
     color: #000;
     border-radius: 2px;
     transition: box-shadow 150ms ease;

src/app/main/content/apps/scrumboard/board/list/list.component.scss

@@ -4,7 +4,7 @@
     width: 344px;
     min-width: 344px;
     max-width: 344px;
-    padding-right: 24px;
+    padding-right: 24px !important;
     height: 100%;
 
     .list {
@@ -36,6 +36,7 @@
                 position: relative;
                 min-height: 32px;
                 padding: 0 16px;
+                background: mat-color($mat-grey, 200) !important;
             }
         }
 

src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss

@@ -10,13 +10,6 @@
     flex-shrink: 0;
     background: #FFFFFF;
 
-    &.todo-item-placeholder {
-        background: rgba(0, 0, 0, 0.12);
-        * {
-            opacity: 0;
-        }
-    }
-
     .handle {
         height: 48px;
         line-height: 48px;

src/app/main/content/components-third-party/components-third-party.module.ts

@@ -6,7 +6,7 @@ import { GoogleMapsModule } from './google-maps/google-maps.module';
 
 const routes = [
     {
-        path     : 'components-third-party/datatables/ngx-datatable',
+        path     : 'datatables/ngx-datatable',
         component: FuseNgxDatatableComponent
     }
 ];
@@ -21,6 +21,6 @@ const routes = [
         FuseNgxDatatableComponent
     ]
 })
-export class ComponentsThirdPartyModule
+export class FuseComponentsThirdPartyModule
 {
 }

src/app/main/content/components-third-party/google-maps/google-maps.component.html

@@ -38,13 +38,13 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <agm-map [latitude]="lat" [longitude]="lng">
                             <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                         </agm-map>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 

src/app/main/content/components-third-party/google-maps/google-maps.module.ts

@@ -6,7 +6,7 @@ import { AgmCoreModule } from '@agm/core';
 
 const routes = [
     {
-        path     : 'components-third-party/google-maps',
+        path     : 'google-maps',
         component: FuseGoogleMapsDocsComponent
     }
 ];

src/app/main/content/components/angular-material/angular-material.module.ts

@@ -8,7 +8,7 @@ import { FuseAngularMaterialComponent } from './angular-material.component';
 
 const routes: Routes = [
     {
-        path    : 'components/angular-material',
+        path    : 'angular-material',
         children: [
             {
                 path     : ':id',

src/app/main/content/components/angular-material/example-viewer/example-viewer.html

@@ -7,9 +7,11 @@
         <button mat-icon-button type="button" (click)="toggleSourceView()"
                 [matTooltip]="'View source'">
             <mat-icon>
-                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
+                     preserveAspectRatio="xMidYMid meet" focusable="false">
                     <path fill="none" d="M0 0h24v24H0V0z"></path>
-                    <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
+                    <path
+                        d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
                 </svg>
             </mat-icon>
         </button>
@@ -23,29 +25,40 @@
             <mat-tab label="CSS"></mat-tab>
         </mat-tab-group>
         <div class="tab-content">
-            <section class="tab" *ngIf="selectedIndex === 0" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+            <section class="tab" *ngIf="selectedIndex === 0"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(htmlView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #htmlView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'"></div>
+                <fuse-highlight lang="html"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
+                </fuse-highlight>
             </section>
-            <section class="tab" *ngIf="selectedIndex === 1" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+
+            <section class="tab" *ngIf="selectedIndex === 1"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(tsView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #tsView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'"></div>
+                <fuse-highlight lang="typescript"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
+                </fuse-highlight>
             </section>
-            <section class="tab" *ngIf="selectedIndex === 2" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+
+            <section class="tab" *ngIf="selectedIndex === 2"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(cssView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #cssView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'"></div>
+                <fuse-highlight lang="css"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
+                </fuse-highlight>
             </section>
         </div>
     </div>

src/app/main/content/components/cards/cards.component.scss

@@ -4,25 +4,50 @@
 
     .content {
 
-        .card-row {
+        .cards {
             display: flex;
-            width: 100%;
-            padding: 24px 24px 48px 24px;
-            margin-bottom: 24px;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: flex-start;
 
-            .card-preview {
+            .card {
                 display: flex;
-                min-width: 320px;
+                align-items: flex-start;
+                padding: 24px 24px 48px 24px;
+                margin-bottom: 96px;
+
+                .card-preview {
+                    display: flex;
+                    min-width: 320px;
+                }
+
+                .card-source {
+                    display: none;
+                }
             }
+        }
 
-            .card-source {
-                display: flex;
-                flex: 1;
-                max-height: 400px;
-                overflow: auto;
-                min-width: 400px;
-                margin-left: 24px;
+        &.source {
+
+            .cards {
+                flex-direction: column;
+
+                .card {
+                    width: 100%;
+                    margin-bottom: 24px;
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+                    .card-source {
+                        background: #263238;
+                        display: flex !important;
+                        flex: 1;
+                        max-height: 400px;
+                        overflow: auto;
+                        min-width: 400px;
+                        margin-left: 24px;
+                    }
+                }
             }
         }
     }

src/app/main/content/components/cards/cards.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import * as shape from 'd3-shape';
 import { fuseAnimations } from '../../../../core/animations';
 
 @Component({
@@ -9,11 +10,207 @@ import { fuseAnimations } from '../../../../core/animations';
 })
 export class FuseCardsDocsComponent
 {
+    view = 'preview';
+
+    // Card 9
     card9Expanded = false;
+
+    // Card 10
     card10Expanded = false;
 
+    // Card 19
+    card19 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name'  : 'GOOG',
+                'series': [
+                    {
+                        'name' : 'Jan 1',
+                        'value': 540.2
+                    },
+                    {
+                        'name' : 'Jan 2',
+                        'value': 539.4
+                    },
+                    {
+                        'name' : 'Jan 3',
+                        'value': 538.9
+                    },
+                    {
+                        'name' : 'Jan 4',
+                        'value': 539.6
+                    },
+                    {
+                        'name' : 'Jan 5',
+                        'value': 540
+                    },
+                    {
+                        'name' : 'Jan 6',
+                        'value': 540.2
+                    },
+                    {
+                        'name' : 'Jan 7',
+                        'value': 540.48
+                    }
+                ]
+            }
+        ],
+        curve         : shape.curveBasis
+    };
+
+    // Card 24
+    card24 = {
+        scheme : {
+            domain: ['#4867d2', '#5c84f1', '#89a9f4']
+        },
+        devices: [
+            {
+                'name'  : 'Desktop',
+                'value' : 92.8,
+                'change': -0.6
+            },
+            {
+                'name'  : 'Mobile',
+                'value' : 6.1,
+                'change': 0.7
+            },
+            {
+                'name'  : 'Tablet',
+                'value' : 1.1,
+                'change': 0.1
+            }
+        ]
+    };
+
+    // Card 25
+    card25 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name' : 'Monday',
+                'value': 221
+            },
+            {
+                'name' : 'Tuesday',
+                'value': 428
+            },
+            {
+                'name' : 'Wednesday',
+                'value': 492
+            },
+            {
+                'name' : 'Thursday',
+                'value': 471
+            },
+            {
+                'name' : 'Friday',
+                'value': 413
+            },
+            {
+                'name' : 'Saturday',
+                'value': 344
+            },
+            {
+                'name' : 'Sunday',
+                'value': 294
+            }
+        ]
+    };
+
+    // Card 26
+    card26 = {
+        scheme: {
+            domain: ['#5c84f1']
+        },
+        data  : [
+            {
+                'name'  : 'Impressions',
+                'series': [
+                    {
+                        'name' : 'Jan 1',
+                        'value': 670000
+                    },
+                    {
+                        'name' : 'Jan 2',
+                        'value': 540000
+                    },
+                    {
+                        'name' : 'Jan 3',
+                        'value': 820000
+                    },
+                    {
+                        'name' : 'Jan 4',
+                        'value': 570000
+                    },
+                    {
+                        'name' : 'Jan 5',
+                        'value': 720000
+                    },
+                    {
+                        'name' : 'Jan 6',
+                        'value': 570000
+                    },
+                    {
+                        'name' : 'Jan 7',
+                        'value': 870000
+                    },
+                    {
+                        'name' : 'Jan 8',
+                        'value': 720000
+                    },
+                    {
+                        'name' : 'Jan 9',
+                        'value': 890000
+                    },
+                    {
+                        'name' : 'Jan 10',
+                        'value': 987000
+                    },
+                    {
+                        'name' : 'Jan 11',
+                        'value': 1120000
+                    },
+                    {
+                        'name' : 'Jan 12',
+                        'value': 1360000
+                    },
+                    {
+                        'name' : 'Jan 13',
+                        'value': 1100000
+                    },
+                    {
+                        'name' : 'Jan 14',
+                        'value': 1490000
+                    },
+                    {
+                        'name' : 'Jan 15',
+                        'value': 980000
+                    }
+                ]
+            }
+        ],
+        curve         : shape.curveBasis
+    };
+
     constructor()
     {
 
     }
+
+    toggleView()
+    {
+        if ( this.view === 'preview' )
+        {
+            this.view = 'source';
+        }
+        else
+        {
+            this.view = 'preview';
+        }
+    }
 }

src/app/main/content/components/components.module.ts

@@ -3,50 +3,52 @@ import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 import { FuseCardsDocsComponent } from './cards/cards.component';
 import { FuseCountdownDocsComponent } from './countdown/countdown.component';
-import { FuseHljsDocsComponent } from './hljs/hljs.component';
+import { FuseHighlightDocsComponent } from './highlight/highlight.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
 import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
+import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component';
 import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component';
-import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component';
 import { FuseWidgetDocsComponent } from './widget/widget.component';
 import { FuseWidgetModule } from '../../../core/components/widget/widget.module';
+import { FuseAngularMaterialModule } from './angular-material/angular-material.module';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 const routes = [
     {
-        path     : 'components/cards',
+        path     : 'cards',
         component: FuseCardsDocsComponent
     },
     {
-        path     : 'components/countdown',
+        path     : 'countdown',
         component: FuseCountdownDocsComponent
     },
     {
-        path     : 'components/highlightjs',
-        component: FuseHljsDocsComponent
+        path     : 'highlight',
+        component: FuseHighlightDocsComponent
     },
     {
-        path     : 'components/material-color-picker',
+        path     : 'material-color-picker',
         component: FuseMaterialColorPickerDocsComponent
     },
     {
-        path     : 'components/multi-language',
+        path     : 'multi-language',
         component: FuseMultiLanguageDocsComponent
     },
     {
-        path     : 'components/navigation',
+        path     : 'navigation',
         component: FuseNavigationDocsComponent
     },
     {
-        path     : 'components/search-bar',
+        path     : 'search-bar',
         component: FuseSearchBarDocsComponent
     },
     {
-        path     : 'components/shortcuts',
+        path     : 'shortcuts',
         component: FuseShortcutsDocsComponent
     },
     {
-        path     : 'components/widget',
+        path     : 'widget',
         component: FuseWidgetDocsComponent
     }
 ];
@@ -55,12 +57,14 @@ const routes = [
     imports     : [
         SharedModule,
         RouterModule.forChild(routes),
-        FuseWidgetModule
+        FuseWidgetModule,
+        FuseAngularMaterialModule,
+        NgxChartsModule
     ],
     declarations: [
         FuseCardsDocsComponent,
         FuseCountdownDocsComponent,
-        FuseHljsDocsComponent,
+        FuseHighlightDocsComponent,
         FuseMaterialColorPickerDocsComponent,
         FuseMultiLanguageDocsComponent,
         FuseNavigationDocsComponent,
@@ -69,6 +73,6 @@ const routes = [
         FuseWidgetDocsComponent
     ]
 })
-export class ComponentsModule
+export class FuseComponentsModule
 {
 }

src/app/main/content/components/countdown/countdown.component.html

@@ -29,12 +29,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 

src/app/main/content/components/highlight/highlight.component.html

@@ -1,4 +1,4 @@
-<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="highlight" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@@ -8,7 +8,7 @@
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>
-            <div class="h2 mt-16">highlight.js</div>
+            <div class="h2 mt-16">Highlight</div>
         </div>
     </div>
     <!-- / HEADER -->
@@ -17,36 +17,42 @@
     <div class="content p-24">
 
         <p>
-            <code>fuse-hljs</code> is a custom built Fuse component allows to show syntax highlighted codes.
+            <code>fuse-highlight</code> is a custom built Fuse component allows to show syntax highlighted codes.
         </p>
 
         <div class="my-48">
             <h2>Sample</h2>
             <p fxLayout="row" fxLayoutAlign="start start">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
                         <div class="title">
                             <span>Example Title</span>
                         </div>
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
-&lt;fuse-hljs lang="html" class="source-code"&gt;
-    &lt;textarea #source hidden="hidden"&gt;
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
+&lt;fuse-highlight lang="html"&gt;
+    &lt;textarea #source&gt;
         &lt;div class="title"&gt;
             &lt;span&gt;Example Title&lt;/span&gt;
         &lt;/div&gt;
     &lt;/textarea&gt;
-&lt;/fuse-hljs&gt;
+&lt;/fuse-highlight&gt;
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -55,7 +61,7 @@
             <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
                 <code class="mr-16">lang</code>
                 <span>
-                    Language of the code to be highlighted. All highlight.js languages can be used.
+                    Language of the code to be highlighted.
                 </span>
             </p>
         </div>

src/app/main/content/components/highlight/highlight.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-highlight-docs',
+    templateUrl: './highlight.component.html',
+    styleUrls  : ['./highlight.component.scss']
+})
+export class FuseHighlightDocsComponent
+{
+    constructor()
+    {
+
+    }
+}

src/app/main/content/components/hljs/hljs.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-hljs-docs',
-    templateUrl: './hljs.component.html',
-    styleUrls  : ['./hljs.component.scss']
-})
-export class FuseHljsDocsComponent
-{
-    constructor()
-    {
-
-    }
-}

src/app/main/content/components/material-color-picker/material-color-picker.component.html

@@ -30,14 +30,14 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-material-color-picker [(selectedClass)]="colorClass"
                                                     (onValueChange)="onSettingsChange()">
                         </fuse-material-color-picker>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 

src/app/main/content/components/multi-language/multi-language.component.html

@@ -41,9 +41,9 @@
                 translation data:
             </p>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         // i18n/en.ts
                         export const locale = {
                             lang: 'en',
@@ -64,7 +64,7 @@
                             }
                         };
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -75,9 +75,9 @@
                 <code>mail.component.ts</code> file:
             </p>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         // Your imports
                         import { ... } from '..';
 
@@ -100,7 +100,7 @@
                             ...
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -110,9 +110,9 @@
                 Changing the current language can happen instantly. Simply call the <code>use</code> method from the
                 translate service:
             </p>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         import { TranslateService } from '@ngx-translate/core';
 
                         constructor(private translate: TranslateService) {}
@@ -123,7 +123,7 @@
                             this.translate.use('tr');
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
             <p>
                 More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>

src/app/main/content/components/navigation/navigation.component.html

@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-navigation></fuse-navigation>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -49,9 +49,9 @@
 
         <div class="my-48">
             <h3>Grouping</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'COMPONENTS',
                             'translate': 'NAV.COMPONENTS',
@@ -65,15 +65,15 @@
                             ]
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
             <h3>Collapsable</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'Datatables',
                             'translate': 'NAV.DATATABLES',
@@ -88,15 +88,15 @@
                             ]
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
             <h3>Item</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'Countdown',
                             'translate': 'NAV.COUNTDOWN',
@@ -105,7 +105,7 @@
                             'url'      : '/components/countdown'
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -132,9 +132,9 @@
 
             <h4>Update navigation item on-the-fly</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         updateMailBadge()
                         {
                             // Get the mail nav item
@@ -144,7 +144,7 @@
                             mailNavItem.badge.title = 35;
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24 mb-64">
@@ -157,9 +157,9 @@
 
             <h4>Add a subitem to the Calendar nav item</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         addSubitemToCalendar()
                         {
                             // Prepare the new nav item
@@ -174,7 +174,7 @@
                             this.navigationService.addNavigationItem('applications.calendar', newNavItem);
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24 mb-64">
@@ -187,9 +187,9 @@
 
             <h4>Add a nav item with custom function</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         addNavItemWithCustomFunction()
                         {
                             // Prepare the new nav item
@@ -209,7 +209,7 @@
                             applicationsNavItem.children.unshift(newNavItem);
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24">

src/app/main/content/components/search-bar/search-bar.component.html

@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 

src/app/main/content/components/shortcuts/shortcuts.component.html

@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-shortcuts></fuse-shortcuts>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 

src/app/main/content/components/widget/widget.component.html

@@ -62,9 +62,11 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
                         <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                             <!-- Front -->
@@ -97,8 +99,10 @@
                             <!-- / Back -->
 
                         </fuse-widget>
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 

src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.module.ts

@@ -6,7 +6,7 @@ import { FuseForgotPassword2Component } from './forgot-password-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/forgot-password-2',
+        path     : 'auth/forgot-password-2',
         component: FuseForgotPassword2Component
     }
 ];

src/app/main/content/pages/authentication/forgot-password/forgot-password.module.ts

@@ -6,7 +6,7 @@ import { FuseForgotPasswordComponent } from './forgot-password.component';
 
 const routes = [
     {
-        path     : 'pages/auth/forgot-password',
+        path     : 'auth/forgot-password',
         component: FuseForgotPasswordComponent
     }
 ];

src/app/main/content/pages/authentication/lock/lock.module.ts

@@ -6,7 +6,7 @@ import { FuseLockComponent } from './lock.component';
 
 const routes = [
     {
-        path     : 'pages/auth/lock',
+        path     : 'auth/lock',
         component: FuseLockComponent
     }
 ];

src/app/main/content/pages/authentication/login-2/login-2.module.ts

@@ -6,7 +6,7 @@ import { FuseLogin2Component } from './login-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/login-2',
+        path     : 'auth/login-2',
         component: FuseLogin2Component
     }
 ];

src/app/main/content/pages/authentication/login/login.module.ts

@@ -6,7 +6,7 @@ import { FuseLoginComponent } from './login.component';
 
 const routes = [
     {
-        path     : 'pages/auth/login',
+        path     : 'auth/login',
         component: FuseLoginComponent
     }
 ];

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.module.ts

@@ -6,7 +6,7 @@ import { FuseMailConfirmComponent } from './mail-confirm.component';
 
 const routes = [
     {
-        path     : 'pages/auth/mail-confirm',
+        path     : 'auth/mail-confirm',
         component: FuseMailConfirmComponent
     }
 ];

src/app/main/content/pages/authentication/register-2/register-2.module.ts

@@ -6,7 +6,7 @@ import { FuseRegister2Component } from './register-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/register-2',
+        path     : 'auth/register-2',
         component: FuseRegister2Component
     }
 ];

src/app/main/content/pages/authentication/register/register.module.ts

@@ -6,7 +6,7 @@ import { FuseRegisterComponent } from './register.component';
 
 const routes = [
     {
-        path     : 'pages/auth/register',
+        path     : 'auth/register',
         component: FuseRegisterComponent
     }
 ];

src/app/main/content/pages/authentication/reset-password-2/reset-password-2.module.ts

@@ -6,7 +6,7 @@ import { FuseResetPassword2Component } from './reset-password-2.component';
 
 const routes = [
     {
-        path     : 'pages/auth/reset-password-2',
+        path     : 'auth/reset-password-2',
         component: FuseResetPassword2Component
     }
 ];

src/app/main/content/pages/authentication/reset-password/reset-password.module.ts

@@ -6,7 +6,7 @@ import { FuseResetPasswordComponent } from './reset-password.component';
 
 const routes = [
     {
-        path     : 'pages/auth/reset-password',
+        path     : 'auth/reset-password',
         component: FuseResetPasswordComponent
     }
 ];

src/app/main/content/pages/coming-soon/coming-soon.module.ts

@@ -6,7 +6,7 @@ import { FuseComingSoonComponent } from './coming-soon.component';
 
 const routes = [
     {
-        path     : 'pages/coming-soon',
+        path     : 'coming-soon',
         component: FuseComingSoonComponent
     }
 ];

src/app/main/content/pages/errors/404/error-404.module.ts

@@ -6,7 +6,7 @@ import { FuseError404Component } from './error-404.component';
 
 const routes = [
     {
-        path     : 'pages/errors/error-404',
+        path     : 'errors/error-404',
         component: FuseError404Component
     }
 ];

src/app/main/content/pages/errors/500/error-500.module.ts

@@ -6,7 +6,7 @@ import { FuseError500Component } from './error-500.component';
 
 const routes = [
     {
-        path     : 'pages/errors/error-500',
+        path     : 'errors/error-500',
         component: FuseError500Component
     }
 ];

src/app/main/content/pages/faq/faq.module.ts

@@ -6,7 +6,7 @@ import { FaqService } from './faq.service';
 
 const routes = [
     {
-        path     : 'pages/faq',
+        path     : 'faq',
         component: FuseFaqComponent,
         resolve  : {
             faq: FaqService

src/app/main/content/pages/invoices/compact/compact.module.ts

@@ -7,7 +7,7 @@ import { InvoiceService } from '../invoice.service';
 
 const routes = [
     {
-        path     : 'pages/invoices/compact',
+        path     : 'invoices/compact',
         component: FuseInvoiceCompactComponent,
         resolve  : {
             search: InvoiceService

src/app/main/content/pages/invoices/modern/modern.module.ts

@@ -7,7 +7,7 @@ import { InvoiceService } from '../invoice.service';
 
 const routes = [
     {
-        path     : 'pages/invoices/modern',
+        path     : 'invoices/modern',
         component: FuseInvoiceModernComponent,
         resolve  : {
             search: InvoiceService

src/app/main/content/pages/knowledge-base/knowledge-base.module.ts

@@ -7,7 +7,7 @@ import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.com
 
 const routes = [
     {
-        path     : 'pages/knowledge-base',
+        path     : 'knowledge-base',
         component: FuseKnowledgeBaseComponent,
         resolve  : {
             knowledgeBase: KnowledgeBaseService

src/app/main/content/pages/maintenance/maintenence.module.ts

@@ -6,7 +6,7 @@ import { FuseMaintenanceComponent } from './maintenance.component';
 
 const routes = [
     {
-        path     : 'pages/maintenance',
+        path     : 'maintenance',
         component: FuseMaintenanceComponent
     }
 ];

src/app/main/content/pages/pages.module.ts

@@ -66,6 +66,7 @@ import { KnowledgeBaseModule } from './knowledge-base/knowledge-base.module';
         KnowledgeBaseModule
     ]
 })
-export class PagesModule
+export class FusePagesModule
 {
+
 }

src/app/main/content/pages/pricing/pricing.module.ts

@@ -8,15 +8,15 @@ import { FusePricingStyle3Component } from './style-3/style-3.component';
 
 const routes = [
     {
-        path     : 'pages/pricing/style-1',
+        path     : 'pricing/style-1',
         component: FusePricingStyle1Component
     },
     {
-        path     : 'pages/pricing/style-2',
+        path     : 'pricing/style-2',
         component: FusePricingStyle2Component
     },
     {
-        path     : 'pages/pricing/style-3',
+        path     : 'pricing/style-3',
         component: FusePricingStyle3Component
     }
 ];

src/app/main/content/pages/profile/profile.module.ts

@@ -10,7 +10,7 @@ import { ProfileService } from './profile.service';
 
 const routes = [
     {
-        path     : 'pages/profile',
+        path     : 'profile',
         component: FuseProfileComponent,
         resolve  : {
             profile: ProfileService

src/app/main/content/pages/search/search.module.ts

@@ -9,7 +9,7 @@ import { SearchService } from './search.service';
 
 const routes = [
     {
-        path     : 'pages/search',
+        path     : 'search',
         component: FuseSearchComponent,
         resolve  : {
             search: SearchService

src/app/main/content/services/config/config.component.html

@@ -24,8 +24,10 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+
                         export class SomeComponent
                         {
                             settings: any;
@@ -61,8 +63,10 @@
                                 });
                             }
                         }
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 

src/app/main/content/services/services.module.ts

@@ -6,11 +6,11 @@ import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-scr
 
 const routes = [
     {
-        path     : 'services/config',
+        path     : 'config',
         component: FuseConfigServiceDocsComponent
     },
     {
-        path     : 'services/splash-screen',
+        path     : 'splash-screen',
         component: FuseSplashScreenServiceDocsComponent
     }
 ];
@@ -25,6 +25,7 @@ const routes = [
         FuseSplashScreenServiceDocsComponent
     ]
 })
-export class ServicesModule
+
+export class FuseServicesModule
 {
 }

src/app/main/content/services/splash-screen/splash-screen.component.html

@@ -25,8 +25,10 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+
                         export class SomeComponent
                         {
                             constructor(private fuseSplashScreen: FuseSplashScreenService) {}
@@ -36,8 +38,10 @@
                                 this.fuseSplashScreen.hide();
                             }
                         }
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 

src/app/main/content/ui/colors/colors.module.ts

@@ -6,7 +6,7 @@ import { FuseColorsComponent } from './colors.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/colors',
+        path     : 'colors',
         component: FuseColorsComponent
     }
 ];

src/app/main/content/ui/forms/forms.module.ts

@@ -6,7 +6,7 @@ import { FuseFormsComponent } from './forms.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/forms',
+        path     : 'forms',
         component: FuseFormsComponent
     }
 ];

src/app/main/content/ui/helper-classes/helper-classes.module.ts

@@ -8,7 +8,7 @@ import { FuseHelperClassesWidthHeightComponent } from './tabs/width-height/width
 
 const routes: Routes = [
     {
-        path     : 'ui/helper-classes',
+        path     : 'helper-classes',
         component: FuseHelperClassesComponent
     }
 ];

src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html

@@ -10,12 +10,12 @@
                 <span>p-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-0">No padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -26,12 +26,12 @@
                 <span>p-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-4">4px padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -42,12 +42,12 @@
                 <span>p-12</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-12">12px padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -69,7 +69,7 @@
                 <span>py-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="pt-0">0 padding from top</span>
@@ -79,7 +79,7 @@
                     <span class="px-0">0 padding from left and right</span>
                     <span class="py-0">0 padding from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -95,7 +95,7 @@
                 <span>py-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="pt-4">4px padding from top</span>
@@ -105,7 +105,7 @@
                     <span class="px-4">4px padding from left and right</span>
                     <span class="py-4">4px padding from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -121,12 +121,12 @@
                 <span>m-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-0">No margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -137,12 +137,12 @@
                 <span>m-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-4">4px margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -153,12 +153,12 @@
                 <span>m-12</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-12">12px margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -180,7 +180,7 @@
                 <span>my-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mt-0">0 margin from top</span>
@@ -190,7 +190,7 @@
                     <span class="mx-0">0 margin from left and right</span>
                     <span class="my-0">0 margin from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -206,7 +206,7 @@
                 <span>my-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mt-4">4px margin from top</span>
@@ -216,7 +216,7 @@
                     <span class="mx-4">4px margin from left and right</span>
                     <span class="my-4">4px margin from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 

src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss

@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 

src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html

@@ -10,12 +10,12 @@
                 <span>w-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-0">0px width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -26,12 +26,12 @@
                 <span>w-100</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-100">100px width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -42,12 +42,12 @@
                 <span>w-25-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-25-p">25% width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -58,12 +58,12 @@
                 <span>w-100-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-100-p">100% width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -79,12 +79,12 @@
                 <span>h-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-0">0px height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -95,12 +95,12 @@
                 <span>h-100</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-100">100px height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -111,12 +111,12 @@
                 <span>h-25-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-25-p">25% height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -127,12 +127,12 @@
                 <span>h-100-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-100-p">100% height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 

src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss

@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 

src/app/main/content/ui/icons/icons.module.ts

@@ -5,7 +5,7 @@ import { FuseIconsComponent } from './icons.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/icons',
+        path     : 'icons',
         component: FuseIconsComponent
     }
 ];

src/app/main/content/ui/page-layouts/page-layouts.module.ts

@@ -24,79 +24,79 @@ import { FuseBlankComponent } from './blank/blank.component';
 
 const routes: Routes = [
     {
-        path     : 'ui/page-layouts/carded/full-width',
+        path     : 'page-layouts/carded/full-width',
         component: FuseCardedFullWidthComponent
     },
     {
-        path     : 'ui/page-layouts/carded/full-width-2',
+        path     : 'page-layouts/carded/full-width-2',
         component: FuseCardedFullWidth2Component
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav',
+        path     : 'page-layouts/carded/left-sidenav',
         component: FuseCardedLeftSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav-tabbed',
+        path     : 'page-layouts/carded/left-sidenav-tabbed',
         component: FuseCardedLeftSidenavTabbedComponent
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav-2',
+        path     : 'page-layouts/carded/left-sidenav-2',
         component: FuseCardedLeftSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/carded/left-sidenav-2-tabbed',
+        path     : 'page-layouts/carded/left-sidenav-2-tabbed',
         component: FuseCardedLeftSidenav2TabbedComponent
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav',
+        path     : 'page-layouts/carded/right-sidenav',
         component: FuseCardedRightSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav-tabbed',
+        path     : 'page-layouts/carded/right-sidenav-tabbed',
         component: FuseCardedRightSidenavTabbedComponent
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav-2',
+        path     : 'page-layouts/carded/right-sidenav-2',
         component: FuseCardedRightSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/carded/right-sidenav-2-tabbed',
+        path     : 'page-layouts/carded/right-sidenav-2-tabbed',
         component: FuseCardedRightSidenav2TabbedComponent
     },
     {
-        path     : 'ui/page-layouts/simple/full-width',
+        path     : 'page-layouts/simple/full-width',
         component: FuseSimpleFullWidthComponent
     },
     {
-        path     : 'ui/page-layouts/simple/left-sidenav',
+        path     : 'page-layouts/simple/left-sidenav',
         component: FuseSimpleLeftSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/simple/left-sidenav-2',
+        path     : 'page-layouts/simple/left-sidenav-2',
         component: FuseSimpleLeftSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/simple/left-sidenav-3',
+        path     : 'page-layouts/simple/left-sidenav-3',
         component: FuseSimpleLeftSidenav3Component
     },
     {
-        path     : 'ui/page-layouts/simple/right-sidenav',
+        path     : 'page-layouts/simple/right-sidenav',
         component: FuseSimpleRightSidenavComponent
     },
     {
-        path     : 'ui/page-layouts/simple/right-sidenav-2',
+        path     : 'page-layouts/simple/right-sidenav-2',
         component: FuseSimpleRightSidenav2Component
     },
     {
-        path     : 'ui/page-layouts/simple/right-sidenav-3',
+        path     : 'page-layouts/simple/right-sidenav-3',
         component: FuseSimpleRightSidenav3Component
     },
     {
-        path     : 'ui/page-layouts/simple/tabbed',
+        path     : 'page-layouts/simple/tabbed',
         component: FuseTabbedComponent
     },
     {
-        path     : 'ui/page-layouts/blank',
+        path     : 'page-layouts/blank',
         component: FuseBlankComponent
     }
 ];

src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html

@@ -14,7 +14,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote>
@@ -23,7 +23,7 @@
                         </p>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -40,7 +40,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote>
@@ -52,7 +52,7 @@
                         </footer>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -69,7 +69,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote class="reverse">
@@ -81,7 +81,7 @@
                         </footer>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -108,7 +108,7 @@
                 </ol>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <ol>
@@ -124,7 +124,7 @@
                         <li>Ordered list item</li>
                     </ol>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -145,7 +145,7 @@
                 </ul>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <ul>
@@ -161,7 +161,7 @@
                         <li>Unordered list item</li>
                     </ul>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -183,7 +183,7 @@
                 </dl>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <dl>
@@ -194,7 +194,7 @@
                         <dd>This is also another definition description</dd>
                     </dl>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 

src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss

@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 

src/app/main/content/ui/typography/tabs/headings/headings.component.html

@@ -11,12 +11,12 @@
                 <span class="mat-display-4">Display 4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-4">Display 4</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -27,12 +27,12 @@
                 <span class="mat-display-3">Display 3</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-3">Display 3</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -43,12 +43,12 @@
                 <span class="mat-display-2">Display 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-2">Display 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
         </div>
 
         <div fxLayout="column" fxLayout.gt-md="row">
@@ -58,12 +58,12 @@
                 <span class="mat-display-1">Display 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-1">Display 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -74,12 +74,12 @@
                 <span class="mat-headline">Headline</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-headline">Headline</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -90,12 +90,12 @@
                 <span class="mat-title">Title</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-title">Title</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -106,12 +106,12 @@
                 <span class="mat-subheading-2">Subheading 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-subheading-2">Subheading 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -122,12 +122,12 @@
                 <span class="mat-subheading-1">Subheading 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-subheading-1">Subheading 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -138,12 +138,12 @@
                 <span class="mat-body-1">Body 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-body-1">Body 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -154,12 +154,12 @@
                 <span class="mat-body-2">Body 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-body-2">Body 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -170,12 +170,12 @@
                 <span class="mat-caption">Caption</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-caption">Caption</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -192,13 +192,13 @@
                 <span class="h1">Heading 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h1>Heading 1</h1>
                     <span class="h1">Heading 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -209,13 +209,13 @@
                 <span class="h2">Heading 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h2>Heading 2</h2>
                     <span class="h2">Heading 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -226,13 +226,13 @@
                 <span class="h3">Heading 3</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h3>Heading 3</h3>
                     <span class="h3">Heading 3</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -243,13 +243,13 @@
                 <span class="h4">Heading 4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h4>Heading 4</h4>
                     <span class="h4">Heading 4</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -260,13 +260,13 @@
                 <span class="h5">Heading 5</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h5>Heading 5</h5>
                     <span class="h5">Heading 5</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -277,13 +277,13 @@
                 <span class="h6">Heading 6</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h6>Heading 6</h6>
                     <span class="h6">Heading 6</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 

src/app/main/content/ui/typography/tabs/headings/headings.component.scss

@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 

src/app/main/content/ui/typography/tabs/helpers/helpers.component.html

@@ -13,14 +13,14 @@
                 <span class="font-weight-900">font-weight: 900</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="font-weight-100">100 font weight</span>
                     ...
                     <span class="font-weight-900">900 font weight</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -37,12 +37,12 @@
                 <span class="font-size-20">font-size: 20</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="font-size-20">font-size: 20</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -61,14 +61,14 @@
                 <span>line-height: 120</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="line-height-2">2px line height</span>
                     ...
                     <span class="line-height-120">120px line height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -84,12 +84,12 @@
                 <div class="text-left">Left aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-left">Left aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -99,12 +99,12 @@
                 <div class="text-center">Center aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-center">Center aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -114,12 +114,12 @@
                 <div class="text-right">Right aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-right">Right aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -131,14 +131,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-boxed">Boxed text</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -150,14 +150,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-boxed-light">Boxed text light</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -169,14 +169,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-strike">Strike-through text</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -186,12 +186,12 @@
                 <div class="text-italic">Italic text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-italic">Italic text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -201,12 +201,12 @@
                 <div class="text-semibold">Semi-bold text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-semibold">Semi-bold text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -216,12 +216,12 @@
                 <div class="text-bold">Bold text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-bold">Bold text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -233,14 +233,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="text-truncate">
                         This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
                     </span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 

src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss

@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 

src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html

@@ -8,12 +8,12 @@
                 <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <abbr title="Cascaded Style Sheet">CSS</abbr>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -23,12 +23,12 @@
                 <span>This is a <mark>marked</mark> text.</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a <mark>marked</mark> text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -40,12 +40,12 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <del>This is a deleted text.</del>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -55,12 +55,12 @@
                 <span><s>This is a strike-through text.</s></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <s>This is a strike-through text.</s>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -70,12 +70,12 @@
                 <span><u>This is an underlined text.</u></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <u>This is an underlined text.</u>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -87,12 +87,12 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <small>This is a small text.</small>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -102,12 +102,12 @@
                 <span><strong>This is a strong text.</strong></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <strong>This is a strong text.</strong>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -117,12 +117,12 @@
                 <span><em>This is an italic text.</em></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <em>This is an italic text.</em>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -135,14 +135,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-super">super</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -156,14 +156,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-sub">sub</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -176,14 +176,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-capitalized">capitalized</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -196,14 +196,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is an
                     <span class="text-uppercase">uppercase</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -216,14 +216,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-lowercase">LOWERCASE</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 

src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss

@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 

src/app/main/content/ui/typography/typography.module.ts

@@ -10,7 +10,7 @@ import { FuseTypographyHelpersComponent } from './tabs/helpers/helpers.component
 
 const routes: Routes = [
     {
-        path     : 'ui/typography',
+        path     : 'typography',
         component: FuseTypographyComponent
     }
 ];

src/app/main/content/ui/ui.module.ts

@@ -17,6 +17,6 @@ import { UIColorsModule } from './colors/colors.module';
         UIColorsModule
     ]
 })
-export class UIModule
+export class FuseUIModule
 {
 }

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

@@ -1,8 +1,8 @@
 fuse-quick-panel {
     display: flex;
-    width: 330px;
-    min-width: 330px;
-    max-width: 330px;
+    width: 280px;
+    min-width: 280px;
+    max-width: 280px;
     z-index: 99;
     flex-direction: column;
 

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

@@ -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,7 +70,7 @@
                 </div>
             </button>
 
-            <mat-menu #languageMenu="matMenu">
+            <mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
 
                 <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                     <div fxLayout="row" fxLayoutAlign="start center">

src/app/navigation/navigation.model.ts

@@ -823,11 +823,11 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
                         'url'  : '/components/countdown'
                     },
                     {
-                        'id'   : 'highlightjs',
-                        'title': 'Highlight.js',
+                        'id'   : 'highlight',
+                        'title': 'Highlight',
                         'type' : 'item',
                         'icon' : 'settings_input_component',
-                        'url'  : '/components/highlightjs'
+                        'url'  : '/components/highlight'
                     },
                     {
                         'id'   : 'material-color-picker',