Merge branch 'master' of https://github.com/withinpixels/fuse2

package-lock.json

@@ -1183,7 +1183,6 @@
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
       "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
       "dev": true,
-      "optional": true,
       "requires": {
         "align-text": "0.1.4",
         "lazy-cache": "1.0.4"
@@ -1193,8 +1192,7 @@
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
           "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -6197,6 +6195,11 @@
       "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.3.1.tgz",
       "integrity": "sha512-/Gn3XvOgaAK/ZnXA0ej9ivYm6uIvHwvZaSzx04ZUtG1Vw5RCKzw84dK0Ru9Ylnnq1xJU4WmdA63REkJb8cvYXg=="
     },
+    "ngx-cookie-service": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-1.0.7.tgz",
+      "integrity": "sha1-NdQzt3WloqgIxUl19Pr1AKzFL2g="
+    },
     "ngx-perfect-scrollbar": {
       "version": "4.5.6",
       "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-4.5.6.tgz",
@@ -7939,7 +7942,6 @@
       "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
       "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
       "dev": true,
-      "optional": true,
       "requires": {
         "align-text": "0.1.4"
       }
@@ -9191,28 +9193,48 @@
         "camelcase": {
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
+          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
+          "dev": true
         },
         "cliui": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE="
+          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+          "dev": true,
+          "requires": {
+            "center-align": "0.1.3",
+            "right-align": "0.1.3",
+            "wordwrap": "0.0.2"
+          }
         },
         "uglify-js": {
           "version": "2.8.29",
           "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
           "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
-          "dev": true
+          "dev": true,
+          "requires": {
+            "source-map": "0.5.6",
+            "uglify-to-browserify": "1.0.2",
+            "yargs": "3.10.0"
+          }
         },
         "wordwrap": {
           "version": "0.0.2",
           "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
+          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
+          "dev": true
         },
         "yargs": {
           "version": "3.10.0",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E="
+          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+          "dev": true,
+          "requires": {
+            "camelcase": "1.2.1",
+            "cliui": "2.1.0",
+            "decamelize": "1.2.0",
+            "window-size": "0.1.0"
+          }
         }
       }
     },
@@ -9925,8 +9947,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
       "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "wordwrap": {
       "version": "0.0.3",

package.json

@@ -37,6 +37,7 @@
     "intl": "^1.2.5",
     "moment": "^2.18.1",
     "ngx-color-picker": "^4.3.1",
+    "ngx-cookie-service": "^1.0.7",
     "ngx-perfect-scrollbar": "^4.5.6",
     "rxjs": "^5.4.3",
     "web-animations-js": "^2.3.1",

src/app/app.module.ts

@@ -17,6 +17,8 @@ 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 { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module';
+import { ServicesModule } from './main/content/services/services.module';
 
 const appRoutes: Routes = [
     {
@@ -71,9 +73,11 @@ const appRoutes: Routes = [
 
         PagesModule,
         UIModule,
-        ComponentsModule
+        ServicesModule,
+        ComponentsModule,
+        ComponentsThirdPartyModule
     ],
-    providers: [
+    providers   : [
         FuseSplashScreenService,
         FuseConfigService
     ],

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

@@ -9,6 +9,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        text-align: center;
 
         .time {
             display: flex;

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

@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
 import { FuseMatchMedia } from '../../services/match-media.service';
 import { FuseConfigService } from '../../services/config.service';
+import { CookieService } from 'ngx-cookie-service';
 
 @Component({
     selector   : 'fuse-shortcuts',
@@ -29,7 +30,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private observableMedia: ObservableMedia,
         private fuseMatchMedia: FuseMatchMedia,
         private fuseNavigationService: FuseNavigationService,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private cookieService: CookieService
     )
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
@@ -45,33 +47,42 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
-        // User's shortcut items
+        const cookieExists = this.cookieService.check('FUSE2.shortcuts');
-        this.shortcutItems = [
+
-            {
+        if ( cookieExists )
-                'title': 'Calendar',
+        {
-                'type' : 'nav-item',
+            this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
-                'icon' : 'today',
+        }
-                'url'  : '/apps/calendar'
+        else
-            },
+        {
-            {
+            // User's shortcut items
-                'title': 'Mail',
+            this.shortcutItems = [
-                'type' : 'nav-item',
+                {
-                'icon' : 'email',
+                    'title': 'Calendar',
-                'url'  : '/apps/mail'
+                    'type' : 'nav-item',
-            },
+                    'icon' : 'today',
-            {
+                    'url'  : '/apps/calendar'
-                'title': 'Contacts',
+                },
-                'type' : 'nav-item',
+                {
-                'icon' : 'account_box',
+                    'title': 'Mail',
-                'url'  : '/apps/contacts'
+                    'type' : 'nav-item',
-            },
+                    'icon' : 'email',
-            {
+                    'url'  : '/apps/mail'
-                'title': 'To-Do',
+                },
-                'type' : 'nav-item',
+                {
-                'icon' : 'check_box',
+                    'title': 'Contacts',
-                'url'  : '/apps/todo'
+                    'type' : 'nav-item',
-            }
+                    'icon' : 'account_box',
-        ];
+                    'url'  : '/apps/contacts'
+                },
+                {
+                    'title': 'To-Do',
+                    'type' : 'nav-item',
+                    'icon' : 'check_box',
+                    'url'  : '/apps/todo'
+                }
+            ];
+        }
 
         this.matchMediaSubscription =
             this.fuseMatchMedia.onMediaChange.subscribe(() => {
@@ -115,12 +126,18 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             if ( this.shortcutItems[i].url === itemToToggle.url )
             {
                 this.shortcutItems.splice(i, 1);
+
+                // Save to the cookies
+                this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
+
                 return;
             }
-
         }
 
         this.shortcutItems.push(itemToToggle);
+
+        // Save to the cookies
+        this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
     }
 
     isInShortcuts(navigationItem)

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

@@ -20,6 +20,7 @@ import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-s
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 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 { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
     declarations   : [
@@ -65,6 +66,7 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p
         FuseConfirmDialogComponent
     ],
     providers      : [
+        CookieService,
         FuseNavigationService,
         FuseMatchMedia,
         FuseNavbarService,

src/app/core/scss/core.scss

@@ -28,6 +28,7 @@
 @import "partials/navigation";
 @import "partials/forms";
 @import "partials/toolbar";
+@import "partials/print";
 
 // Plugins
 @import "partials/plugins/plugins";

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

@@ -0,0 +1,51 @@
+/*----------------------------------------------------------------*/
+/*  Print
+/*----------------------------------------------------------------*/
+
+@media all {
+
+    /* Never show page break in normal view */
+    .page-break {
+        display: none;
+    }
+
+}
+
+@media print {
+
+    /* Page Styles */
+    @page {
+        //margin: 0.5cm;
+    }
+
+    /* Page break */
+    .page-break {
+        display: block;
+        break-after: always;
+        page-break-after: always;
+    }
+
+    /* General styles */
+    fuse-root {
+
+        fuse-navbar,
+        fuse-toolbar,
+        fuse-footer,
+        fuse-quick-panel,
+        fuse-theme-options,
+        .ps > .ps__scrollbar-x-rail,
+        .ps > .ps__scrollbar-y-rail {
+            display: none !important;
+        }
+
+        .ps {
+            overflow: visible !important;
+        }
+    }
+
+    /* Printable page specific styles */
+    .printable {
+        overflow: visible !important;
+        height: auto !important;
+    }
+}

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

@@ -12,6 +12,7 @@ export class FuseConfigService
 
     /**
      * @param router
+     * @param platform
      */
     constructor(
         private router: Router,

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
+
+const routes = [
+    {
+        path     : 'components-third-party/datatables/ngx-datatable',
+        component: FuseNgxDatatableComponent
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        FuseNgxDatatableComponent
+    ]
+})
+export class ComponentsThirdPartyModule
+{
+}

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

@@ -1,28 +1,66 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
-import { FuseNgxDatatableComponent } from './datatable/ngx-datatable.component';
 import { FusePriceTablesComponent } from './price-tables/price-tables.component';
+import { FuseCountdownDocsComponent } from './countdown/countdown.component';
+import { FuseHljsDocsComponent } from './hljs/hljs.component';
+import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
+import { FuseNavigationDocsComponent } from './navigation/navigation.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';
 
 const routes = [
     {
-        path     : 'components/datatables/ngx-datatable',
+        path     : 'components/countdown',
-        component: FuseNgxDatatableComponent
+        component: FuseCountdownDocsComponent
+    },
+    {
+        path     : 'components/highlightjs',
+        component: FuseHljsDocsComponent
+    },
+    {
+        path     : 'components/material-color-picker',
+        component: FuseMaterialColorPickerDocsComponent
+    },
+    {
+        path     : 'components/navigation',
+        component: FuseNavigationDocsComponent
     },
     {
         path     : 'components/price-tables',
         component: FusePriceTablesComponent
+    },
+    {
+        path     : 'components/search-bar',
+        component: FuseSearchBarDocsComponent
+    },
+    {
+        path     : 'components/shortcuts',
+        component: FuseShortcutsDocsComponent
+    },
+    {
+        path     : 'components/widget',
+        component: FuseWidgetDocsComponent
     }
 ];
 
 @NgModule({
     imports     : [
         SharedModule,
-        RouterModule.forChild(routes)
+        RouterModule.forChild(routes),
+        FuseWidgetModule
     ],
     declarations: [
-        FuseNgxDatatableComponent,
+        FuseCountdownDocsComponent,
-        FusePriceTablesComponent
+        FuseHljsDocsComponent,
+        FuseMaterialColorPickerDocsComponent,
+        FuseNavigationDocsComponent,
+        FusePriceTablesComponent,
+        FuseSearchBarDocsComponent,
+        FuseShortcutsDocsComponent,
+        FuseWidgetDocsComponent
     ]
 })
 export class ComponentsModule

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

@@ -0,0 +1,55 @@
+<div id="countdown" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Countdown</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-countdown</code> is a custom built Fuse component allows you to create a countdowns.
+        </p>
+
+        <div class="my-48">
+            <h2>Sample</h2>
+            <p fxLayout="row" fxLayoutAlign="start start">
+                <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="html" class="source-code">
+                    <textarea #source hidden="hidden">
+                        <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Inputs</h2>
+            <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
+                <code class="mr-16">eventDate</code>
+                <span>
+                    The date of the event. Since fuse-countdown uses moment.js to parse the dates, any moment.js
+                    compatible date string can be used.
+                </span>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

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

@@ -0,0 +1,66 @@
+<div id="hljs" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">highlight.js</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-hljs</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">
+                        <div class="title">
+                            <span>Example Title</span>
+                        </div>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-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;
+        &lt;div class="title"&gt;
+            &lt;span&gt;Example Title&lt;/span&gt;
+        &lt;/div&gt;
+    &lt;/textarea&gt;
+&lt;/fuse-hljs&gt;
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Inputs</h2>
+            <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.
+                </span>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,75 @@
+<div id="material-color-picker" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Material Color Picker</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-material-color-picker</code> is a custom built Fuse component allows you to add a color picker
+            that allows to choose one of the many Material spec. colors.
+        </p>
+
+        <div class="my-48">
+            <h2>Sample</h2>
+            <p fxLayout="row" fxLayoutAlign="start start">
+                <fuse-material-color-picker></fuse-material-color-picker>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="html" class="source-code">
+                    <textarea #source hidden="hidden">
+                        <fuse-material-color-picker [(selectedClass)]="colorClass"
+                                                    (onValueChange)="onSettingsChange()">
+                        </fuse-material-color-picker>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Two-way bindings</h2>
+            <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
+                <code class="mr-16">selectedClass</code>
+                <span>
+                    The name of the Fuse color class to select, e.g. <code>md-red-500-bg</code>
+                </span>
+            </p>
+            <p class="py-8 pt-4" fxLayout="row" fxLayoutAlign="start center">
+                <code class="mr-16">selectedBg</code>
+                <span>
+                    The hex code of the color to be selected. It will be only selected if the hex code of the color
+                    matches one of the material colors.
+                </span>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Outputs</h2>
+            <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
+                <code class="mr-16">onValueChange</code>
+                <span>
+                    Event that triggered when a color selected. Returns an object that holds palette, hue, class name,
+                    background and foreground colors.
+                </span>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

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

@@ -0,0 +1,107 @@
+<div id="navigation" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Navigation</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-navigation</code> is a custom built Fuse component allows you to create a multi-level collapsable
+            navigation.
+        </p>
+
+        <!--<div class="my-48">
+            <h2>Sample</h2>
+            <p fxLayout="row" fxLayoutAlign="start start">
+                <fuse-navigation></fuse-navigation>
+            </p>
+        </div>-->
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="html" class="source-code">
+                    <textarea #source hidden="hidden">
+                        <fuse-navigation></fuse-navigation>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Model</h2>
+            <p class="py-8">
+                <code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a service and a model file to populate
+                the entire navigation. It supports three different navigation items; <b>Subheader</b>,
+                <b>Collapsable</b> and <b>Item</b>. These items can be mixed and matched to create unique and complex
+                navigation layouts.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h3>Header</h3>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="json" class="source-code">
+                    <textarea #source hidden="hidden">
+                        {
+                            'title': 'COMPONENTS',
+                            'type' : 'subheader'
+                        },
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h3>Collapsable</h3>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="json" class="source-code">
+                    <textarea #source hidden="hidden">
+                        {
+                            'title'   : 'Datatables',
+                            'type'    : 'nav-collapse',
+                            'icon'    : 'border_all',
+                            'children': [
+                                {
+                                    'title': 'ngx-datatable',
+                                    'type' : 'nav-item',
+                                    'url'  : '/components/datatables/ngx-datatable'
+                                }
+                            ]
+                        },
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h3>Item</h3>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="json" class="source-code">
+                    <textarea #source hidden="hidden">
+                        {
+                            'title': 'Countdown',
+                            'type' : 'nav-item',
+                            'icon' : 'settings_input_component',
+                            'url'  : '/components/countdown'
+                        },
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

src/app/main/content/components/price-tables/price-tables.component.html

@@ -6,7 +6,7 @@
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <md-icon class="secondary-text s-16">home</md-icon>
                 <md-icon class="secondary-text s-16">chevron_right</md-icon>
-                <span class="secondary-text">Tables</span>
+                <span class="secondary-text">Components</span>
             </div>
             <div class="h2 mt-16">Price Tables</div>
         </div>

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

@@ -0,0 +1,47 @@
+<div id="search-bar" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Search Bar</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-search-bar</code> is a custom built Fuse component allows you to have a search bar that activates
+            on click.
+        </p>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="html" class="source-code">
+                    <textarea #source hidden="hidden">
+                        <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Outputs</h2>
+            <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
+                <code class="mr-8">onInput</code>
+                <span>Triggers every time an input occurs within the search bar. Can be used to trigger the actual
+                search mechanism. The $event is the value from the search input.</span>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

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

@@ -0,0 +1,47 @@
+<div id="shortcuts" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Shortcuts</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-shortcuts</code> is a custom built Fuse component allows you to create and save shortcuts from
+            the navigation model.
+        </p>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="html" class="source-code">
+                    <textarea #source hidden="hidden">
+                        <fuse-shortcuts></fuse-shortcuts>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Model</h2>
+            <p class="py-8">
+                <code>&lt;fuse-shortcuts&gt;&lt;/fuse-shortcuts&gt;</code> uses the same service with navigation
+                component to populate the shortcuts. It can search the navigation items as well as pin and unpin them as
+                shortcuts. It uses browser cookies to store the shortcuts.
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

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

@@ -0,0 +1,108 @@
+<div id="widget" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Widget</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-widget</code> is a custom built Fuse component allows to create flippable widget boxes.
+        </p>
+
+        <div class="my-48">
+            <h2>Sample</h2>
+
+            <div>
+                <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+
+                    <!-- Front -->
+                    <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                        <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div>Widget title</div>
+
+                            <button md-icon-button fuseWidgetToggle aria-label="more">
+                                <md-icon>more_vert</md-icon>
+                            </button>
+                        </div>
+
+                        <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
+                            Widget Content
+                        </div>
+                    </div>
+                    <!-- / Front -->
+
+                    <!-- Back -->
+                    <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
+                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                ng-click="flipWidget()" aria-label="Flip widget">
+                            <md-icon class="s-16">close</md-icon>
+                        </button>
+
+                        <div>
+                            More widget info
+                        </div>
+                    </div>
+                    <!-- / Back -->
+
+                </fuse-widget>
+            </div>
+        </div>
+
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="html" class="source-code">
+                    <textarea #source hidden="hidden">
+                        <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
+
+                            <!-- Front -->
+                            <div class="fuse-widget-front md-white-bg mat-elevation-z2">
+                                <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
+                                    <div>Widget title</div>
+
+                                    <button md-icon-button fuseWidgetToggle aria-label="more">
+                                        <md-icon>more_vert</md-icon>
+                                    </button>
+                                </div>
+
+                                <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
+                                    Widget Content
+                                </div>
+                            </div>
+                            <!-- / Front -->
+
+                            <!-- Back -->
+                            <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
+                                <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button"
+                                        ng-click="flipWidget()" aria-label="Flip widget">
+                                    <md-icon class="s-16">close</md-icon>
+                                </button>
+
+                                <div>
+                                    More widget info
+                                </div>
+                            </div>
+                            <!-- / Back -->
+
+                        </fuse-widget>
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

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

@@ -0,0 +1,70 @@
+<div id="config" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Services</span>
+            </div>
+            <div class="h2 mt-16">Config</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>Config</code> is a custom built Fuse service allows to have a granule control over the Fuse. It can be
+            used for changing theme options (layout, color etc.) by component basis.
+        </p>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        export class SomeComponent
+                        {
+                            settings: any;
+
+                            constructor(private fuseConfig: FuseConfigService)
+                            {
+                                // Subscribe to settings changed event
+                                this.fuseConfig.onSettingsChanged.subscribe(
+                                    (newSettings) => {
+                                        this.settings = newSettings;
+                                    }
+                                );
+                            }
+
+                            onInit(){
+
+                                // Fully customizable surroundings for this particular component
+                                this.fuseConfig.setSettings({
+                                    layout          : {
+                                        navigation: 'left',   // 'right', 'left', 'top', none
+                                        toolbar   : 'below',  // 'above', 'below', none
+                                        footer    : 'none'    // 'above', 'below', none
+                                    },
+                                    colorClasses    : {
+                                        toolbar: 'md-white-500-bg',
+                                        navbar : 'md-fuse-dark-500-bg',
+                                        footer : 'md-fuse-dark-800-bg'
+                                    },
+                                    customScrollbars: true,
+                                    routerAnimation : 'fadeIn'
+                                });
+                            }
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { FuseConfigServiceDocsComponent } from './config/config.component';
+import { FuseSplashScreenServiceDocsComponent } from './splash-screen/splash-screen.component';
+
+const routes = [
+    {
+        path     : 'services/config',
+        component: FuseConfigServiceDocsComponent
+    },
+    {
+        path     : 'services/splash-screen',
+        component: FuseSplashScreenServiceDocsComponent
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        FuseConfigServiceDocsComponent,
+        FuseSplashScreenServiceDocsComponent
+    ]
+})
+export class ServicesModule
+{
+}

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

@@ -0,0 +1,47 @@
+<div id="splash-screen" class="page-layout simple fullwidth" perfect-scrollbar>
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">Services</span>
+            </div>
+            <div class="h2 mt-16">Splash Screen</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>Splash screen</code> is a custom built Fuse service allows to have a fully controllable splash
+            screen. It also has built state for application loading so it will always be available while the app
+            loads.
+        </p>
+
+        <div class="my-48">
+            <h2>Usage</h2>
+            <p class="md-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        export class SomeComponent
+                        {
+                            constructor(private fuseSplashScreen: FuseSplashScreenService) {}
+
+                            onInit(){
+                                this.fuseSplashScreen.show();
+                                this.fuseSplashScreen.hide();
+                            }
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+        </div>
+
+    </div>
+
+</div>
+

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

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

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

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

src/app/navigation.model.ts

@@ -304,10 +304,78 @@ export class FuseNavigation
                 'icon' : 'color_lens',
                 'url'  : '/ui/colors'
             },
+            {
+                'title': 'SERVICES',
+                'type' : 'subheader'
+            },
+            {
+                'title': 'Config',
+                'type' : 'nav-item',
+                'icon' : 'settings',
+                'url'  : '/services/config'
+            },
+            {
+                'title': 'Splash Screen',
+                'type' : 'nav-item',
+                'icon' : 'settings',
+                'url'  : '/services/splash-screen'
+            },
             {
                 'title': 'COMPONENTS',
                 'type' : 'subheader'
             },
+            {
+                'title': 'Countdown',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/countdown'
+            },
+            {
+                'title': 'Highlight.js',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/highlightjs'
+            },
+            {
+                'title': 'Material Color Picker',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/material-color-picker'
+            },
+            {
+                'title': 'Navigation',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/navigation'
+            },
+            {
+                'title': 'Price Tables',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/price-tables'
+            },
+            {
+                'title': 'Search Bar',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/search-bar'
+            },
+            {
+                'title': 'Shortcuts',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/shortcuts'
+            },
+            {
+                'title': 'Widget',
+                'type' : 'nav-item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/widget'
+            },
+            {
+                'title': '3RD PARTY COMPONENTS',
+                'type' : 'subheader'
+            },
             {
                 'title'   : 'Datatables',
                 'type'    : 'nav-collapse',
@@ -316,16 +384,10 @@ export class FuseNavigation
                     {
                         'title': 'ngx-datatable',
                         'type' : 'nav-item',
-                        'url'  : '/components/datatables/ngx-datatable'
+                        'url'  : '/components-third-party/datatables/ngx-datatable'
                     }
                 ]
             },
-            {
-                'title': 'Price Tables',
-                'type' : 'nav-item',
-                'icon' : 'view_carousel',
-                'url'  : '/components/price-tables'
-            }
         ];
     }
 }