Merge branch 'master' into skeleton

# Conflicts:
#	src/app/app.module.ts
#	src/app/app.theme.scss
#	src/app/fake-db/calendar.ts
#	src/app/layout/components/chat-panel/chat-panel.component.ts
#	src/app/main/apps/apps.module.ts
#	src/app/main/apps/calendar/calendar.component.html
#	src/app/main/apps/calendar/calendar.component.ts
#	src/app/main/apps/chat/chat-view/chat-view.component.ts
#	src/app/main/apps/contacts/contact-list/contact-list.component.html
#	src/app/main/apps/contacts/contact-list/contact-list.component.ts
#	src/app/main/apps/file-manager/file-list/file-list.component.html
#	src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html
#	src/app/main/apps/mail/mail-list/mail-list.component.html
#	src/app/main/apps/scrumboard/board/add-list/add-list.component.ts
#	src/app/main/apps/scrumboard/board/dialogs/card/card.component.ts
#	src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts
#	src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts
#	src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts
#	src/app/main/apps/scrumboard/board/list/list.component.ts
#	src/app/main/apps/todo/todo-details/todo-details.component.ts
#	src/app/main/apps/todo/todo-list/todo-list.component.html
#	src/app/main/documentation/changelog/changelog.component.html
#	src/app/main/documentation/documentation.module.ts
#	src/app/main/pages/coming-soon/coming-soon.component.html
#	src/app/main/ui/icons/icons.component.html
#	src/app/main/ui/ui.module.ts
#	src/app/navigation/navigation.ts
#	src/app/store/reducers/index.ts

angular.json

@@ -17,6 +17,7 @@
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
+            "aot": true,
                         "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "main": "src/main.ts",
@@ -54,14 +55,30 @@
                                     "type": "initial",
                                     "maximumWarning": "4mb",
                                     "maximumError": "6mb"
-                                }
+                                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
                             ]
                         },
                         "ec": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
                             "sourceMap": true,
                             "extractCss": true
                         },
                         "hmr": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
                             "fileReplacements": [
                                 {
                                     "replace": "src/environments/environment.ts",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse",
-    "version": "8.1.2",
+    "version": "9.0.0",
     "license": "https://themeforest.net/licenses/terms/regular",
     "scripts": {
         "ng": "ng",
@@ -18,71 +18,71 @@
     },
     "private": true,
     "dependencies": {
-        "@agm/core": "1.0.0-beta.7",
+        "@agm/core": "1.1.0",
-        "@angular/animations": "8.1.2",
+        "@angular/animations": "9.0.0",
-        "@angular/cdk": "8.1.1",
+        "@angular/cdk": "9.0.0",
-        "@angular/common": "8.1.2",
+        "@angular/common": "9.0.0",
-        "@angular/compiler": "8.1.2",
+        "@angular/compiler": "9.0.0",
-        "@angular/core": "8.1.2",
+        "@angular/core": "9.0.0",
-        "@angular/flex-layout": "8.0.0-beta.26",
+        "@angular/flex-layout": "9.0.0-beta.29",
-        "@angular/forms": "8.1.2",
+        "@angular/forms": "9.0.0",
-        "@angular/material": "8.1.1",
+        "@angular/material": "9.0.0",
-        "@angular/material-moment-adapter": "8.1.1",
+        "@angular/material-moment-adapter": "9.0.0",
-        "@angular/platform-browser": "8.1.2",
+        "@angular/platform-browser": "9.0.0",
-        "@angular/platform-browser-dynamic": "8.1.2",
+        "@angular/platform-browser-dynamic": "9.0.0",
-        "@angular/router": "8.1.2",
+        "@angular/router": "9.0.0",
-        "@ngrx/effects": "8.1.0",
+        "@ngrx/effects": "8.6.0",
-        "@ngrx/router-store": "8.1.0",
+        "@ngrx/router-store": "8.6.0",
-        "@ngrx/store": "8.1.0",
+        "@ngrx/store": "8.6.0",
-        "@ngrx/store-devtools": "8.1.0",
+        "@ngrx/store-devtools": "8.6.0",
-        "@ngx-translate/core": "11.0.1",
+        "@ngx-translate/core": "12.0.0",
         "@swimlane/dragula": "3.8.0",
-        "@swimlane/ngx-charts": "12.0.1",
+        "@swimlane/ngx-charts": "13.0.2",
-        "@swimlane/ngx-datatable": "15.0.2",
+        "@swimlane/ngx-datatable": "16.0.3",
-        "@swimlane/ngx-dnd": "8.0.0",
+        "@swimlane/ngx-dnd": "8.1.0",
         "@types/prismjs": "1.16.0",
-        "angular-calendar": "0.27.13",
+        "angular-calendar": "0.28.2",
-        "angular-in-memory-web-api": "0.8.0",
+        "angular-in-memory-web-api": "0.9.0",
-        "chart.js": "2.8.0",
+        "chart.js": "2.9.3",
         "classlist.js": "1.1.20150312",
-        "d3": "5.9.7",
+        "d3": "5.15.0",
-        "date-fns": "1.30.1",
+        "date-fns": "2.9.0",
         "hammerjs": "2.0.8",
         "lodash": "4.17.15",
         "moment": "2.24.0",
         "ng2-charts": "2.3.0",
         "ngrx-store-freeze": "0.2.4",
-        "ngx-color-picker": "8.1.0",
+        "ngx-color-picker": "8.2.0",
-        "ngx-cookie-service": "2.2.0",
+        "ngx-cookie-service": "2.3.0",
         "perfect-scrollbar": "1.4.0",
-        "prismjs": "1.16.0",
+        "prismjs": "1.19.0",
-        "rxjs": "6.5.2",
+        "rxjs": "6.5.4",
+        "tslib": "1.10.0",
         "web-animations-js": "2.3.2",
-        "zone.js": "0.9.1"
+        "zone.js": "0.10.2"
     },
     "devDependencies": {
-        "@angular/cli": "8.1.2",
+        "@angular/cli": "9.0.1",
-        "@angular/compiler-cli": "8.1.2",
+        "@angular/compiler-cli": "9.0.0",
-        "@angular/language-service": "8.1.2",
+        "@angular/language-service": "9.0.0",
-        "@angular-devkit/build-angular": "0.801.2",
+        "@angular-devkit/build-angular": "0.900.1",
         "@angularclass/hmr": "2.1.3",
-        "@types/jasmine": "3.3.14",
+        "@types/jasmine": "3.5.2",
-        "@types/jasminewd2": "2.0.6",
+        "@types/jasminewd2": "2.0.8",
-        "@types/lodash": "4.14.136",
+        "@types/lodash": "4.14.149",
-        "@types/node": "8.9.5",
+        "@types/node": "12.12.6",
-        "codelyzer": "5.1.0",
+        "codelyzer": "5.2.1",
-        "jasmine-core": "3.4.0",
+        "jasmine-core": "3.5.0",
         "jasmine-spec-reporter": "4.2.1",
-        "karma": "4.1.0",
+        "karma": "4.3.0",
-        "karma-chrome-launcher": "2.2.0",
+        "karma-chrome-launcher": "3.1.0",
-        "karma-coverage-istanbul-reporter": "2.0.5",
+        "karma-coverage-istanbul-reporter": "2.1.1",
         "karma-jasmine": "2.0.1",
-        "karma-jasmine-html-reporter": "1.4.2",
+        "karma-jasmine-html-reporter": "1.5.1",
-        "protractor": "5.4.2",
+        "protractor": "5.4.3",
-        "ts-node": "7.0.1",
+        "ts-node": "8.3.0",
-        "tslib": "1.10.0",
+        "tslint": "5.18.0",
-        "tslint": "5.15.0",
+        "typescript": "3.7.5",
-        "typescript": "3.4.5",
+        "webpack-bundle-analyzer": "3.6.0"
-        "webpack-bundle-analyzer": "3.3.2"
     }
 }

src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html

@@ -42,10 +42,10 @@
 
     <ng-template #itemContent>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
         </span>
         <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
     </ng-template>

src/@fuse/components/navigation/horizontal/item/item.component.html

@@ -38,10 +38,10 @@
 
     <ng-template #itemContent>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
         </span>
     </ng-template>
 

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html

@@ -45,10 +45,10 @@
 
     <ng-template #itemContent>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
         </span>
         <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
     </ng-template>

src/@fuse/components/navigation/vertical/group/group.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="!item.hidden">
 
     <div class="group-title" [ngClass]="item.classes">
-        <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
+        <span class="hint-text" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
     </div>
 
     <div class="group-items">

src/@fuse/components/navigation/vertical/item/item.component.html

@@ -38,10 +38,10 @@
 
     <ng-template #itemContent>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-title" [translate]="item.translate">{{(item.translate | translate) || item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
+            {{(item.badge.translate | translate) || item.badge.title}}
         </span>
     </ng-template>
 

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -23,10 +23,10 @@ export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
     @Input()
     navigation: any;
 
-    @ViewChild('searchInput', {static: false})
+    @ViewChild('searchInput')
     searchInputField;
 
-    @ViewChild('shortcuts', {static: false})
+    @ViewChild('shortcuts')
     shortcutsEl: ElementRef;
 
     // Private

src/@fuse/fuse.module.ts

@@ -13,7 +13,7 @@ export class FuseModule
         }
     }
 
-    static forRoot(config): ModuleWithProviders
+    static forRoot(config): ModuleWithProviders<FuseModule>
     {
         return {
             ngModule : FuseModule,

src/@fuse/scss/core.scss

@@ -2,7 +2,7 @@
 // to the core Fuse and Angular Material mixins
 
 // ngx-datatable
-@import '~@swimlane/ngx-datatable/release/themes/material';
+@import '~@swimlane/ngx-datatable/themes/material';
 
 // Perfect scrollbar
 @import '~perfect-scrollbar/css/perfect-scrollbar';

src/app/main/ui/angular-material/angular-material.component.html

@@ -0,0 +1,46 @@
+<div id="angular-material" class="page-layout simple tabbed" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
+
+        <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
+            <div fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-18">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">User Interface</span>
+            </div>
+            <div class="h1 mt-16">Angular Material</div>
+        </div>
+
+        <a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/components/categories"
+           target="_blank">
+            <mat-icon class="mr-8">link</mat-icon>
+            <span>Reference</span>
+        </a>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <div class="mat-title">Introduction</div>
+        <p>
+            Fuse uses Angular Material as its primary user interface library. It offers form controls, buttons, tabs, sidebars,
+            icons, modals, tooltips, data tables and many more well tested and widely used components.
+        </p>
+
+        <p>
+            Fuse is 100% compatible with all Angular Material components.
+        </p>
+
+        <div class="mat-title mt-32">Official docs</div>
+        <p>
+            Official Angular Material documentation: <a href="https://material.angular.io/components/categories" target="_blank">https://material.angular.io/components/categories</a>
+        </p>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>

src/app/main/ui/angular-material/angular-material.component.scss

@@ -0,0 +1,7 @@
+:host {
+
+    .content {
+        max-width: 1200px;
+    }
+
+}

src/app/main/ui/angular-material/angular-material.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'angular-material',
+    templateUrl: './angular-material.component.html',
+    styleUrls  : ['./angular-material.component.scss']
+})
+export class AngularMaterialComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}

src/app/main/ui/angular-material/angular-material.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+import { AngularMaterialComponent } from 'app/main/ui/angular-material/angular-material.component';
+
+const routes: Routes = [
+    {
+        path     : 'angular-material',
+        component: AngularMaterialComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        AngularMaterialComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule
+    ]
+})
+export class UIAngularMaterialModule
+{
+}

tsconfig.app.json

@@ -6,11 +6,11 @@
             "node"
         ]
     },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
     "include": [
-        "src/**/*.ts"
+        "src/**/*.d.ts"
-    ],
-    "exclude": [
-        "src/test.ts",
-        "src/**/*.spec.ts"
     ]
 }