Merge remote-tracking branch 'origin/demo' into starter

Updated the changelog

.eslintrc.json

@@ -0,0 +1,95 @@
+{
+    "root": true,
+    "env": {
+        "es6": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
+    "ignorePatterns": [
+        "projects/**/*"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "parserOptions": {
+                "project": [
+                    "tsconfig.json"
+                ],
+                "createDefaultProgram": true
+            },
+            "extends": [
+                "plugin:@angular-eslint/ng-cli-compat",
+                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+                "plugin:@angular-eslint/template/process-inline-templates"
+            ],
+            "rules": {
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "",
+                        "style": "kebab-case"
+                    }
+                ],
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "",
+                        "style": "camelCase"
+                    }
+                ],
+                "@typescript-eslint/dot-notation": "off",
+                "@typescript-eslint/explicit-function-return-type": "error",
+                "@typescript-eslint/explicit-member-accessibility": [
+                    "off",
+                    {
+                        "accessibility": "explicit"
+                    }
+                ],
+                "@typescript-eslint/no-inferrable-types": "off",
+                "arrow-parens": [
+                    "error",
+                    "as-needed",
+                    {
+                        "requireForBlockBody": true
+                    }
+                ],
+                "brace-style": [
+                    "off",
+                    "off"
+                ],
+                "import/order": "off",
+                "max-len": [
+                    "error",
+                    {
+                        "ignorePattern": "^import |^export | implements",
+                        "code": 180
+                    }
+                ],
+                "no-underscore-dangle": "off",
+                "object-shorthand": "off",
+                "quote-props": [
+                    "error",
+                    "consistent"
+                ],
+                "quotes": [
+                    "error",
+                    "single"
+                ]
+            }
+        },
+        {
+            "files": [
+                "*.html"
+            ],
+            "extends": [
+                "plugin:@angular-eslint/template/recommended"
+            ],
+            "rules": {}
+        }
+    ]
+}

.gitignore

@@ -12,7 +12,6 @@
 
 # profiling files
 chrome-profiler-events*.json
-speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea

CREDITS

@@ -2,6 +2,9 @@
 // @ 3rd party credits
 // -----------------------------------------------------------------------------------------------------
 
+// Flags
+https://github.com/Yummygum/flagpack-core
+
 // Icons
 Material - https://material.io/tools/icons
 Feather - https://feathericons.com/

README.md

@@ -1,5 +1,7 @@
 # Fuse - Admin template and Starter project for Angular
 
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli)
+
 ## 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.
@@ -18,8 +20,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -22,7 +22,7 @@
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.app.json",
-                        "aot": true,
+                        "inlineStyleLanguage": "scss",
                         "allowedCommonJsDependencies": [
                             "apexcharts",
                             "highlight.js",
@@ -33,7 +33,12 @@
                         "assets": [
                             "src/favicon-16x16.png",
                             "src/favicon-32x32.png",
-                            "src/assets"
+                            "src/assets",
+                            {
+                                "glob": "_redirects",
+                                "input": "src",
+                                "output": "/"
+                            }
                         ],
                         "stylePreprocessorOptions": {
                             "includePaths": [
@@ -52,19 +57,6 @@
                     },
                     "configurations": {
                         "production": {
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.prod.ts"
-                                }
-                            ],
-                            "optimization": true,
-                            "outputHashing": "all",
-                            "sourceMap": false,
-                            "namedChunks": false,
-                            "extractLicenses": true,
-                            "vendorChunk": false,
-                            "buildOptimizer": true,
                             "budgets": [
                                 {
                                     "type": "initial",
@@ -76,20 +68,37 @@
                                     "maximumWarning": "100kb",
                                     "maximumError": "150kb"
                                 }
-                            ]
+                            ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
                                 }
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
                         }
                     },
+                    "defaultConfiguration": "production"
+                },
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
-                    "options": {
-                        "browserTarget": "fuse:build"
-                    },
                     "configurations": {
                         "production": {
                             "browserTarget": "fuse:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "fuse:build:development"
                         }
-                    }
+                    },
+                    "defaultConfiguration": "development"
                 },
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -104,6 +113,7 @@
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.spec.json",
                         "karmaConfig": "karma.conf.js",
+                        "inlineStyleLanguage": "scss",
                         "assets": [
                             "src/favicon-16x16.png",
                             "src/favicon-32x32.png",
@@ -116,15 +126,11 @@
                     }
                 },
                 "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
+                    "builder": "@angular-eslint/builder:lint",
                     "options": {
-                        "tsConfig": [
+                        "lintFilePatterns": [
-                            "tsconfig.app.json",
+                            "src/**/*.ts",
-                            "tsconfig.spec.json",
+                            "src/**/*.html"
-                            "e2e/tsconfig.json"
-                        ],
-                        "exclude": [
-                            "**/node_modules/**"
                         ]
                     }
                 },
@@ -143,5 +149,8 @@
             }
         }
     },
-    "defaultProject": "fuse"
+    "defaultProject": "fuse",
+    "cli": {
+        "defaultCollection": "@angular-eslint/schematics"
+    }
 }

e2e/protractor.conf.js

@@ -1,40 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const {SpecReporter, StacktraceOption} = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-    allScriptsTimeout       : 11000,
-    specs                   : [
-        './src/**/*.e2e-spec.ts'
-    ],
-    capabilities            : {
-        browserName: 'chrome'
-    },
-    directConnect           : true,
-    SELENIUM_PROMISE_MANAGER: false,
-    baseUrl                 : 'http://localhost:4200/',
-    framework               : 'jasmine',
-    jasmineNodeOpts         : {
-        showColors            : true,
-        defaultTimeoutInterval: 30000,
-        print                 : function ()
-        {
-        }
-    },
-    onPrepare()
-    {
-        require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.json')
-        });
-        jasmine.getEnv().addReporter(new SpecReporter({
-            spec: {
-                displayStacktrace: StacktraceOption.PRETTY
-            }
-        }));
-    }
-};

e2e/src/app.e2e-spec.ts

@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-    let page: AppPage;
-
-    beforeEach(() => {
-        page = new AppPage();
-    });
-
-    it('should display welcome message', async () => {
-        await page.navigateTo();
-        expect(await page.getTitleText()).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,14 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage
-{
-    async navigateTo(): Promise<unknown>
-    {
-        return browser.get(browser.baseUrl);
-    }
-
-    async getTitleText(): Promise<string>
-    {
-        return element(by.css('app-root h1')).getText();
-    }
-}

e2e/tsconfig.json

@@ -1,13 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "../out-tsc/e2e",
-        "module": "commonjs",
-        "target": "es2018",
-        "types": [
-            "jasmine",
-            "node"
-        ]
-    }
-}

karma.conf.js

@@ -26,7 +26,7 @@ module.exports = function (config)
             suppressAll: true // removes the duplicated traces
         },
         coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/angular11'),
+            dir      : require('path').join(__dirname, './coverage/angular12'),
             subdir   : '.',
             reporters: [
                 {type: 'html'},

package.json

@@ -1,28 +1,28 @@
 {
     "name": "@fuse/demo",
-    "version": "12.2.0",
+    "version": "13.0.2",
     "license": "https://themeforest.net/licenses/standard",
     "private": true,
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
-        "build": "ng build --prod",
+        "build": "ng build",
         "test": "ng test",
         "lint": "ng lint",
         "e2e": "ng e2e"
     },
     "dependencies": {
-        "@angular/animations": "11.2.12",
+        "@angular/animations": "12.0.0",
-        "@angular/cdk": "11.2.11",
+        "@angular/cdk": "12.0.0",
-        "@angular/common": "11.2.12",
+        "@angular/common": "12.0.0",
-        "@angular/compiler": "11.2.12",
+        "@angular/compiler": "12.0.0",
-        "@angular/core": "11.2.12",
+        "@angular/core": "12.0.0",
-        "@angular/forms": "11.2.12",
+        "@angular/forms": "12.0.0",
-        "@angular/material": "11.2.11",
+        "@angular/material": "12.0.0",
-        "@angular/material-moment-adapter": "11.2.11",
+        "@angular/material-moment-adapter": "12.0.0",
-        "@angular/platform-browser": "11.2.12",
+        "@angular/platform-browser": "12.0.0",
-        "@angular/platform-browser-dynamic": "11.2.12",
+        "@angular/platform-browser-dynamic": "12.0.0",
-        "@angular/router": "11.2.12",
+        "@angular/router": "12.0.0",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -31,15 +31,16 @@
         "@fullcalendar/moment": "4.4.2",
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
-        "apexcharts": "3.26.1",
+        "@ngneat/transloco": "2.20.1",
+        "apexcharts": "3.26.3",
         "crypto-js": "3.3.0",
         "highlight.js": "10.7.2",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
-        "ng-apexcharts": "1.5.9",
+        "ng-apexcharts": "1.5.10",
-        "ngx-markdown": "11.1.3",
+        "ngx-markdown": "12.0.0",
-        "ngx-quill": "13.3.1",
+        "ngx-quill": "14.0.0",
-        "perfect-scrollbar": "1.5.0",
+        "perfect-scrollbar": "1.5.1",
         "quill": "1.3.7",
         "rrule": "2.6.8",
         "rxjs": "6.6.7",
@@ -48,36 +49,44 @@
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "0.1102.11",
+        "@angular-devkit/build-angular": "12.0.0",
-        "@angular/cli": "11.2.11",
+        "@angular-eslint/builder": "12.0.0",
-        "@angular/compiler-cli": "11.2.12",
+        "@angular-eslint/eslint-plugin": "12.0.0",
-        "@angular/language-service": "11.2.12",
+        "@angular-eslint/eslint-plugin-template": "12.0.0",
+        "@angular-eslint/schematics": "12.0.0",
+        "@angular-eslint/template-parser": "12.0.0",
+        "@angular/cli": "12.0.0",
+        "@angular/compiler-cli": "12.0.0",
+        "@angular/language-service": "12.0.0",
         "@tailwindcss/aspect-ratio": "0.2.0",
         "@tailwindcss/line-clamp": "0.2.0",
         "@tailwindcss/typography": "0.4.0",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.6.9",
+        "@types/jasmine": "3.6.11",
-        "@types/lodash": "4.14.168",
+        "@types/lodash": "4.14.169",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.10",
+        "@types/node": "12.20.13",
+        "@typescript-eslint/eslint-plugin": "4.24.0",
+        "@typescript-eslint/parser": "4.24.0",
         "autoprefixer": "10.2.5",
-        "chroma-js": "2.1.1",
+        "chroma-js": "2.1.2",
-        "codelyzer": "6.0.1",
+        "eslint": "7.26.0",
-        "jasmine-core": "3.6.0",
+        "eslint-plugin-import": "2.23.2",
+        "eslint-plugin-jsdoc": "34.8.2",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "jasmine-core": "3.7.1",
         "jasmine-spec-reporter": "5.0.2",
-        "karma": "6.1.2",
+        "karma": "6.3.2",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
-        "karma-jasmine-html-reporter": "1.5.4",
+        "karma-jasmine-html-reporter": "1.6.0",
         "lodash": "4.17.21",
-        "postcss": "8.2.13",
+        "postcss": "8.3.0",
         "protractor": "7.0.0",
         "tailwindcss": "2.1.2",
-        "ts-node": "8.3.0",
+        "typescript": "4.2.4"
-        "tslint": "6.1.3",
-        "typescript": "4.1.5"
     }
 }

src/@fuse/animations/defaults.ts

@@ -1,14 +1,14 @@
 export class FuseAnimationCurves
 {
-    static STANDARD_CURVE = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+    static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
-    static DECELERATION_CURVE = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+    static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
-    static ACCELERATION_CURVE = 'cubic-bezier(0.4, 0.0, 1, 1)';
+    static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)';
-    static SHARP_CURVE = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
+    static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
 }
 
 export class FuseAnimationDurations
 {
-    static COMPLEX = '375ms';
+    static complex = '375ms';
-    static ENTERING = '225ms';
+    static entering = '225ms';
-    static EXITING = '195ms';
+    static exiting = '195ms';
 }

src/@fuse/animations/expand-collapse.ts

@@ -24,7 +24,7 @@ const expandCollapse = trigger('expandCollapse',
             animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )

src/@fuse/animations/fade.ts

@@ -25,7 +25,7 @@ const fadeIn = trigger('fadeIn',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -58,7 +58,7 @@ const fadeInTop = trigger('fadeInTop',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -91,7 +91,7 @@ const fadeInBottom = trigger('fadeInBottom',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -124,7 +124,7 @@ const fadeInLeft = trigger('fadeInLeft',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -157,7 +157,7 @@ const fadeInRight = trigger('fadeInRight',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -188,7 +188,7 @@ const fadeOut = trigger('fadeOut',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -221,7 +221,7 @@ const fadeOutTop = trigger('fadeOutTop',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -254,7 +254,7 @@ const fadeOutBottom = trigger('fadeOutBottom',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -287,7 +287,7 @@ const fadeOutLeft = trigger('fadeOutLeft',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -320,7 +320,7 @@ const fadeOutRight = trigger('fadeOutRight',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )

src/@fuse/animations/index.ts

@@ -1 +1 @@
-export * from './public-api';
+export * from '@fuse/animations/public-api';

src/@fuse/animations/public-api.ts

@@ -1,10 +1,10 @@
-import { expandCollapse } from './expand-collapse';
+import { expandCollapse } from '@fuse/animations/expand-collapse';
-import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from './fade';
+import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
-import { shake } from './shake';
+import { shake } from '@fuse/animations/shake';
-import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from './slide';
+import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
-import { zoomIn, zoomOut } from './zoom';
+import { zoomIn, zoomOut } from '@fuse/animations/zoom';
 
-export const FuseAnimations = [
+export const fuseAnimations = [
     expandCollapse,
     fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
     fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,

src/@fuse/animations/slide.ts

@@ -25,7 +25,7 @@ const slideInTop = trigger('slideInTop',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -56,7 +56,7 @@ const slideInBottom = trigger('slideInBottom',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -87,7 +87,7 @@ const slideInLeft = trigger('slideInLeft',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -118,7 +118,7 @@ const slideInRight = trigger('slideInRight',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -149,7 +149,7 @@ const slideOutTop = trigger('slideOutTop',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -180,7 +180,7 @@ const slideOutBottom = trigger('slideOutBottom',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -211,7 +211,7 @@ const slideOutLeft = trigger('slideOutLeft',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )
@@ -242,7 +242,7 @@ const slideOutRight = trigger('slideOutRight',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )

src/@fuse/animations/zoom.ts

@@ -28,7 +28,7 @@ const zoomIn = trigger('zoomIn',
         transition('void => *', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.ENTERING} ${FuseAnimationCurves.DECELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
                 }
             }
         )
@@ -62,7 +62,7 @@ const zoomOut = trigger('zoomOut',
         transition('* => void', animate('{{timings}}'),
             {
                 params: {
-                    timings: `${FuseAnimationDurations.EXITING} ${FuseAnimationCurves.ACCELERATION_CURVE}`
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
                 }
             }
         )

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Ho
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
 import { FuseAlertService } from '@fuse/components/alert/alert.service';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@@ -13,14 +13,16 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
     styleUrls      : ['./alert.component.scss'],
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    animations     : FuseAnimations,
+    animations     : fuseAnimations,
     exportAs       : 'fuseAlert'
 })
 export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_dismissible: BooleanInput;
     static ngAcceptInputType_dismissed: BooleanInput;
     static ngAcceptInputType_showIcon: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() appearance: FuseAlertAppearance = 'soft';
     @Input() dismissed: boolean = false;
@@ -115,7 +117,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
         // Subscribe to the dismiss calls
         this._fuseAlertService.onDismiss
             .pipe(
-                filter((name) => this.name === name),
+                filter(name => this.name === name),
                 takeUntil(this._unsubscribeAll)
             )
             .subscribe(() => {
@@ -127,7 +129,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
         // Subscribe to the show calls
         this._fuseAlertService.onShow
             .pipe(
-                filter((name) => this.name === name),
+                filter(name => this.name === name),
                 takeUntil(this._unsubscribeAll)
             )
             .subscribe(() => {

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

@@ -1,6 +1,6 @@
 import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations';
 import { FuseCardFace } from '@fuse/components/card/card.types';
 
 @Component({
@@ -8,13 +8,15 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
     templateUrl  : './card.component.html',
     styleUrls    : ['./card.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    animations   : FuseAnimations,
+    animations   : fuseAnimations,
     exportAs     : 'fuseCard'
 })
 export class FuseCardComponent implements OnChanges
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_expanded: BooleanInput;
     static ngAcceptInputType_flippable: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() expanded: boolean = false;
     @Input() face: FuseCardFace = 'front';

src/@fuse/components/date-range/date-range.component.ts

@@ -23,14 +23,14 @@ import { Moment } from 'moment';
 })
 export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnDestroy
 {
-    @Output() readonly rangeChanged: EventEmitter<{ start: string, end: string }> = new EventEmitter<{ start: string; end: string }>();
+    @Output() readonly rangeChanged: EventEmitter<{ start: string; end: string }> = new EventEmitter<{ start: string; end: string }>();
     @ViewChild('matMonthView1') private _matMonthView1: MatMonthView<any>;
     @ViewChild('matMonthView2') private _matMonthView2: MatMonthView<any>;
     @ViewChild('pickerPanelOrigin', {read: ElementRef}) private _pickerPanelOrigin: ElementRef;
     @ViewChild('pickerPanel') private _pickerPanel: TemplateRef<any>;
     @HostBinding('class.fuse-date-range') private _defaultClassNames = true;
 
-    activeDates: { month1: Moment | null, month2: Moment | null } = {
+    activeDates: { month1: Moment | null; month2: Moment | null } = {
         month1: null,
         month2: null
     };
@@ -41,7 +41,7 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
     private _onChange: (value: any) => void;
     private _onTouched: (value: any) => void;
     private _programmaticChange!: boolean;
-    private _range: { start: Moment | null, end: Moment | null } = {
+    private _range: { start: Moment | null; end: Moment | null } = {
         start: null,
         end  : null
     };
@@ -61,9 +61,9 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
         private _viewContainerRef: ViewContainerRef
     )
     {
-        this._onChange = () => {
+        this._onChange = (): void => {
         };
-        this._onTouched = () => {
+        this._onTouched = (): void => {
         };
         this.dateFormat = 'DD/MM/YYYY';
         this.timeFormat = '12';
@@ -330,7 +330,7 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
      *
      * @param range
      */
-    writeValue(range: { start: string, end: string }): void
+    writeValue(range: { start: string; end: string }): void
     {
         // Set this change as a programmatic one
         this._programmaticChange = true;
@@ -361,7 +361,7 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
         this._unsubscribeAll.complete();
 
         // @ TODO: Workaround until "angular/issues/20007" resolved
-        this.writeValue = () => {
+        this.writeValue = (): void => {
         };
     }
 
@@ -481,11 +481,8 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
      */
     dateFilter(): any
     {
-        return (date: Moment): boolean => {
-
         // If we are selecting the end date, disable all the dates that comes before the start date
-            return !(this.setWhichDate === 'end' && date.isBefore(this._range.start, 'day'));
+        return (date: Moment): boolean => !(this.setWhichDate === 'end' && date.isBefore(this._range.start, 'day'));
-        };
     }
 
     /**
@@ -667,7 +664,7 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
     private _parseTime(value: string): Moment
     {
         // Parse the time using the time regexp
-        const timeArr = value.split(this._timeRegExp).filter((part) => part !== '');
+        const timeArr = value.split(this._timeRegExp).filter(part => part !== '');
 
         // Get the meridiem
         const meridiem = timeArr[2] || null;

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

@@ -14,9 +14,11 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 })
 export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_fixed: BooleanInput;
     static ngAcceptInputType_opened: BooleanInput;
     static ngAcceptInputType_transparentOverlay: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() fixed: boolean = false;
     @Input() mode: FuseDrawerMode = 'side';
@@ -76,6 +78,40 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         };
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On mouseenter
+     *
+     * @private
+     */
+    @HostListener('mouseenter')
+    private _onMouseenter(): void
+    {
+        // Enable the animations
+        this._enableAnimations();
+
+        // Set the hovered
+        this._hovered = true;
+    }
+
+    /**
+     * On mouseleave
+     *
+     * @private
+     */
+    @HostListener('mouseleave')
+    private _onMouseleave(): void
+    {
+        // Enable the animations
+        this._enableAnimations();
+
+        // Set the hovered
+        this._hovered = false;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
@@ -347,36 +383,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         });
     }
 
-    /**
-     * On mouseenter
-     *
-     * @private
-     */
-    @HostListener('mouseenter')
-    private _onMouseenter(): void
-    {
-        // Enable the animations
-        this._enableAnimations();
-
-        // Set the hovered
-        this._hovered = true;
-    }
-
-    /**
-     * On mouseleave
-     *
-     * @private
-     */
-    @HostListener('mouseleave')
-    private _onMouseleave(): void
-    {
-        // Enable the animations
-        this._enableAnimations();
-
-        // Set the hovered
-        this._hovered = false;
-    }
-
     /**
      * Open/close the drawer
      *

src/@fuse/components/highlight/highlight.service.ts

@@ -60,7 +60,7 @@ export class FuseHighlightService
         }
 
         // Iterate through the lines
-        lines.filter((line) => line.length)
+        lines.filter(line => line.length)
              .forEach((line, index) => {
 
                  // Always get the indentation of the first line so we can
@@ -77,6 +77,6 @@ export class FuseHighlightService
 
         // Iterate through the lines one more time, remove the extra
         // indentation, join them together and return it
-        return lines.map((line) => line.substring(indentation)).join('\n');
+        return lines.map(line => line.substring(indentation)).join('\n');
     }
 }

src/@fuse/components/masonry/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/components/masonry/public-api';

src/@fuse/components/masonry/masonry.component.html

@@ -0,0 +1,3 @@
+<div class="flex">
+    <ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
+</div>

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

@@ -0,0 +1,87 @@
+import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+
+@Component({
+    selector     : 'fuse-masonry',
+    templateUrl  : './masonry.component.html',
+    styleUrls    : ['./masonry.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations,
+    exportAs     : 'fuseMasonry'
+})
+export class FuseMasonryComponent implements OnChanges, AfterViewInit
+{
+    @Input() columnsTemplate: TemplateRef<any>;
+    @Input() columns: number;
+    @Input() items: any[] = [];
+    distributedColumns: any[] = [];
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Columns
+        if ( 'columns' in changes )
+        {
+            // Distribute the items
+            this._distributeItems();
+        }
+
+        // Items
+        if ( 'items' in changes )
+        {
+            // Distribute the items
+            this._distributeItems();
+        }
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Distribute the items for the first time
+        this._distributeItems();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Distribute items into columns
+     */
+    private _distributeItems(): void
+    {
+        // Return an empty array if there are no items
+        if ( this.items.length === 0 )
+        {
+            this.distributedColumns = [];
+            return;
+        }
+
+        // Prepare the distributed columns array
+        this.distributedColumns = Array.from(Array(this.columns), item => ({items: []}));
+
+        // Distribute the items to columns
+        for ( let i = 0; i < this.items.length; i++ )
+        {
+            this.distributedColumns[i % this.columns].items.push(this.items[i]);
+        }
+    }
+}

src/@fuse/components/masonry/masonry.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
+
+@NgModule({
+    declarations: [
+        FuseMasonryComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseMasonryComponent
+    ]
+})
+export class FuseMasonryModule
+{
+}

src/@fuse/components/masonry/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@fuse/components/masonry/masonry.component';
+export * from '@fuse/components/masonry/masonry.module';

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

@@ -11,7 +11,7 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        [routerLinkActiveOptions]="isActiveMatchOptions">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
@@ -39,7 +39,7 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>

src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts

@@ -1,9 +1,11 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-basic-item',
@@ -16,6 +18,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     @Input() item: FuseNavigationItem;
     @Input() name: string;
 
+    isActiveMatchOptions: IsActiveMatchOptions;
     private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -24,9 +27,15 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseUtilsService: FuseUtilsService
     )
     {
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -38,9 +47,20 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
      */
     ngOnInit(): void
     {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._fuseUtilsService.exactMatchOptions
+                : this._fuseUtilsService.subsetMatchOptions;
+
         // Get the parent navigation component
         this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
 
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         // Subscribe to onRefreshed on the navigation component
         this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
             takeUntil(this._unsubscribeAll)

src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts

@@ -15,7 +15,9 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 })
 export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_child: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() child: boolean = false;
     @Input() item: FuseNavigationItem;

src/@fuse/components/navigation/horizontal/horizontal.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ReplaySubject, Subject } from 'rxjs';
-import { FuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
@@ -9,7 +9,7 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
     selector       : 'fuse-horizontal-navigation',
     templateUrl    : './horizontal.component.html',
     styleUrls      : ['./horizontal.component.scss'],
-    animations     : FuseAnimations,
+    animations     : fuseAnimations,
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'fuseHorizontalNavigation'

src/@fuse/components/navigation/navigation.service.ts

@@ -46,7 +46,7 @@ export class FuseNavigationService
      *
      * @param name
      */
-    getComponent(name: string): any
+    getComponent<T>(name: string): T
     {
         return this._componentRegistry.get(name);
     }
@@ -67,7 +67,6 @@ export class FuseNavigationService
      * Get navigation from storage by key
      *
      * @param key
-     * @returns {any}
      */
     getNavigation(key: string): FuseNavigationItem[]
     {
@@ -97,7 +96,6 @@ export class FuseNavigationService
      *
      * @param navigation
      * @param flatNavigation
-     * @returns {FuseNavigationItem[]}
      */
     getFlatNavigation(navigation: FuseNavigationItem[], flatNavigation: FuseNavigationItem[] = []): FuseNavigationItem[]
     {

src/@fuse/components/navigation/navigation.types.ts

@@ -1,3 +1,5 @@
+import { IsActiveMatchOptions } from '@angular/router';
+
 export interface FuseNavigationItem
 {
     id?: string;
@@ -16,6 +18,7 @@ export interface FuseNavigationItem
     link?: string;
     externalLink?: boolean;
     exactMatch?: boolean;
+    isActiveMatchOptions?: IsActiveMatchOptions;
     function?: (item: FuseNavigationItem) => void;
     classes?: {
         title?: string;

src/@fuse/components/navigation/vertical/components/aside/aside.component.ts

@@ -15,8 +15,10 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 })
 export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_autoCollapse: BooleanInput;
     static ngAcceptInputType_skipChildren: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() activeItemId: string;
     @Input() autoCollapse: boolean;
@@ -101,6 +103,21 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
         this._unsubscribeAll.complete();
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
@@ -168,19 +185,4 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
 }

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

@@ -11,7 +11,7 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        [routerLinkActiveOptions]="isActiveMatchOptions">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -39,7 +39,7 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>

src/@fuse/components/navigation/vertical/components/basic/basic.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@@ -17,6 +18,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     @Input() item: FuseNavigationItem;
     @Input() name: string;
 
+    isActiveMatchOptions: IsActiveMatchOptions;
     private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -29,6 +31,11 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
         private _fuseUtilsService: FuseUtilsService
     )
     {
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -40,9 +47,20 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
      */
     ngOnInit(): void
     {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._fuseUtilsService.exactMatchOptions
+                : this._fuseUtilsService.subsetMatchOptions;
+
         // Get the parent navigation component
         this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
 
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
             takeUntil(this._unsubscribeAll)

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

@@ -3,7 +3,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
-import { FuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
@@ -12,12 +12,14 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
     selector       : 'fuse-vertical-navigation-collapsable-item',
     templateUrl    : './collapsable.component.html',
     styles         : [],
-    animations     : FuseAnimations,
+    animations     : fuseAnimations,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_autoCollapse: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() autoCollapse: boolean;
     @Input() item: FuseNavigationItem;
@@ -179,84 +181,6 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         this._unsubscribeAll.complete();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Check if the given item has the given url
-     * in one of its children
-     *
-     * @param item
-     * @param currentUrl
-     * @private
-     */
-    private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean
-    {
-        const children = item.children;
-
-        if ( !children )
-        {
-            return false;
-        }
-
-        for ( const child of children )
-        {
-            if ( child.children )
-            {
-                if ( this._hasActiveChild(child, currentUrl) )
-                {
-                    return true;
-                }
-            }
-
-            // Check if the child has a link and is active
-            if ( child.link && this._router.isActive(child.link, child.exactMatch || false) )
-            {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * Check if this is a children
-     * of the given item
-     *
-     * @param parent
-     * @param item
-     * @return {boolean}
-     * @private
-     */
-    private _isChildrenOf(parent: FuseNavigationItem, item: FuseNavigationItem): boolean
-    {
-        const children = parent.children;
-
-        if ( !children )
-        {
-            return false;
-        }
-
-        if ( children.indexOf(item) > -1 )
-        {
-            return true;
-        }
-
-        for ( const child of children )
-        {
-            if ( child.children )
-            {
-                if ( this._isChildrenOf(child, item) )
-                {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -343,4 +267,81 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     {
         return item.id || index;
     }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Check if the given item has the given url
+     * in one of its children
+     *
+     * @param item
+     * @param currentUrl
+     * @private
+     */
+    private _hasActiveChild(item: FuseNavigationItem, currentUrl: string): boolean
+    {
+        const children = item.children;
+
+        if ( !children )
+        {
+            return false;
+        }
+
+        for ( const child of children )
+        {
+            if ( child.children )
+            {
+                if ( this._hasActiveChild(child, currentUrl) )
+                {
+                    return true;
+                }
+            }
+
+            // Check if the child has a link and is active
+            if ( child.link && this._router.isActive(child.link, child.exactMatch || false) )
+            {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Check if this is a children
+     * of the given item
+     *
+     * @param parent
+     * @param item
+     * @private
+     */
+    private _isChildrenOf(parent: FuseNavigationItem, item: FuseNavigationItem): boolean
+    {
+        const children = parent.children;
+
+        if ( !children )
+        {
+            return false;
+        }
+
+        if ( children.indexOf(item) > -1 )
+        {
+            return true;
+        }
+
+        for ( const child of children )
+        {
+            if ( child.children )
+            {
+                if ( this._isChildrenOf(child, item) )
+                {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
 }

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

@@ -14,7 +14,9 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 })
 export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_autoCollapse: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() autoCollapse: boolean;
     @Input() item: FuseNavigationItem;

src/@fuse/components/navigation/vertical/vertical.component.ts

@@ -4,7 +4,7 @@ import { NavigationEnd, Router } from '@angular/router';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { merge, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { delay, filter, takeUntil } from 'rxjs/operators';
-import { FuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations';
 import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
@@ -15,16 +15,18 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
     selector       : 'fuse-vertical-navigation',
     templateUrl    : './vertical.component.html',
     styleUrls      : ['./vertical.component.scss'],
-    animations     : FuseAnimations,
+    animations     : fuseAnimations,
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'fuseVerticalNavigation'
 })
 export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_inner: BooleanInput;
     static ngAcceptInputType_opened: BooleanInput;
     static ngAcceptInputType_transparentOverlay: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() appearance: FuseVerticalNavigationAppearance = 'default';
     @Input() autoCollapse: boolean = true;
@@ -71,10 +73,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         private _fuseUtilsService: FuseUtilsService
     )
     {
-        this._handleAsideOverlayClick = () => {
+        this._handleAsideOverlayClick = (): void => {
             this.closeAside();
         };
-        this._handleOverlayClick = () => {
+        this._handleOverlayClick = (): void => {
             this.close();
         };
     }
@@ -151,6 +153,40 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
                 });
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On mouseenter
+     *
+     * @private
+     */
+    @HostListener('mouseenter')
+    private _onMouseenter(): void
+    {
+        // Enable the animations
+        this._enableAnimations();
+
+        // Set the hovered
+        this._hovered = true;
+    }
+
+    /**
+     * On mouseleave
+     *
+     * @private
+     */
+    @HostListener('mouseleave')
+    private _onMouseleave(): void
+    {
+        // Enable the animations
+        this._enableAnimations();
+
+        // Set the hovered
+        this._hovered = false;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
@@ -672,36 +708,6 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         });
     }
 
-    /**
-     * On mouseenter
-     *
-     * @private
-     */
-    @HostListener('mouseenter')
-    private _onMouseenter(): void
-    {
-        // Enable the animations
-        this._enableAnimations();
-
-        // Set the hovered
-        this._hovered = true;
-    }
-
-    /**
-     * On mouseleave
-     *
-     * @private
-     */
-    @HostListener('mouseleave')
-    private _onMouseleave(): void
-    {
-        // Enable the animations
-        this._enableAnimations();
-
-        // Set the hovered
-        this._hovered = false;
-    }
-
     /**
      * Open/close the navigation
      *

src/@fuse/directives/autogrow/autogrow.directive.ts

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 })
 export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
 {
-    // tslint:disable-next-line:no-input-rename
+    // eslint-disable-next-line @angular-eslint/no-input-rename
     @Input('fuseAutogrowVerticalPadding') padding: number = 8;
     @HostBinding('rows') private _rows: number = 1;
 
@@ -41,6 +41,39 @@ export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
         };
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Resize on 'input' and 'ngModelChange' events
+     *
+     * @private
+     */
+    @HostListener('input')
+    @HostListener('ngModelChange')
+    private _resize(): void
+    {
+        // This doesn't need to trigger Angular's change detection by itself
+        this._ngZone.runOutsideAngular(() => {
+
+            setTimeout(() => {
+
+                // Set the height to 'auto' so we can correctly read the scrollHeight
+                this._height = 'auto';
+
+                // Detect the changes so the height is applied
+                this._changeDetectorRef.detectChanges();
+
+                // Get the scrollHeight and subtract the vertical padding
+                this._height = `${this._elementRef.nativeElement.scrollHeight - this.padding}px`;
+
+                // Detect the changes one more time to apply the final height
+                this._changeDetectorRef.detectChanges();
+            });
+        });
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
@@ -78,37 +111,4 @@ export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
         this._unsubscribeAll.next();
         this._unsubscribeAll.complete();
     }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resize on 'input' and 'ngModelChange' events
-     *
-     * @private
-     */
-    @HostListener('input')
-    @HostListener('ngModelChange')
-    private _resize(): void
-    {
-        // This doesn't need to trigger Angular's change detection by itself
-        this._ngZone.runOutsideAngular(() => {
-
-            setTimeout(() => {
-
-                // Set the height to 'auto' so we can correctly read the scrollHeight
-                this._height = 'auto';
-
-                // Detect the changes so the height is applied
-                this._changeDetectorRef.detectChanges();
-
-                // Get the scrollHeight and subtract the vertical padding
-                this._height = `${this._elementRef.nativeElement.scrollHeight - this.padding}px`;
-
-                // Detect the changes one more time to apply the final height
-                this._changeDetectorRef.detectChanges();
-            });
-        });
-    }
 }

src/@fuse/directives/scrollbar/scrollbar.directive.ts

@@ -17,7 +17,9 @@ import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar
 })
 export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_fuseScrollbar: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() fuseScrollbar: boolean = true;
     @Input() fuseScrollbarOptions: PerfectScrollbar.Options;
@@ -246,8 +248,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to X
      *
-     * @param {number} x
+     * @param x
-     * @param {number} speed
+     * @param speed
      */
     scrollToX(x: number, speed?: number): void
     {
@@ -257,8 +259,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to Y
      *
-     * @param {number} y
+     * @param y
-     * @param {number} speed
+     * @param speed
      */
     scrollToY(y: number, speed?: number): void
     {
@@ -268,8 +270,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to top
      *
-     * @param {number} offset
+     * @param offset
-     * @param {number} speed
+     * @param speed
      */
     scrollToTop(offset: number = 0, speed?: number): void
     {
@@ -279,8 +281,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to bottom
      *
-     * @param {number} offset
+     * @param offset
-     * @param {number} speed
+     * @param speed
      */
     scrollToBottom(offset: number = 0, speed?: number): void
     {
@@ -291,8 +293,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to left
      *
-     * @param {number} offset
+     * @param offset
-     * @param {number} speed
+     * @param speed
      */
     scrollToLeft(offset: number = 0, speed?: number): void
     {
@@ -302,8 +304,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to right
      *
-     * @param {number} offset
+     * @param offset
-     * @param {number} speed
+     * @param speed
      */
     scrollToRight(offset: number = 0, speed?: number): void
     {
@@ -314,10 +316,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     /**
      * Scroll to element
      *
-     * @param {string} qs
+     * @param qs
-     * @param {number} offset
+     * @param offset
-     * @param {boolean} ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
+     * @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
-     * @param {number} speed
+     * @param speed
      */
     scrollToElement(qs: string, offset: number = 0, ignoreVisible: boolean = false, speed?: number): void
     {
@@ -387,7 +389,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp: number) => {
+            const step = (newTimestamp: number): void => {
                 scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 

src/@fuse/lib/mock-api/mock-api.interceptor.ts

@@ -51,7 +51,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
             delay(handler.delay ?? this._defaultDelay ?? 0),
             switchMap((response) => {
 
-                // If there is no response mock-api,
+                // If there is no response data,
                 // throw an error response
                 if ( !response )
                 {
@@ -64,7 +64,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                     return throwError(response);
                 }
 
-                // Parse the response mock-api
+                // Parse the response data
                 const data = {
                     status: response[0],
                     body  : response[1]

src/@fuse/lib/mock-api/mock-api.module.ts

@@ -29,7 +29,7 @@ export class FuseMockApiModule
                 {
                     provide   : APP_INITIALIZER,
                     deps      : [...mockApiServices],
-                    useFactory: () => () => null,
+                    useFactory: () => (): any => null,
                     multi     : true
                 },
                 {

src/@fuse/lib/mock-api/mock-api.service.ts

@@ -9,11 +9,11 @@ import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
 export class FuseMockApiService
 {
     private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
-        DELETE: new Map<string, FuseMockApiHandler>(),
+        'delete': new Map<string, FuseMockApiHandler>(),
-        GET   : new Map<string, FuseMockApiHandler>(),
+        'get'   : new Map<string, FuseMockApiHandler>(),
-        PATCH : new Map<string, FuseMockApiHandler>(),
+        'patch' : new Map<string, FuseMockApiHandler>(),
-        POST  : new Map<string, FuseMockApiHandler>(),
+        'post'  : new Map<string, FuseMockApiHandler>(),
-        PUT   : new Map<string, FuseMockApiHandler>()
+        'put'   : new Map<string, FuseMockApiHandler>()
     };
 
     /**
@@ -34,10 +34,10 @@ export class FuseMockApiService
      * @param method
      * @param url
      */
-    findHandler(method: string, url: string): { handler: FuseMockApiHandler | undefined, urlParams: { [key: string]: string } }
+    findHandler(method: string, url: string): { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } }
     {
         // Prepare the return object
-        const matchingHandler: { handler: FuseMockApiHandler | undefined, urlParams: { [key: string]: string } } = {
+        const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
             handler  : undefined,
             urlParams: {}
         };
@@ -46,7 +46,7 @@ export class FuseMockApiService
         const urlParts = url.split('/');
 
         // Get all related request handlers
-        const handlers = this._handlers[method.toUpperCase()];
+        const handlers = this._handlers[method.toLowerCase()];
 
         // Iterate through the handlers
         handlers.forEach((handler, handlerUrl) => {
@@ -93,7 +93,7 @@ export class FuseMockApiService
      */
     onDelete(url: string, delay?: number): FuseMockApiHandler
     {
-        return this._registerHandler('DELETE', url, delay);
+        return this._registerHandler('delete', url, delay);
     }
 
     /**
@@ -104,7 +104,7 @@ export class FuseMockApiService
      */
     onGet(url: string, delay?: number): FuseMockApiHandler
     {
-        return this._registerHandler('GET', url, delay);
+        return this._registerHandler('get', url, delay);
     }
 
     /**
@@ -115,7 +115,7 @@ export class FuseMockApiService
      */
     onPatch(url: string, delay?: number): FuseMockApiHandler
     {
-        return this._registerHandler('PATCH', url, delay);
+        return this._registerHandler('patch', url, delay);
     }
 
     /**
@@ -126,7 +126,7 @@ export class FuseMockApiService
      */
     onPost(url: string, delay?: number): FuseMockApiHandler
     {
-        return this._registerHandler('POST', url, delay);
+        return this._registerHandler('post', url, delay);
     }
 
     /**
@@ -137,7 +137,7 @@ export class FuseMockApiService
      */
     onPut(url: string, delay?: number): FuseMockApiHandler
     {
-        return this._registerHandler('PUT', url, delay);
+        return this._registerHandler('put', url, delay);
     }
 
     // -----------------------------------------------------------------------------------------------------

src/@fuse/lib/mock-api/mock-api.types.ts

@@ -6,8 +6,8 @@ export type FuseMockApiReplyCallback =
     | undefined;
 
 export type FuseMockApiMethods =
-    | 'GET'
+    | 'get'
-    | 'POST'
+    | 'post'
-    | 'PUT'
+    | 'put'
-    | 'PATCH'
+    | 'patch'
-    | 'DELETE';
+    | 'delete';

src/@fuse/lib/mock-api/mock-api.utils.ts

@@ -16,7 +16,7 @@ export class FuseMockApiUtils
      */
     static guid(): string
     {
-        /* tslint:disable */
+        /* eslint-disable */
 
         let d = new Date().getTime();
 
@@ -32,6 +32,6 @@ export class FuseMockApiUtils
             return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
         });
 
-        /* tslint:enable */
+        /* eslint-enable */
     }
 }

src/@fuse/pipes/find-by-key/find-by-key.pipe.ts

@@ -28,9 +28,7 @@ export class FuseFindByKeyPipe implements PipeTransform
         // If the given value is an array of strings...
         if ( Array.isArray(value) )
         {
-            return value.map((item) => {
+            return value.map(item => source.find(sourceItem => sourceItem[key] === item));
-                return source.find((sourceItem) => sourceItem[key] === item);
-            });
         }
 
         // If the value is a string...

src/@fuse/services/media-watcher/media-watcher.service.ts

@@ -7,7 +7,7 @@ import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
 @Injectable()
 export class FuseMediaWatcherService
 {
-    private _onMediaChange: ReplaySubject<{ matchingAliases: string[], matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[], matchingQueries: any }>(1);
+    private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1);
 
     /**
      * Constructor
@@ -18,7 +18,7 @@ export class FuseMediaWatcherService
     )
     {
         this._fuseTailwindConfigService.tailwindConfig$.pipe(
-            switchMap((config) => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
+            switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
                 map((state) => {
 
                     // Prepare the observable values and set their defaults
@@ -57,7 +57,7 @@ export class FuseMediaWatcherService
     /**
      * Getter for _onMediaChange
      */
-    get onMediaChange$(): Observable<{ matchingAliases: string[], matchingQueries: any }>
+    get onMediaChange$(): Observable<{ matchingAliases: string[]; matchingQueries: any }>
     {
         return this._onMediaChange.asObservable();
     }

src/@fuse/services/tailwind/index.ts

@@ -1 +1 @@
-export * from '@fuse/services/media-watcher/public-api';
+export * from '@fuse/services/tailwind/public-api';

src/@fuse/services/tailwind/public-api.ts

@@ -1,2 +1,2 @@
-export * from '@fuse/services/media-watcher/media-watcher.module';
+export * from '@fuse/services/tailwind/tailwind.module';
-export * from '@fuse/services/media-watcher/media-watcher.service';
+export * from '@fuse/services/tailwind/tailwind.service';

src/@fuse/services/utils/index.ts

@@ -1 +1 @@
-export * from '@fuse/services/config/public-api';
+export * from '@fuse/services/utils/public-api';

src/@fuse/services/utils/utils.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
 
 @Injectable({
     providedIn: 'root'
@@ -12,6 +13,36 @@ export class FuseUtilsService
     {
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
+     */
+    get exactMatchOptions(): IsActiveMatchOptions
+    {
+        return {
+            paths       : 'exact',
+            fragment    : 'ignored',
+            matrixParams: 'ignored',
+            queryParams : 'exact'
+        };
+    }
+
+    /**
+     * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
+     */
+    get subsetMatchOptions(): IsActiveMatchOptions
+    {
+        return {
+            paths       : 'subset',
+            fragment    : 'ignored',
+            matrixParams: 'ignored',
+            queryParams : 'subset'
+        };
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------

src/@fuse/styles/components/example-viewer.scss

@@ -36,7 +36,6 @@
         .mat-tab-body-content {
 
             .fuse-highlight {
-                margin: -24px;
 
                 pre {
                     margin: 0;

src/@fuse/styles/overrides/angular-material.scss

@@ -178,11 +178,7 @@
 
     /* Add hover and focus style on all buttons */
     .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 #{'!important'};
+        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
-
-        .dark & {
-            background-color: rgba(0, 0, 0, 0.05) !important;
-        }
     }
 
     /* On palette colored buttons, use a darker color */
@@ -253,11 +249,7 @@
 
     /* Add hover and focus styles */
     .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 #{'!important'};
+        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
-
-        .dark & {
-            background-color: rgba(0, 0, 0, 0.05) !important;
-        }
     }
 
     /* On primary colored buttons, use the primary color as focus overlay */
@@ -330,19 +322,11 @@
 
     /* Border color */
     &:not(.mat-button-disabled) {
-        @apply border-gray-300 #{'!important'};
+        @apply border-gray-300 dark:border-gray-500 #{'!important'};
-
-        .dark & {
-            @apply border-gray-500 #{'!important'};
-        }
     }
 
     &.mat-button-disabled {
-        @apply border-gray-200 #{'!important'};
+        @apply border-gray-200 dark:border-gray-600 #{'!important'};
-
-        .dark & {
-            @apply border-gray-600 #{'!important'};
-        }
     }
 }
 
@@ -542,13 +526,7 @@
             border-radius: 6px;
             padding: 0 16px;
             border-width: 1px;
-            background-color: white;
+            @apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'};
-            @apply border-gray-300 shadow-sm #{'!important'};
-
-            .dark & {
-                background-color: rgba(0, 0, 0, 0.05) !important;
-                @apply border-gray-500 #{'!important'};
-            }
 
             .mat-form-field-prefix {
 
@@ -633,12 +611,28 @@
                     @apply icon-size-6;
                 }
 
-                /* Make mat-select usable as */
+                /* Make mat-select usable as prefix and suffix */
-                /* prefix and suffix */
                 .mat-select {
                     display: flex;
                     align-items: center;
 
+                    &:focus {
+
+                        .mat-select-trigger {
+
+                            .mat-select-value {
+                                @apply text-primary #{'!important'};
+                            }
+
+                            .mat-select-arrow-wrapper {
+
+                                .mat-select-arrow {
+                                    border-top-color: var(--fuse-primary) !important;
+                                }
+                            }
+                        }
+                    }
+
                     .mat-select-trigger {
                         display: flex;
                         align-items: center;
@@ -663,6 +657,7 @@
 
                             .mat-select-arrow {
                                 min-height: 0;
+                                @apply text-gray-500 dark:text-gray-400 #{'!important'};
                             }
                         }
                     }
@@ -1032,11 +1027,7 @@
 
                 .mat-form-field-prefix,
                 .mat-form-field-suffix {
-                    @apply border-gray-300 bg-default #{'!important'};
+                    @apply bg-default border-gray-300 dark:border-gray-500 #{'!important'};
-
-                    .dark & {
-                        @apply border-gray-500 #{'!important'};
-                    }
                 }
             }
         }

src/@fuse/styles/themes.scss

@@ -1,23 +1,20 @@
+@use '~@angular/material' as mat;
 @use "sass:map";
-@import '~@angular/material/theming';
 
 /** Include the core Angular Material styles */
-@include mat-core();
+@include mat.core();
 
 /** Configure the Angular Material typography */
-@include angular-material-typography(
+@include mat.all-component-typographies(
-        mat-typography-config(
+        mat.define-typography-config(
             $font-family: theme('fontFamily.sans'),
-            $title: mat-typography-level(1.25rem, 2rem, 600),
+            $title: mat.define-typography-level(1.25rem, 2rem, 600),
-            $body-2: mat-typography-level(0.875rem, 1.5rem, 600),
+            $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-            $button: mat-typography-level(0.875rem, 0.875rem, 500),
+            $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-            $input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
+            $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
         )
 );
 
-/** Configure the Angular Material density **/
-@include angular-material-density(-2);
-
 /** Prepare the Background and Foreground maps */
 $background-light: (
     status-bar: #CBD5E1, /* blueGray.300 */
@@ -135,7 +132,7 @@ $palettes: ();
     CSS Custom Properties to dynamically switch the colors. */
 body.light,
 body .light {
-    $base-light-theme: mat-light-theme((
+    $base-light-theme: mat.define-light-theme((
         color: ($palettes)
     ));
 
@@ -148,22 +145,15 @@ body .light {
             foreground: $foreground-light,
             background: $background-light
         ),
-        typography: null,
+        density: -2
-        density: null,
-        primary: map.get(map.get($base-light-theme, color), primary),
-        accent: map.get(map.get($base-light-theme, color), accent),
-        warn: map.get(map.get($base-light-theme, color), warn),
-        is-dark: map.get(map.get($base-light-theme, color), is-dark),
-        foreground: $foreground-light,
-        background: $background-light
     );
 
-    @include angular-material-theme($light-theme);
+    @include mat.all-component-themes($light-theme);
 }
 
 body.dark,
 body .dark {
-    $base-dark-theme: mat-dark-theme((
+    $base-dark-theme: mat.define-dark-theme((
         color: ($palettes)
     ));
 
@@ -176,15 +166,8 @@ body .dark {
             foreground: $foreground-dark,
             background: $background-dark
         ),
-        typography: null,
+        density: -2
-        density: null,
-        primary: map.get(map.get($base-dark-theme, color), primary),
-        accent: map.get(map.get($base-dark-theme, color), accent),
-        warn: map.get(map.get($base-dark-theme, color), warn),
-        is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-        foreground: $foreground-dark,
-        background: $background-dark
     );
 
-    @include angular-material-theme($dark-theme);
+    @include mat.all-component-colors($dark-theme);
 }

src/@fuse/validators/index.ts

@@ -1 +1 @@
-export * from './public-api';
+export * from '@fuse/validators/public-api';

src/@fuse/validators/public-api.ts

@@ -1 +1 @@
-export * from './validators';
+export * from '@fuse/validators/validators';

src/@fuse/version/fuse-version.ts

@@ -1,4 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-const __FUSE_VERSION__ = '12.2.0';
+export const FUSE_VERSION = new Version('13.0.2').full;
-export const FUSE_VERSION = new Version(__FUSE_VERSION__).full;

src/_redirects

@@ -0,0 +1 @@
+/*  /index.html  200

src/app/app.module.ts

@@ -15,8 +15,7 @@ import { appRoutes } from 'app/app.routing';
 
 const routerConfig: ExtraOptions = {
     scrollPositionRestoration: 'enabled',
-    preloadingStrategy       : PreloadAllModules,
+    preloadingStrategy       : PreloadAllModules
-    relativeLinkResolution   : 'legacy'
 };
 
 @NgModule({
@@ -28,18 +27,18 @@ const routerConfig: ExtraOptions = {
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes, routerConfig),
 
-        // Fuse & Fuse Mock API
+        // Fuse, FuseConfig & FuseMockAPI
         FuseModule,
         FuseConfigModule.forRoot(appConfig),
         FuseMockApiModule.forRoot(mockApiServices),
 
-        // Core
+        // Core module of your application
         CoreModule,
 
-        // Layout
+        // Layout module of your application
         LayoutModule,
 
-        // 3rd party modules
+        // 3rd party modules that require global configuration via forRoot
         MarkdownModule.forRoot({})
     ],
     bootstrap   : [

src/app/app.types.ts

@@ -8,10 +8,10 @@ export interface InitialData
 {
     messages: Message[];
     navigation: {
-        compact: FuseNavigationItem[],
+        compact: FuseNavigationItem[];
-        default: FuseNavigationItem[],
+        default: FuseNavigationItem[];
-        futuristic: FuseNavigationItem[],
+        futuristic: FuseNavigationItem[];
-        horizontal: FuseNavigationItem[]
+        horizontal: FuseNavigationItem[];
     };
     notifications: Notification[];
     shortcuts: Shortcut[];

src/app/core/auth/auth.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { AuthService } from 'app/core/auth/auth.service';
+import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
+
+@NgModule({
+    imports  : [
+        HttpClientModule
+    ],
+    providers: [
+        AuthService,
+        {
+            provide : HTTP_INTERCEPTORS,
+            useClass: AuthInterceptor,
+            multi   : true
+        }
+    ]
+})
+export class AuthModule
+{
+}

src/app/core/auth/auth.service.ts

@@ -29,12 +29,12 @@ export class AuthService
      */
     set accessToken(token: string)
     {
-        localStorage.setItem('access_token', token);
+        localStorage.setItem('accessToken', token);
     }
 
     get accessToken(): string
     {
-        return localStorage.getItem('access_token') ?? '';
+        return localStorage.getItem('accessToken') ?? '';
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -66,7 +66,7 @@ export class AuthService
      *
      * @param credentials
      */
-    signIn(credentials: { email: string, password: string }): Observable<any>
+    signIn(credentials: { email: string; password: string }): Observable<any>
     {
         // Throw error, if the user is already logged in
         if ( this._authenticated )
@@ -78,7 +78,7 @@ export class AuthService
             switchMap((response: any) => {
 
                 // Store the access token in the local storage
-                this.accessToken = response.access_token;
+                this.accessToken = response.accessToken;
 
                 // Set the authenticated flag to true
                 this._authenticated = true;
@@ -99,17 +99,17 @@ export class AuthService
     {
         // Renew token
         return this._httpClient.post('api/auth/refresh-access-token', {
-            access_token: this.accessToken
+            accessToken: this.accessToken
         }).pipe(
-            catchError(() => {
+            catchError(() =>
 
                 // Return false
-                return of(false);
+                of(false)
-            }),
+            ),
             switchMap((response: any) => {
 
                 // Store the access token in the local storage
-                this.accessToken = response.access_token;
+                this.accessToken = response.accessToken;
 
                 // Set the authenticated flag to true
                 this._authenticated = true;
@@ -129,7 +129,7 @@ export class AuthService
     signOut(): Observable<any>
     {
         // Remove the access token from the local storage
-        localStorage.removeItem('access_token');
+        localStorage.removeItem('accessToken');
 
         // Set the authenticated flag to false
         this._authenticated = false;
@@ -143,7 +143,7 @@ export class AuthService
      *
      * @param user
      */
-    signUp(user: { name: string, email: string, password: string, company: string }): Observable<any>
+    signUp(user: { name: string; email: string; password: string; company: string }): Observable<any>
     {
         return this._httpClient.post('api/auth/sign-up', user);
     }
@@ -153,7 +153,7 @@ export class AuthService
      *
      * @param credentials
      */
-    unlockSession(credentials: { email: string, password: string }): Observable<any>
+    unlockSession(credentials: { email: string; password: string }): Observable<any>
     {
         return this._httpClient.post('api/auth/unlock-session', credentials);
     }

src/app/core/auth/auth.utils.ts

@@ -14,6 +14,38 @@ export class AuthUtils
     {
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Is token expired?
+     *
+     * @param token
+     * @param offsetSeconds
+     */
+    static isTokenExpired(token: string, offsetSeconds?: number): boolean
+    {
+        // Return if there is no token
+        if ( !token || token === '' )
+        {
+            return true;
+        }
+
+        // Get the expiration date
+        const date = this._getTokenExpirationDate(token);
+
+        offsetSeconds = offsetSeconds || 0;
+
+        if ( date === null )
+        {
+            return true;
+        }
+
+        // Check if the token is expired
+        return !(date.valueOf() > new Date().valueOf() + offsetSeconds * 1000);
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------
@@ -39,7 +71,7 @@ export class AuthUtils
             );
         }
 
-        /* tslint:disable */
+        /* eslint-disable */
         for (
             // initialize result and counters
             let bc = 0, bs: any, buffer: any, idx = 0;
@@ -60,7 +92,7 @@ export class AuthUtils
             // try to find character in table (0-63, not found => -1)
             buffer = chars.indexOf(buffer);
         }
-        /* tslint:enable */
+        /* eslint-enable */
 
         return output;
     }
@@ -75,9 +107,7 @@ export class AuthUtils
     {
         return decodeURIComponent(
             Array.prototype.map
-                 .call(this._b64decode(str), (c: any) => {
+                 .call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
-                     return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-                 })
                  .join('')
         );
     }
@@ -171,36 +201,4 @@ export class AuthUtils
 
         return date;
     }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Is token expired?
-     *
-     * @param token
-     * @param offsetSeconds
-     */
-    static isTokenExpired(token: string, offsetSeconds?: number): boolean
-    {
-        // Return if there is no token
-        if ( !token || token === '' )
-        {
-            return true;
-        }
-
-        // Get the expiration date
-        const date = this._getTokenExpirationDate(token);
-
-        offsetSeconds = offsetSeconds || 0;
-
-        if ( date === null )
-        {
-            return true;
-        }
-
-        // Check if the token is expired
-        return !(date.valueOf() > new Date().valueOf() + offsetSeconds * 1000);
-    }
 }

src/app/core/auth/guards/auth.guard.ts

@@ -19,39 +19,6 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Check the authenticated status
-     *
-     * @param redirectURL
-     * @private
-     */
-    private _check(redirectURL: string): Observable<boolean>
-    {
-        // Check the authentication status
-        return this._authService.check()
-                   .pipe(
-                       switchMap((authenticated) => {
-
-                           // If the user is not authenticated...
-                           if ( !authenticated )
-                           {
-                               // Redirect to the sign-in page
-                               this._router.navigate(['sign-in'], {queryParams: {redirectURL}});
-
-                               // Prevent the access
-                               return of(false);
-                           }
-
-                           // Allow the access
-                           return of(true);
-                       })
-                   );
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -90,4 +57,37 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
     {
         return this._check('/');
     }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Check the authenticated status
+     *
+     * @param redirectURL
+     * @private
+     */
+    private _check(redirectURL: string): Observable<boolean>
+    {
+        // Check the authentication status
+        return this._authService.check()
+                   .pipe(
+                       switchMap((authenticated) => {
+
+                           // If the user is not authenticated...
+                           if ( !authenticated )
+                           {
+                               // Redirect to the sign-in page
+                               this._router.navigate(['sign-in'], {queryParams: {redirectURL}});
+
+                               // Prevent the access
+                               return of(false);
+                           }
+
+                           // Allow the access
+                           return of(true);
+                       })
+                   );
+    }
 }

src/app/core/auth/guards/noAuth.guard.ts

@@ -19,38 +19,6 @@ export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Check the authenticated status
-     *
-     * @private
-     */
-    private _check(): Observable<boolean>
-    {
-        // Check the authentication status
-        return this._authService.check()
-                   .pipe(
-                       switchMap((authenticated) => {
-
-                           // If the user is authenticated...
-                           if ( authenticated )
-                           {
-                               // Redirect to the root
-                               this._router.navigate(['']);
-
-                               // Prevent the access
-                               return of(false);
-                           }
-
-                           // Allow the access
-                           return of(true);
-                       })
-                   );
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -87,4 +55,36 @@ export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
     {
         return this._check();
     }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Check the authenticated status
+     *
+     * @private
+     */
+    private _check(): Observable<boolean>
+    {
+        // Check the authentication status
+        return this._authService.check()
+                   .pipe(
+                       switchMap((authenticated) => {
+
+                           // If the user is authenticated...
+                           if ( authenticated )
+                           {
+                               // Redirect to the root
+                               this._router.navigate(['']);
+
+                               // Prevent the access
+                               return of(false);
+                           }
+
+                           // Allow the access
+                           return of(true);
+                       })
+                   );
+    }
 }

src/app/core/core.module.ts

@@ -1,21 +1,13 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { AuthModule } from 'app/core/auth/auth.module';
-import { DomSanitizer } from '@angular/platform-browser';
+import { IconsModule } from 'app/core/icons/icons.module';
-import { MatIconRegistry } from '@angular/material/icon';
+import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
-import { AuthService } from 'app/core/auth/auth.service';
-import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
 
 @NgModule({
     imports: [
-        HttpClientModule
+        AuthModule,
-    ],
+        IconsModule,
-    providers: [
+        TranslocoCoreModule
-        AuthService,
-        {
-            provide : HTTP_INTERCEPTORS,
-            useClass: AuthInterceptor,
-            multi   : true
-        }
     ]
 })
 export class CoreModule
@@ -24,8 +16,6 @@ export class CoreModule
      * Constructor
      */
     constructor(
-        private _domSanitizer: DomSanitizer,
-        private _matIconRegistry: MatIconRegistry,
         @Optional() @SkipSelf() parentModule?: CoreModule
     )
     {
@@ -34,14 +24,5 @@ export class CoreModule
         {
             throw new Error('CoreModule has already been loaded. Import this module in the AppModule only.');
         }
-
-        // Register icon sets
-        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
     }
 }

src/app/core/icons/icons.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+
+@NgModule()
+export class IconsModule
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        private _domSanitizer: DomSanitizer,
+        private _matIconRegistry: MatIconRegistry
+    )
+    {
+        // Register icon sets
+        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
+    }
+}

src/app/core/transloco/transloco.http-loader.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Translation, TranslocoLoader } from '@ngneat/transloco';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TranslocoHttpLoader implements TranslocoLoader
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get translation
+     *
+     * @param lang
+     */
+    getTranslation(lang: string): Observable<Translation>
+    {
+        return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
+    }
+}

src/app/core/transloco/transloco.module.ts

@@ -0,0 +1,50 @@
+import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { environment } from 'environments/environment';
+import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
+
+@NgModule({
+    exports  : [
+        TranslocoModule
+    ],
+    providers: [
+        {
+            // Provide the default Transloco configuration
+            provide : TRANSLOCO_CONFIG,
+            useValue: translocoConfig({
+                availableLangs      : [
+                    {
+                        id   : 'en',
+                        label: 'English'
+                    },
+                    {
+                        id   : 'tr',
+                        label: 'Turkish'
+                    }
+                ],
+                defaultLang         : 'en',
+                reRenderOnLangChange: true,
+                prodMode            : environment.production
+            })
+        },
+        {
+            // Provide the default Transloco loader
+            provide : TRANSLOCO_LOADER,
+            useClass: TranslocoHttpLoader
+        },
+        {
+            // Preload the default language before the app starts to prevent empty/jumping content
+            provide   : APP_INITIALIZER,
+            deps      : [TranslocoService],
+            useFactory: (translocoService: TranslocoService): any => (): Promise<Translation> => {
+                const defaultLang = translocoService.getDefaultLang();
+                translocoService.setActiveLang(defaultLang);
+                return translocoService.load(defaultLang).toPromise();
+            },
+            multi     : true
+        }
+    ]
+})
+export class TranslocoCoreModule
+{
+}

src/app/layout/common/language/language.component.html

@@ -0,0 +1,35 @@
+<!-- Button -->
+<button
+    mat-icon-button
+    [matMenuTriggerFor]="languages">
+    <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: activeLang}"></ng-container>
+</button>
+
+<!-- Language menu -->
+<mat-menu
+    [xPosition]="'before'"
+    #languages="matMenu">
+    <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
+        <button
+            mat-menu-item
+            (click)="setActiveLang(lang.id)">
+            <span class="flex items-center">
+                <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: lang.id}"></ng-container>
+                <span class="ml-3">{{lang.label}}</span>
+            </span>
+        </button>
+    </ng-container>
+</mat-menu>
+
+<!-- Flag image template -->
+<ng-template
+    let-lang
+    #flagImage>
+    <span class="relative w-6 shadow rounded-sm overflow-hidden">
+        <span class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"></span>
+        <img
+            class="w-full"
+            [src]="'assets/images/flags/' + flagCodes[lang].toUpperCase() + '.svg'"
+            [alt]="'Flag image for ' + lang">
+    </span>
+</ng-template>

src/app/layout/common/language/language.component.ts

@@ -0,0 +1,153 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { take } from 'rxjs/operators';
+import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+
+@Component({
+    selector       : 'language',
+    templateUrl    : './language.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'language'
+})
+export class LanguageComponent implements OnInit, OnDestroy
+{
+    availableLangs: AvailableLangs;
+    activeLang: string;
+    flagCodes: any;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService,
+        private _translocoService: TranslocoService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the available languages from transloco
+        this.availableLangs = this._translocoService.getAvailableLangs();
+
+        // Subscribe to language changes
+        this._translocoService.langChanges$.subscribe((activeLang) => {
+
+            // Get the active lang
+            this.activeLang = activeLang;
+
+            // Update the navigation
+            this._updateNavigation(activeLang);
+        });
+
+        // Set the country iso codes for languages for flags
+        this.flagCodes = {
+            'en': 'us',
+            'tr': 'tr'
+        };
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Set the active lang
+     *
+     * @param lang
+     */
+    setActiveLang(lang: string): void
+    {
+        // Set the active lang
+        this._translocoService.setActiveLang(lang);
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Update the navigation
+     *
+     * @param lang
+     * @private
+     */
+    private _updateNavigation(lang: string): void
+    {
+        // For the demonstration purposes, we will only update the Dashboard names
+        // from the navigation but you can do a full swap and change the entire
+        // navigation data.
+        //
+        // You can import the data from a file or request it from your backend,
+        // it's up to you.
+
+        // Get the component -> navigation data -> item
+        const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation');
+
+        // Return if the navigation component does not exist
+        if ( !navComponent )
+        {
+            return null;
+        }
+
+        // Get the flat navigation data
+        const navigation = navComponent.navigation;
+
+        // Get the Project dashboard item and update its title
+        const projectDashboardItem = this._fuseNavigationService.getItem('dashboards.project', navigation);
+        if ( projectDashboardItem )
+        {
+            this._translocoService.selectTranslate('Project').pipe(take(1))
+                .subscribe((translation) => {
+
+                    // Set the title
+                    projectDashboardItem.title = translation;
+
+                    // Refresh the navigation component
+                    navComponent.refresh();
+                });
+        }
+
+        // Get the Analytics dashboard item and update its title
+        const analyticsDashboardItem = this._fuseNavigationService.getItem('dashboards.analytics', navigation);
+        if ( analyticsDashboardItem )
+        {
+            this._translocoService.selectTranslate('Analytics').pipe(take(1))
+                .subscribe((translation) => {
+
+                    // Set the title
+                    analyticsDashboardItem.title = translation;
+
+                    // Refresh the navigation component
+                    navComponent.refresh();
+                });
+        }
+    }
+}

src/app/layout/common/language/language.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { LanguageComponent } from 'app/layout/common/language/language.component';
+import { SharedModule } from 'app/shared/shared.module';
+
+@NgModule({
+    declarations: [
+        LanguageComponent
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        SharedModule
+    ],
+    exports     : [
+        LanguageComponent
+    ]
+})
+export class LanguageModule
+{
+}

src/app/layout/common/messages/messages.component.html

@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Messages -->
-            <ng-container *ngFor="let message of messages">
+            <ng-container *ngFor="let message of messages; trackBy: trackByFn">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !message.read}">

src/app/layout/common/messages/messages.component.ts

@@ -155,6 +155,17 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy
         this._messagesService.delete(message.id).subscribe();
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/notifications/notifications.component.html

@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Notifications -->
-            <ng-container *ngFor="let notification of notifications">
+            <ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !notification.read}">

src/app/layout/common/notifications/notifications.component.ts

@@ -155,6 +155,17 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
         this._notificationsService.delete(notification.id).subscribe();
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/search/search.component.html

@@ -31,14 +31,15 @@
                 *ngIf="results && !results.length">
                 No results found!
             </mat-option>
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                 <mat-option
                     class="group relative h-14 px-6 py-0 sm:px-8 text-md"
-                *ngFor="let result of results"
                     [routerLink]="result.link">
                     <ng-container
                         [ngTemplateOutlet]="searchResult"
                         [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
                 </mat-option>
+            </ng-container>
         </mat-autocomplete>
         <button
             class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
@@ -72,14 +73,15 @@
                 *ngIf="results && !results.length">
                 No results found!
             </mat-option>
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                 <mat-option
                     class="group relative h-14 px-5 py-0 text-md"
-                *ngFor="let result of results"
                     [routerLink]="result.link">
                     <ng-container
                         [ngTemplateOutlet]="searchResult"
                         [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
                 </mat-option>
+            </ng-container>
         </mat-autocomplete>
     </div>
 </ng-container>

src/app/layout/common/search/search.component.ts

@@ -3,14 +3,14 @@ import { FormControl } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { Subject } from 'rxjs';
 import { debounceTime, filter, map, takeUntil } from 'rxjs/operators';
-import { FuseAnimations } from '@fuse/animations/public-api';
+import { fuseAnimations } from '@fuse/animations/public-api';
 
 @Component({
     selector     : 'search',
     templateUrl  : './search.component.html',
     encapsulation: ViewEncapsulation.None,
     exportAs     : 'fuseSearch',
-    animations   : FuseAnimations
+    animations   : fuseAnimations
 })
 export class SearchComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -115,12 +115,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
                     // Continue
                     return value;
                 }),
-                filter((value) => {
-
                 // Filter out undefined/null/false statements and also
                 // filter out the values that are smaller than minLength
-                    return value && value.length >= this.minLength;
+                filter(value => value && value.length >= this.minLength)
-                })
             )
             .subscribe((value) => {
                 this._httpClient.post('api/common/search', {query: value})
@@ -203,4 +200,15 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
         // Close the search
         this.opened = false;
     }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
 }

src/app/layout/common/search/search.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { Overlay } from '@angular/cdk/overlay';
+import { BlockScrollStrategy, Overlay } from '@angular/cdk/overlay';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -28,9 +28,7 @@ import { SearchComponent } from 'app/layout/common/search/search.component';
     providers   : [
         {
             provide   : MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-            useFactory: (overlay: Overlay) => {
+            useFactory: (overlay: Overlay) => (): BlockScrollStrategy => overlay.scrollStrategies.block(),
-                return () => overlay.scrollStrategies.block();
-            },
             deps      : [Overlay]
         }
     ]

src/app/layout/common/shortcuts/shortcuts.component.html

@@ -94,7 +94,7 @@
                 <!-- Shortcuts -->
                 <div class="grid grid-cols-2 grid-flow-row">
                     <!-- Shortcut -->
-                    <ng-container *ngFor="let shortcut of shortcuts">
+                    <ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn">
                         <div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5">
                             <ng-container *ngIf="mode === 'modify'">
                                 <div

src/app/layout/common/shortcuts/shortcuts.component.ts

@@ -176,7 +176,7 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
      */
     save(): void
     {
-        // Get the mock-api from the form
+        // Get the data from the form
         const shortcut = this.shortcutForm.value;
 
         // If there is an id, update it...
@@ -199,7 +199,7 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
      */
     delete(): void
     {
-        // Get the mock-api from the form
+        // Get the data from the form
         const shortcut = this.shortcutForm.value;
 
         // Delete
@@ -209,6 +209,17 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
         this.mode = 'modify';
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/user-menu/user-menu.component.ts

@@ -15,7 +15,9 @@ import { UserService } from 'app/core/user/user.service';
 })
 export class UserMenuComponent implements OnInit, OnDestroy
 {
+    /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_showAvatar: BooleanInput;
+    /* eslint-enable @typescript-eslint/naming-convention */
 
     @Input() showAvatar: boolean = true;
     user: User;

src/app/layout/layout.component.ts

@@ -217,7 +217,7 @@ export class LayoutComponent implements OnInit, OnDestroy
         const paths = route.pathFromRoot;
         paths.forEach((path) => {
 
-            // Check if there is a 'layout' mock-api
+            // Check if there is a 'layout' data
             if ( path.routeConfig && path.routeConfig.data && path.routeConfig.data.layout )
             {
                 // Set the layout

src/app/layout/layouts/horizontal/centered/centered.component.html

@@ -63,6 +63,7 @@
             </ng-container>
             <!-- Components -->
             <div class="flex items-center pl-2 ml-auto space-x-2">
+                <language></language>
                 <fuse-fullscreen></fuse-fullscreen>
                 <search [appearance]="'bar'"></search>
                 <shortcuts [shortcuts]="data.shortcuts"></shortcuts>

src/app/layout/layouts/horizontal/centered/centered.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';
 
 @Component({
@@ -50,7 +50,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
         this._activatedRoute.data.subscribe((data: Data) => {
             this.data = data.initialData;
         });
@@ -87,7 +87,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/centered/centered.module.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,

src/app/layout/layouts/horizontal/enterprise/enterprise.component.html

@@ -46,6 +46,7 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
+                    <language></language>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
                     <shortcuts [shortcuts]="data.shortcuts"></shortcuts>

src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';
 
 @Component({
@@ -50,7 +50,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
         this._activatedRoute.data.subscribe((data: Data) => {
             this.data = data.initialData;
         });
@@ -87,7 +87,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,

src/app/layout/layouts/horizontal/material/material.component.html

@@ -52,6 +52,7 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
+                    <language></language>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
                     <shortcuts [shortcuts]="data.shortcuts"></shortcuts>

src/app/layout/layouts/horizontal/material/material.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';
 
 @Component({
@@ -50,7 +50,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
         this._activatedRoute.data.subscribe((data: Data) => {
             this.data = data.initialData;
         });
@@ -87,7 +87,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/material/material.module.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,

src/app/layout/layouts/horizontal/modern/modern.component.html

@@ -55,6 +55,7 @@
         </ng-container>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>

src/app/layout/layouts/horizontal/modern/modern.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService } from '@fuse/components/navigation';
+import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 import { InitialData } from 'app/app.types';
 
 @Component({
@@ -50,7 +50,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route mock-api
+        // Subscribe to the resolved route data
         this._activatedRoute.data.subscribe((data: Data) => {
             this.data = data.initialData;
         });
@@ -87,7 +87,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent(name);
+        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/modern/modern.module.ts

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
@@ -28,6 +29,7 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,

src/app/layout/layouts/vertical/classic/classic.component.html

@@ -36,6 +36,7 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
             <shortcuts [shortcuts]="data.shortcuts"></shortcuts>