Merge branch 'master' into skeleton

+ Added missing debounceTime imports to prevent errors

README.md

@@ -2,6 +2,12 @@
 
 Material Design Admin Template with Angular 5+ and Angular Material 2
 
+## The Community
+
+Share your ideas, discuss Fuse and help each other.
+
+[Click here](https://join.slack.com/t/fuse-theme/shared_invite/enQtMzA1NDE4NzYwMjcyLWQxODE4ODM1MWU4MWJjMDhlMGEwYzM4Mzg3N2E4YzVlZThhZjNlOTQ1Y2Q5OTBlNDNkMzJhZDIwMjgxOWQ3YWU) to join our Slack workspace.
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.2",
+  "version": "1.3.6",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,66 +19,67 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.1.3",
-    "@angular/cdk": "5.0.3",
-    "@angular/common": "5.1.3",
-    "@angular/compiler": "5.1.3",
-    "@angular/core": "5.1.3",
+    "@angular/animations": "5.2.3",
+    "@angular/cdk": "5.1.1",
+    "@angular/common": "5.2.3",
+    "@angular/compiler": "5.2.3",
+    "@angular/core": "5.2.3",
     "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.1.3",
-    "@angular/http": "5.1.3",
-    "@angular/material": "5.0.3",
-    "@angular/material-moment-adapter": "5.0.3",
-    "@angular/platform-browser": "5.1.3",
-    "@angular/platform-browser-dynamic": "5.1.3",
-    "@angular/router": "5.1.3",
-    "@ngrx/effects": "4.1.1",
-    "@ngrx/router-store": "4.1.1",
-    "@ngrx/store": "4.1.1",
-    "@ngrx/store-devtools": "4.1.1",
-    "@ngx-translate/core": "9.0.2",
+    "@angular/forms": "5.2.3",
+    "@angular/http": "5.2.3",
+    "@angular/material": "5.1.1",
+    "@angular/material-moment-adapter": "5.1.1",
+    "@angular/platform-browser": "5.2.3",
+    "@angular/platform-browser-dynamic": "5.2.3",
+    "@angular/router": "5.2.3",
+    "@ngrx/effects": "5.0.0",
+    "@ngrx/router-store": "5.0.0",
+    "@ngrx/store": "5.0.0",
+    "@ngrx/store-devtools": "5.0.0",
+    "@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.1",
-    "angular-in-memory-web-api": "0.5.2",
+    "angular-calendar": "0.23.3",
+    "angular-in-memory-web-api": "0.5.3",
+    "chart.js": "2.7.1",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.3",
-    "d3": "4.12.2",
+    "d3": "4.13.0",
     "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",
+    "ng2-charts": "1.6.0",
+    "ngrx-store-freeze": "0.2.1",
+    "ngx-color-picker": "5.3.1",
+    "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.9.0",
+    "prismjs": "1.11.0",
     "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.19"
+    "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.3",
-    "@angular/compiler-cli": "5.1.3",
-    "@angular/language-service": "5.1.3",
+    "@angular/cli": "1.6.7",
+    "@angular/compiler-cli": "5.2.3",
+    "@angular/language-service": "5.2.3",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.5.54",
+    "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "6.0.96",
-    "codelyzer": "4.0.2",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.3",
+    "codelyzer": "4.1.0",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-coverage-istanbul-reporter": "1.4.1",
     "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",
-    "webpack-bundle-analyzer": "2.9.2"
+    "ts-node": "4.1.0",
+    "tslint": "5.9.1",
+    "typescript": "2.6.2",
+    "webpack-bundle-analyzer": "2.10.0"
   }
 }

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

@@ -22,6 +22,7 @@ import { FuseMaterialColorPickerComponent } from '../components/material-color-p
 import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
 import { TranslateModule } from '@ngx-translate/core';
+import { ChartsModule } from 'ng2-charts';
 
 @NgModule({
     declarations   : [
@@ -43,7 +44,8 @@ import { TranslateModule } from '@ngx-translate/core';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule
+        NgxDatatableModule,
+        ChartsModule
     ],
     exports        : [
         FlexLayoutModule,
@@ -62,7 +64,8 @@ import { TranslateModule } from '@ngx-translate/core';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        TranslateModule
+        TranslateModule,
+        ChartsModule
     ],
     entryComponents: [
         FuseConfirmDialogComponent

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/_cards.scss

@@ -9,6 +9,11 @@
         min-width: 0;
     }
 
+    &.auto-width {
+        min-width: 0;
+        max-width: none;
+    }
+
     // Buttons
     .mat-button {
         min-width: 0 !important;

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

@@ -215,4 +215,31 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
 // ######################
 .border-radius-100 {
     border-radius: 100%;
+}
+
+.border-radius-2 {
+    border-radius: 2px;
+}
+
+.border-radius-4 {
+    border-radius: 4px;
+}
+
+.border-radius-8 {
+    border-radius: 8px;
+}
+
+.border-radius-16 {
+    border-radius: 16px;
+}
+
+// ######################
+// CURSOR HELPERS
+// ######################
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.cursor-default {
+    cursor: default;
 }

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/services/splash-screen.service.ts

@@ -15,18 +15,27 @@ export class FuseSplashScreenService
         private router: Router
     )
     {
+        // Get the splash screen element
         this.splashScreenEl = this.document.body.querySelector('#fuse-splash-screen');
 
-        const hideOnLoad = this.router.events.subscribe((event) => {
-                if ( event instanceof NavigationEnd )
-                {
-                    setTimeout(() => {
-                        this.hide();
-                        hideOnLoad.unsubscribe();
-                    }, 0);
+        // If the splash screen element exists...
+        if ( this.splashScreenEl )
+        {
+            // Hide it on the first NavigationEnd event
+            const hideOnLoad = this.router.events.subscribe((event) => {
+                    if ( event instanceof NavigationEnd )
+                    {
+                        setTimeout(() => {
+                            this.hide();
+
+                            // Unsubscribe from this event so it
+                            // won't get triggered again
+                            hideOnLoad.unsubscribe();
+                        }, 0);
+                    }
                 }
-            }
-        );
+            );
+        }
     }
 
     show()

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;