Merge '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",

browserslist

@@ -5,12 +5,8 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-# Googlebot uses an older version of Chrome
-# For additional information see: https://developers.google.com/search/docs/guides/rendering
-
 > 0.5%
 last 2 versions
 Firefox ESR
-Chrome 41 # Support for Googlebot
 not dead
 not IE 9-11 # For IE 9-11 support, remove 'not'.

e2e/protractor.conf.js

@@ -1,8 +1,12 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const {SpecReporter} = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
     allScriptsTimeout: 11000,
     specs            : [
@@ -24,8 +28,8 @@ exports.config = {
     onPrepare()
     {
         require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.e2e.json')
+            project: require('path').join(__dirname, './tsconfig.json')
         });
         jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
     }
-};
+};

e2e/src/app.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { FusePage } from './app.po';
+import { browser, logging } from 'protractor';
 
 describe('Fuse App', () => {
     let page: FusePage;
@@ -11,4 +12,12 @@ describe('Fuse App', () => {
         page.navigateTo();
         expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
     });
+
+    afterEach(async () => {
+        // Assert that there are no errors emitted from the browser
+        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+        expect(logs).not.toContain(jasmine.objectContaining({
+            level: logging.Level.SEVERE
+        } as logging.Entry));
+    });
 });

e2e/src/app.po.ts

@@ -1,11 +1,14 @@
 import { browser, by, element } from 'protractor';
 
-export class FusePage {
-    navigateTo(): any {
-        return browser.get('/');
+export class FusePage
+{
+    navigateTo(): Promise<any>
+    {
+        return browser.get('/') as Promise<any>;
     }
 
-    getParagraphText(): any {
-        return element(by.css('app #main')).getText();
+    getParagraphText(): Promise<string>
+    {
+        return element(by.css('app #main')).getText() as Promise<string>;
     }
 }

e2e/tsconfig.e2e.json

@@ -1,13 +1,13 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
+}

e2e/tsconfig.json

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

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse",
-    "version": "8.0.0",
+    "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.5",
-        "@angular/animations": "8.0.0",
-        "@angular/cdk": "8.0.0",
-        "@angular/common": "8.0.0",
-        "@angular/compiler": "8.0.0",
-        "@angular/core": "8.0.0",
-        "@angular/flex-layout": "8.0.0-beta.26",
-        "@angular/forms": "8.0.0",
-        "@angular/material": "8.0.0",
-        "@angular/material-moment-adapter": "8.0.0",
-        "@angular/platform-browser": "8.0.0",
-        "@angular/platform-browser-dynamic": "8.0.0",
-        "@angular/router": "8.0.0",
-        "@ngrx/effects": "8.0.0-beta.2",
-        "@ngrx/router-store": "8.0.0-beta.2",
-        "@ngrx/store": "8.0.0-beta.2",
-        "@ngrx/store-devtools": "8.0.0-beta.2",
-        "@ngx-translate/core": "11.0.1",
+        "@agm/core": "1.1.0",
+        "@angular/animations": "9.0.0",
+        "@angular/cdk": "9.0.0",
+        "@angular/common": "9.0.0",
+        "@angular/compiler": "9.0.0",
+        "@angular/core": "9.0.0",
+        "@angular/flex-layout": "9.0.0-beta.29",
+        "@angular/forms": "9.0.0",
+        "@angular/material": "9.0.0",
+        "@angular/material-moment-adapter": "9.0.0",
+        "@angular/platform-browser": "9.0.0",
+        "@angular/platform-browser-dynamic": "9.0.0",
+        "@angular/router": "9.0.0",
+        "@ngrx/effects": "8.6.0",
+        "@ngrx/router-store": "8.6.0",
+        "@ngrx/store": "8.6.0",
+        "@ngrx/store-devtools": "8.6.0",
+        "@ngx-translate/core": "12.0.0",
         "@swimlane/dragula": "3.8.0",
-        "@swimlane/ngx-charts": "11.1.0",
-        "@swimlane/ngx-datatable": "15.0.0",
-        "@swimlane/ngx-dnd": "7.0.0",
+        "@swimlane/ngx-charts": "13.0.2",
+        "@swimlane/ngx-datatable": "16.0.3",
+        "@swimlane/ngx-dnd": "8.1.0",
         "@types/prismjs": "1.16.0",
-        "angular-calendar": "0.27.8",
-        "angular-in-memory-web-api": "0.8.0",
-        "chart.js": "2.8.0",
+        "angular-calendar": "0.28.2",
+        "angular-in-memory-web-api": "0.9.0",
+        "chart.js": "2.9.3",
         "classlist.js": "1.1.20150312",
-        "d3": "5.9.2",
-        "date-fns": "1.30.1",
+        "d3": "5.15.0",
+        "date-fns": "2.9.0",
         "hammerjs": "2.0.8",
-        "lodash": "4.17.11",
+        "lodash": "4.17.15",
         "moment": "2.24.0",
-        "ng2-charts": "2.2.4",
+        "ng2-charts": "2.3.0",
         "ngrx-store-freeze": "0.2.4",
-        "ngx-color-picker": "7.5.0",
-        "ngx-cookie-service": "2.2.0",
+        "ngx-color-picker": "8.2.0",
+        "ngx-cookie-service": "2.3.0",
         "perfect-scrollbar": "1.4.0",
-        "prismjs": "1.16.0",
-        "rxjs": "6.5.2",
-        "web-animations-js": "github:angular/web-animations-js#release_pr208",
-        "zone.js": "0.9.1"
+        "prismjs": "1.19.0",
+        "rxjs": "6.5.4",
+        "tslib": "1.10.0",
+        "web-animations-js": "2.3.2",
+        "zone.js": "0.10.2"
     },
     "devDependencies": {
-        "@angular/cli": "8.0.0",
-        "@angular/compiler-cli": "8.0.0",
-        "@angular/language-service": "8.0.0",
-        "@angular-devkit/build-angular": "0.800.0",
+        "@angular/cli": "9.0.1",
+        "@angular/compiler-cli": "9.0.0",
+        "@angular/language-service": "9.0.0",
+        "@angular-devkit/build-angular": "0.900.1",
         "@angularclass/hmr": "2.1.3",
-        "@types/jasmine": "3.3.13",
-        "@types/jasminewd2": "2.0.6",
-        "@types/lodash": "4.14.132",
-        "@types/node": "8.9.5",
-        "codelyzer": "5.0.1",
-        "jasmine-core": "3.4.0",
+        "@types/jasmine": "3.5.2",
+        "@types/jasminewd2": "2.0.8",
+        "@types/lodash": "4.14.149",
+        "@types/node": "12.12.6",
+        "codelyzer": "5.2.1",
+        "jasmine-core": "3.5.0",
         "jasmine-spec-reporter": "4.2.1",
-        "karma": "4.1.0",
-        "karma-chrome-launcher": "2.2.0",
-        "karma-coverage-istanbul-reporter": "2.0.5",
+        "karma": "4.3.0",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-coverage-istanbul-reporter": "2.1.1",
         "karma-jasmine": "2.0.1",
-        "karma-jasmine-html-reporter": "1.4.2",
-        "protractor": "5.4.2",
-        "ts-node": "7.0.1",
-        "tslib": "1.9.3",
-        "tslint": "5.15.0",
-        "typescript": "3.4.5",
-        "webpack-bundle-analyzer": "3.3.2"
+        "karma-jasmine-html-reporter": "1.5.1",
+        "protractor": "5.4.3",
+        "ts-node": "8.3.0",
+        "tslint": "5.18.0",
+        "typescript": "3.7.5",
+        "webpack-bundle-analyzer": "3.6.0"
     }
 }

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>
@@ -66,4 +66,4 @@
 
     </div>
 
-</ng-container>
+</ng-container>

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

@@ -38,11 +38,11 @@
 
     <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>
 
-</ng-container>
+</ng-container>

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/collapsable/collapsable.component.ts

@@ -203,23 +203,30 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
      */
     isChildrenOf(parent, item): boolean
     {
-        if ( !parent.children )
+        const children = parent.children;
+
+        if ( !children )
         {
             return false;
         }
 
-        if ( parent.children.indexOf(item) !== -1 )
+        if ( children.indexOf(item) > -1 )
         {
             return true;
         }
 
-        for ( const children of parent.children )
+        for ( const child of children )
         {
-            if ( children.children )
+            if ( child.children )
             {
-                return this.isChildrenOf(children, item);
+                if ( this.isChildrenOf(child, item) )
+                {
+                    return true;
+                }
             }
         }
+
+        return false;
     }
 
     /**
@@ -232,22 +239,24 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
      */
     isUrlInChildren(parent, url): boolean
     {
-        if ( !parent.children )
+        const children = parent.children;
+
+        if ( !children )
         {
             return false;
         }
 
-        for ( let i = 0; i < parent.children.length; i++ )
+        for ( const child of children )
         {
-            if ( parent.children[i].children )
+            if ( child.children )
             {
-                if ( this.isUrlInChildren(parent.children[i], url) )
+                if ( this.isUrlInChildren(child, url) )
                 {
                     return true;
                 }
             }
 
-            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
+            if ( child.url === url || url.includes(child.url) )
             {
                 return true;
             }

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">
@@ -13,4 +13,4 @@
         </ng-container>
     </div>
 
-</ng-container>
+</ng-container>

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

@@ -38,11 +38,11 @@
 
     <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>
 
-</ng-container>
+</ng-container>

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/@fuse/scss/partials/_angular-material-fix.scss

@@ -48,11 +48,6 @@ button {
     font-size: 16px;
 }
 
-.mat-pseudo-checkbox-checked:after {
-    width: 14px !important;
-    height: 7px !important;
-}
-
 // Fix: "Input underlines has wrong color opacity value"
 .mat-form-field-underline {
     background-color: rgba(0, 0, 0, 0.12);
@@ -118,4 +113,4 @@ mat-chip {
 // Fix: Mat-card-image requires a bigger width than 100%
 .mat-card-image {
     max-width: none !important;
-}
+}

src/@fuse/scss/partials/plugins/_ngx-datatable.scss

@@ -144,7 +144,7 @@
             .datatable-footer-inner {
                 padding: 0 24px;
 
-                @include media-breakpoint('sm') {
+                @include media-breakpoint('lt-md') {
                     flex-direction: column;
                     padding: 16px 0;
                     height: auto !important;
@@ -166,7 +166,18 @@
                         li {
 
                             a {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
                                 text-decoration: none !important;
+
+                                i {
+                                    width: 20px;
+                                    min-width: 20px;
+                                    height: 20px;
+                                    min-height: 20px;
+                                    padding: 0;
+                                }
                             }
                         }
                     }

src/main.ts

@@ -26,5 +26,5 @@ if ( environment.hmr )
 }
 else
 {
-    bootstrap().catch(err => console.log(err));
+    bootstrap().catch(err => console.error(err));
 }

src/polyfills.ts

@@ -57,6 +57,7 @@ import 'web-animations-js';  // Run `npm install --save web-animations-js`.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
+
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */

tsconfig.app.json

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

tsconfig.json

@@ -5,10 +5,10 @@
         "outDir": "./dist/out-tsc",
         "sourceMap": true,
         "declaration": false,
+        "downlevelIteration": true,
+        "experimentalDecorators": true,
         "module": "esnext",
         "moduleResolution": "node",
-        "emitDecoratorMetadata": true,
-        "experimentalDecorators": true,
         "importHelpers": true,
         "target": "es2015",
         "typeRoots": [
@@ -23,5 +23,9 @@
                 "@fuse/"
             ]
         }
+    },
+    "angularCompilerOptions": {
+        "fullTemplateTypeCheck": false,
+        "strictInjectionParameters": false
     }
 }

tslint.json

@@ -4,7 +4,7 @@
         "array-type": false,
         "arrow-parens": false,
         "deprecation": {
-            "severity": "warn"
+      "severity": "warning"
         },
         "component-class-suffix": true,
         "contextual-lifecycle": true,