(docs) Updated docs

Increased the version number
(changelog) Updated changelog
2025-12-23 19:27:06 +00:00 · 2021-05-15 13:44:13 +03:00 · 2021-05-14 17:44:18 +03:00 · 2021-05-14 17:26:28 +03:00 · 2021-05-14 17:17:06 +03:00 · 2021-05-14 14:15:54 +03:00
265 changed files with 10607 additions and 6731 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,95 @@
+{
+    "root": true,
+    "env": {
+        "es6": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
+    "ignorePatterns": [
+        "projects/**/*"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "parserOptions": {
+                "project": [
+                    "tsconfig.json",
+                    "e2e/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-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": {}
+        }
+    ]
+}
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,6 @@

 # profiling files
 chrome-profiler-events*.json
-speed-measure-plugin*.json

 # IDEs and editors
 /.idea
--- a/README.md
+++ b/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.
--- a/angular.json
+++ b/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": [
-                            "tsconfig.app.json",
-                            "tsconfig.spec.json",
-                            "e2e/tsconfig.json"
-                        ],
-                        "exclude": [
-                            "**/node_modules/**"
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
                        ]
                    }
                },
@@ -143,5 +149,8 @@
            }
        }
    },
-    "defaultProject": "fuse"
+    "defaultProject": "fuse",
+    "cli": {
+        "defaultCollection": "@angular-eslint/schematics"
+    }
 }
--- a/e2e/protractor.conf.js
+++ b/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
-            }
-        }));
-    }
-};
--- a/e2e/src/app.e2e-spec.ts
+++ b/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));
-    });
-});
--- a/e2e/src/app.po.ts
+++ b/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();
-    }
-}
--- a/e2e/tsconfig.json
+++ b/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"
-        ]
-    }
-}
--- a/karma.conf.js
+++ b/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'},
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,28 +1,28 @@
 {
    "name": "@fuse/demo",
-    "version": "12.2.0",
+    "version": "13.0.0",
    "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/cdk": "11.2.11",
-        "@angular/common": "11.2.12",
-        "@angular/compiler": "11.2.12",
-        "@angular/core": "11.2.12",
-        "@angular/forms": "11.2.12",
-        "@angular/material": "11.2.11",
-        "@angular/material-moment-adapter": "11.2.11",
-        "@angular/platform-browser": "11.2.12",
-        "@angular/platform-browser-dynamic": "11.2.12",
-        "@angular/router": "11.2.12",
+        "@angular/animations": "12.0.0",
+        "@angular/cdk": "12.0.0",
+        "@angular/common": "12.0.0",
+        "@angular/compiler": "12.0.0",
+        "@angular/core": "12.0.0",
+        "@angular/forms": "12.0.0",
+        "@angular/material": "12.0.0",
+        "@angular/material-moment-adapter": "12.0.0",
+        "@angular/platform-browser": "12.0.0",
+        "@angular/platform-browser-dynamic": "12.0.0",
+        "@angular/router": "12.0.0",
        "@fullcalendar/angular": "4.4.5-beta",
        "@fullcalendar/core": "4.4.2",
        "@fullcalendar/daygrid": "4.4.2",
@@ -31,15 +31,15 @@
        "@fullcalendar/moment": "4.4.2",
        "@fullcalendar/rrule": "4.4.2",
        "@fullcalendar/timegrid": "4.4.2",
-        "apexcharts": "3.26.1",
+        "apexcharts": "3.26.2",
        "crypto-js": "3.3.0",
        "highlight.js": "10.7.2",
        "lodash-es": "4.17.21",
        "moment": "2.29.1",
        "ng-apexcharts": "1.5.9",
        "ngx-markdown": "11.1.3",
-        "ngx-quill": "13.3.1",
-        "perfect-scrollbar": "1.5.0",
+        "ngx-quill": "14.0.0",
+        "perfect-scrollbar": "1.5.1",
        "quill": "1.3.7",
        "rrule": "2.6.8",
        "rxjs": "6.6.7",
@@ -48,36 +48,44 @@
        "zone.js": "0.11.4"
    },
    "devDependencies": {
-        "@angular-devkit/build-angular": "0.1102.11",
-        "@angular/cli": "11.2.11",
-        "@angular/compiler-cli": "11.2.12",
-        "@angular/language-service": "11.2.12",
+        "@angular-devkit/build-angular": "12.0.0",
+        "@angular-eslint/builder": "12.0.0",
+        "@angular-eslint/eslint-plugin": "12.0.0",
+        "@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/lodash": "4.14.168",
+        "@types/jasmine": "3.6.11",
+        "@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.23.0",
+        "@typescript-eslint/parser": "4.23.0",
        "autoprefixer": "10.2.5",
        "chroma-js": "2.1.1",
-        "codelyzer": "6.0.1",
-        "jasmine-core": "3.6.0",
+        "eslint": "7.26.0",
+        "eslint-plugin-import": "2.23.0",
+        "eslint-plugin-jsdoc": "34.2.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.2.15",
        "protractor": "7.0.0",
        "tailwindcss": "2.1.2",
-        "ts-node": "8.3.0",
-        "tslint": "6.1.3",
-        "typescript": "4.1.5"
+        "typescript": "4.2.4"
    }
 }
--- a/src/@fuse/animations/defaults.ts
+++ b/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 DECELERATION_CURVE = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
-    static ACCELERATION_CURVE = 'cubic-bezier(0.4, 0.0, 1, 1)';
-    static SHARP_CURVE = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
+    static standard = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
+    static deceleration = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+    static acceleration = 'cubic-bezier(0.4, 0.0, 1, 1)';
+    static sharp = 'cubic-bezier(0.4, 0.0, 0.6, 1)';
 }

 export class FuseAnimationDurations
 {
-    static COMPLEX = '375ms';
-    static ENTERING = '225ms';
-    static EXITING = '195ms';
+    static complex = '375ms';
+    static entering = '225ms';
+    static exiting = '195ms';
 }
--- a/src/@fuse/animations/expand-collapse.ts
+++ b/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}`
                }
            }
        )
--- a/src/@fuse/animations/fade.ts
+++ b/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}`
                }
            }
        )
--- a/src/@fuse/animations/public-api.ts
+++ b/src/@fuse/animations/public-api.ts
@@ -4,7 +4,7 @@ import { shake } from './shake';
 import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from './slide';
 import { zoomIn, zoomOut } from './zoom';

-export const FuseAnimations = [
+export const fuseAnimations = [
    expandCollapse,
    fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
    fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
--- a/src/@fuse/animations/slide.ts
+++ b/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}`
                }
            }
        )
--- a/src/@fuse/animations/zoom.ts
+++ b/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}`
                }
            }
        )
--- a/src/@fuse/components/alert/alert.component.ts
+++ b/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(() => {
--- a/src/@fuse/components/card/card.component.ts
+++ b/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';
--- a/src/@fuse/components/date-range/date-range.component.ts
+++ b/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
    };
@@ -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;
@@ -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'));
-        };
+        // If we are selecting the end date, disable all the dates that comes before the start date
+        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;
--- a/src/@fuse/components/drawer/drawer.component.ts
+++ b/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
     *
--- a/src/@fuse/components/highlight/highlight.service.ts
+++ b/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');
    }
 }
--- a/src/@fuse/components/masonry/index.ts
+++ b/src/@fuse/components/masonry/index.ts
@@ -0,0 +1 @@
+export * from '@fuse/components/card/public-api';
--- a/src/@fuse/components/masonry/masonry.component.html
+++ b/src/@fuse/components/masonry/masonry.component.html
@@ -0,0 +1,3 @@
+<div class="flex">
+    <ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
+</div>
--- a/src/@fuse/components/masonry/masonry.component.scss
+++ b/src/@fuse/components/masonry/masonry.component.scss
--- a/src/@fuse/components/masonry/masonry.component.ts
+++ b/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]);
+        }
+    }
+}
--- a/src/@fuse/components/masonry/masonry.module.ts
+++ b/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
+{
+}
--- a/src/@fuse/components/masonry/public-api.ts
+++ b/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';
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
+++ b/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;
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.ts
+++ b/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'
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -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[]
    {
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
+++ b/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;
-    }
 }
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
+++ b/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;
+    }
 }
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.ts
+++ b/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;
--- a/src/@fuse/components/navigation/vertical/vertical.component.ts
+++ b/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;
@@ -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
     *
--- a/src/@fuse/directives/autogrow/autogrow.directive.ts
+++ b/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();
-            });
-        });
-    }
 }
--- a/src/@fuse/directives/scrollbar/scrollbar.directive.ts
+++ b/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 {number} speed
+     * @param x
+     * @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 {number} speed
+     * @param y
+     * @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 {number} speed
+     * @param offset
+     * @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 {number} speed
+     * @param offset
+     * @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 {number} speed
+     * @param offset
+     * @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 {number} speed
+     * @param offset
+     * @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 {number} offset
-     * @param {boolean} ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
-     * @param {number} speed
+     * @param qs
+     * @param offset
+     * @param ignoreVisible If true, scrollToElement won't happen if element is already inside the current viewport
+     * @param speed
     */
    scrollToElement(qs: string, offset: number = 0, ignoreVisible: boolean = false, speed?: number): void
    {
--- a/src/@fuse/lib/mock-api/mock-api.service.ts
+++ b/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>(),
-        GET   : new Map<string, FuseMockApiHandler>(),
-        PATCH : new Map<string, FuseMockApiHandler>(),
-        POST  : new Map<string, FuseMockApiHandler>(),
-        PUT   : new Map<string, FuseMockApiHandler>()
+        'delete': new Map<string, FuseMockApiHandler>(),
+        'get'   : new Map<string, FuseMockApiHandler>(),
+        'patch' : new Map<string, FuseMockApiHandler>(),
+        'post'  : 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);
    }

    // -----------------------------------------------------------------------------------------------------
--- a/src/@fuse/lib/mock-api/mock-api.types.ts
+++ b/src/@fuse/lib/mock-api/mock-api.types.ts
@@ -6,8 +6,8 @@ export type FuseMockApiReplyCallback =
    | undefined;

 export type FuseMockApiMethods =
-    | 'GET'
-    | 'POST'
-    | 'PUT'
-    | 'PATCH'
-    | 'DELETE';
+    | 'get'
+    | 'post'
+    | 'put'
+    | 'patch'
+    | 'delete';
--- a/src/@fuse/lib/mock-api/mock-api.utils.ts
+++ b/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 */
    }
 }
--- a/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
+++ b/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 source.find((sourceItem) => sourceItem[key] === item);
-            });
+            return value.map(item => source.find(sourceItem => sourceItem[key] === item));
        }

        // If the value is a string...
--- a/src/@fuse/services/media-watcher/media-watcher.service.ts
+++ b/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();
    }
--- a/src/@fuse/styles/components/example-viewer.scss
+++ b/src/@fuse/styles/components/example-viewer.scss
@@ -36,7 +36,6 @@
        .mat-tab-body-content {

            .fuse-highlight {
-                margin: -24px;

                pre {
                    margin: 0;
--- a/src/@fuse/styles/themes.scss
+++ b/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(
-        mat-typography-config(
+@include mat.all-component-typographies(
+        mat.define-typography-config(
            $font-family: theme('fontFamily.sans'),
-            $title: mat-typography-level(1.25rem, 2rem, 600),
-            $body-2: mat-typography-level(0.875rem, 1.5rem, 600),
-            $button: mat-typography-level(0.875rem, 0.875rem, 500),
-            $input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
+            $title: mat.define-typography-level(1.25rem, 2rem, 600),
+            $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
+            $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
+            $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: 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
+        density: -2
    );

-    @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: 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
+        density: -2
    );

-    @include angular-material-theme($dark-theme);
+    @include mat.all-component-colors($dark-theme);
 }
--- a/src/@fuse/version/fuse-version.ts
+++ b/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(__FUSE_VERSION__).full;
+export const FUSE_VERSION = new Version('13.0.0').full;
--- a/src/_redirects
+++ b/src/_redirects
@@ -0,0 +1 @@
+/*  /index.html  200
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,8 +15,7 @@ import { appRoutes } from 'app/app.routing';

 const routerConfig: ExtraOptions = {
    scrollPositionRestoration: 'enabled',
-    preloadingStrategy       : PreloadAllModules,
-    relativeLinkResolution   : 'legacy'
+    preloadingStrategy       : PreloadAllModules
 };

@NgModule({
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -5,7 +5,7 @@ import { LayoutComponent } from 'app/layout/layout.component';
 import { InitialDataResolver } from 'app/app.resolvers';

 // @formatter:off
-// tslint:disable:max-line-length
+/* eslint-disable max-len */
 export const appRoutes: Route[] = [

    // Redirect empty path to '/dashboards/project'
@@ -90,6 +90,7 @@ export const appRoutes: Route[] = [
                {path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
                {path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
                {path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
+                {path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
                {path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
            ]},

@@ -129,6 +130,9 @@ export const appRoutes: Route[] = [

                // Profile
                {path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
+
+                // Settings
+                {path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
            ]},

            // User interface
--- a/src/app/app.types.ts
+++ b/src/app/app.types.ts
@@ -8,10 +8,10 @@ export interface InitialData
 {
    messages: Message[];
    navigation: {
-        compact: FuseNavigationItem[],
-        default: FuseNavigationItem[],
-        futuristic: FuseNavigationItem[],
-        horizontal: FuseNavigationItem[]
+        compact: FuseNavigationItem[];
+        default: FuseNavigationItem[];
+        futuristic: FuseNavigationItem[];
+        horizontal: FuseNavigationItem[];
    };
    notifications: Notification[];
    shortcuts: Shortcut[];
--- a/src/app/core/auth/auth.service.ts
+++ b/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);
    }
--- a/src/app/core/auth/auth.utils.ts
+++ b/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) => {
-                     return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-                 })
+                 .call(this._b64decode(str), (c: any) => '%' + ('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);
-    }
 }
--- a/src/app/core/auth/guards/auth.guard.ts
+++ b/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);
+                       })
+                   );
+    }
 }
--- a/src/app/core/auth/guards/noAuth.guard.ts
+++ b/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);
+                       })
+                   );
+    }
 }
--- a/src/app/layout/common/search/search.component.html
+++ b/src/app/layout/common/search/search.component.html
@@ -31,14 +31,15 @@
                *ngIf="results && !results.length">
                No results found!
            </mat-option>
-            <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 *ngFor="let result of results">
+                <mat-option
+                    class="group relative h-14 px-6 py-0 sm:px-8 text-md"
+                    [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>
-            <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 *ngFor="let result of results">
+                <mat-option
+                    class="group relative h-14 px-5 py-0 text-md"
+                    [routerLink]="result.link">
+                    <ng-container
+                        [ngTemplateOutlet]="searchResult"
+                        [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
+                </mat-option>
+            </ng-container>
        </mat-autocomplete>
    </div>
 </ng-container>
--- a/src/app/layout/common/search/search.component.ts
+++ b/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 out undefined/null/false statements and also
+                // filter out the values that are smaller than minLength
+                filter(value => value && value.length >= this.minLength)
            )
            .subscribe((value) => {
                this._httpClient.post('api/common/search', {query: value})
--- a/src/app/layout/common/search/search.module.ts
+++ b/src/app/layout/common/search/search.module.ts
@@ -28,9 +28,7 @@ import { SearchComponent } from 'app/layout/common/search/search.component';
    providers   : [
        {
            provide   : MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-            useFactory: (overlay: Overlay) => {
-                return () => overlay.scrollStrategies.block();
-            },
+            useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.block(),
            deps      : [Overlay]
        }
    ]
--- a/src/app/layout/common/user-menu/user-menu.component.ts
+++ b/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;
--- a/src/app/mock-api/apps/academy/api.ts
+++ b/src/app/mock-api/apps/academy/api.ts
@@ -74,7 +74,7 @@ export class AcademyMockApi
                const steps = cloneDeep(this._demoCourseSteps);

                // Find the course and attach steps to it
-                const course = courses.find((item) => item.id === id);
+                const course = courses.find(item => item.id === id);
                if ( course )
                {
                    course.steps = steps;
--- a/src/app/mock-api/apps/academy/data.ts
+++ b/src/app/mock-api/apps/academy/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 export const categories = [
    {
        id   : '9a67dff7-3c38-4052-a335-0cef93438ff6',
--- a/src/app/mock-api/apps/calendar/api.ts
+++ b/src/app/mock-api/apps/calendar/api.ts
@@ -110,11 +110,11 @@ export class CalendarMockApi
                const id = request.params.get('id');

                // Find the calendar and delete it
-                const index = this._calendars.findIndex((calendar) => calendar.id === id);
+                const index = this._calendars.findIndex(calendar => calendar.id === id);
                this._calendars.splice(index, 1);

                // Find the events that belong to the calendar and remove them as well
-                this._events = this._events.filter((event) => event.calendarId !== id);
+                this._events = this._events.filter(event => event.calendarId !== id);

                // Return the response
                return [200, true];
@@ -287,7 +287,7 @@ export class CalendarMockApi
                const id = request.params.get('id');

                // Find the event and delete it
-                const index = this._events.findIndex((item) => item.id === id);
+                const index = this._events.findIndex(item => item.id === id);
                this._events.splice(index, 1);

                // Return the response
@@ -307,7 +307,7 @@ export class CalendarMockApi
                const mode = request.body.mode;

                // Find the original recurring event from db
-                const recurringEvent = this._events.find((item) => item.id === event.recurringEventId);
+                const recurringEvent = this._events.find(item => item.id === event.recurringEventId);

                // Single
                if ( mode === 'single' )
@@ -406,7 +406,7 @@ export class CalendarMockApi
                if ( mode === 'all' )
                {
                    // Find the event index
-                    const eventIndex = this._events.findIndex((item) => item.id === event.recurringEventId);
+                    const eventIndex = this._events.findIndex(item => item.id === event.recurringEventId);

                    // Update the recurring event
                    this._events[eventIndex] = assign({}, this._events[eventIndex], omit(event, ['id', 'recurringEventId', 'range']));
@@ -428,7 +428,7 @@ export class CalendarMockApi
                const mode = request.params.get('mode');

                // Find the recurring event
-                const recurringEvent = this._events.find((item) => item.id === event.recurringEventId);
+                const recurringEvent = this._events.find(item => item.id === event.recurringEventId);

                // Single
                if ( mode === 'single' )
@@ -495,7 +495,7 @@ export class CalendarMockApi
                if ( mode === 'all' )
                {
                    // Find the event and delete it
-                    const index = this._events.findIndex((item) => item.id === event.recurringEventId);
+                    const index = this._events.findIndex(item => item.id === event.recurringEventId);
                    this._events.splice(index, 1);
                }

--- a/src/app/mock-api/apps/calendar/data.ts
+++ b/src/app/mock-api/apps/calendar/data.ts
@@ -1,6 +1,6 @@
+/* eslint-disable */
 import * as moment from 'moment';

-/* tslint:disable:max-line-length */
 export const calendars = [
    {
        id     : '1a470c8e-40ed-4c2d-b590-a4f1f6ead6cc',
--- a/src/app/mock-api/apps/chat/api.ts
+++ b/src/app/mock-api/apps/chat/api.ts
@@ -22,12 +22,12 @@ export class ChatMockApi
        this.registerHandlers();

        // Modify the chats array to attach certain data to it
-        this._chats = this._chats.map((chat) => ({
+        this._chats = this._chats.map(chat => ({
            ...chat,
            // Get the actual contact object from the id and attach it to the chat
-            contact: this._contacts.find((contact) => contact.id === chat.contactId),
+            contact: this._contacts.find(contact => contact.id === chat.contactId),
            // Since we use same set of messages on all chats, we assign them here.
-            messages: this._messages.map((message) => ({
+            messages: this._messages.map(message => ({
                ...message,
                chatId   : chat.id,
                contactId: message.contactId === 'me' ? this._profile.id : chat.contactId,
@@ -73,7 +73,7 @@ export class ChatMockApi
                const chats = cloneDeep(this._chats);

                // Find the chat we need
-                const chat = chats.find((item) => item.id === id);
+                const chat = chats.find(item => item.id === id);

                // Return the response
                return [200, chat];
@@ -124,7 +124,7 @@ export class ChatMockApi
                contacts.sort((a, b) => a.name.localeCompare(b.name));

                // Omit details and attachments from contacts
-                contacts = contacts.map((contact) => omit(contact, ['details', 'attachments']));
+                contacts = contacts.map(contact => omit(contact, ['details', 'attachments']));

                // Return the response
                return [200, contacts];
@@ -144,7 +144,7 @@ export class ChatMockApi
                const contacts = cloneDeep(this._contacts);

                // Find the contact
-                const contact = contacts.find((item) => item.id === id);
+                const contact = contacts.find(item => item.id === id);

                // Return the response
                return [200, contact];
--- a/src/app/mock-api/apps/chat/data.ts
+++ b/src/app/mock-api/apps/chat/data.ts
--- a/src/app/mock-api/apps/contacts/api.ts
+++ b/src/app/mock-api/apps/contacts/api.ts
@@ -66,7 +66,7 @@ export class ContactsMockApi
                if ( query )
                {
                    // Filter the contacts
-                    contacts = contacts.filter((contact) => contact.name && contact.name.toLowerCase().includes(query.toLowerCase()));
+                    contacts = contacts.filter(contact => contact.name && contact.name.toLowerCase().includes(query.toLowerCase()));
                }

                // Sort the contacts by the name field by default
@@ -90,9 +90,7 @@ export class ContactsMockApi
                const contacts = cloneDeep(this._contacts);

                // Find the contact
-                const contact = contacts.find((item) => {
-                    return item.id === id;
-                });
+                const contact = contacts.find(item => item.id === id);

                // Return the response
                return [200, contact];
@@ -288,10 +286,10 @@ export class ContactsMockApi
         *
         * @param file
         */
-        const readAsDataURL = (file: File): Promise<any> => {
+        const readAsDataURL = (file: File): Promise<any> =>

            // Return a new promise
-            return new Promise((resolve, reject) => {
+            new Promise((resolve, reject) => {

                // Create a new reader
                const reader = new FileReader();
@@ -308,8 +306,8 @@ export class ContactsMockApi

                // Read the file as the
                reader.readAsDataURL(file);
-            });
-        };
+            })
+        ;

        this._fuseMockApiService
            .onPost('api/apps/contacts/avatar')
--- a/src/app/mock-api/apps/contacts/data.ts
+++ b/src/app/mock-api/apps/contacts/data.ts
--- a/src/app/mock-api/apps/ecommerce/inventory/api.ts
+++ b/src/app/mock-api/apps/ecommerce/inventory/api.ts
@@ -81,9 +81,7 @@ export class ECommerceInventoryMockApi
                if ( search )
                {
                    // Filter the products
-                    products = products.filter((contact) => {
-                        return contact.name && contact.name.toLowerCase().includes(search.toLowerCase());
-                    });
+                    products = products.filter(contact => contact.name && contact.name.toLowerCase().includes(search.toLowerCase()));
                }

                // Paginate - Start
@@ -148,9 +146,7 @@ export class ECommerceInventoryMockApi
                const products = cloneDeep(this._products);

                // Find the product
-                const product = products.find((item) => {
-                    return item.id === id;
-                });
+                const product = products.find(item => item.id === id);

                // Return the response
                return [200, product];
--- a/src/app/mock-api/apps/ecommerce/inventory/data.ts
+++ b/src/app/mock-api/apps/ecommerce/inventory/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 export const categories = [
    {
        id      : 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',
--- a/src/app/mock-api/apps/file-manager/api.ts
+++ b/src/app/mock-api/apps/file-manager/api.ts
@@ -39,8 +39,8 @@ export class FileManagerMockApi
                const items = cloneDeep(this._items);

                // Separate the items by folders and files
-                const folders = items.filter((item) => item.type === 'folder');
-                const files = items.filter((item) => item.type !== 'folder');
+                const folders = items.filter(item => item.type === 'folder');
+                const files = items.filter(item => item.type !== 'folder');

                // Sort the folders and files alphabetically by filename
                folders.sort((a, b) => a.name.localeCompare(b.name));
--- a/src/app/mock-api/apps/file-manager/data.ts
+++ b/src/app/mock-api/apps/file-manager/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 export const items = [
    {
        id         : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
@@ -175,5 +175,5 @@ export const items = [
        type       : 'XLS',
        contents   : null,
        description: null
-    },
+    }
 ];
--- a/src/app/mock-api/apps/help-center/data.ts
+++ b/src/app/mock-api/apps/help-center/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 export const faqCategories = [
    {
        id   : '28924eab-97cc-465a-ba21-f232bb95843f',
--- a/src/app/mock-api/apps/mailbox/api.ts
+++ b/src/app/mock-api/apps/mailbox/api.ts
@@ -69,7 +69,7 @@ export class MailboxMockApi
                this._folders.forEach((folder) => {

                    // Get the mails of this folder
-                    const mails = this._mails.filter((mail) => mail.folder === folder.id);
+                    const mails = this._mails.filter(mail => mail.folder === folder.id);

                    // If we are counting the 'sent' or the 'trash' folder...
                    if ( folder.slug === 'sent' || folder.slug === 'trash' )
@@ -148,9 +148,7 @@ export class MailboxMockApi

                do
                {
-                    sameSlug = this._labels.filter((item) => {
-                        return item.slug === label.slug;
-                    });
+                    sameSlug = this._labels.filter(item => item.slug === label.slug);

                    if ( sameSlug.length > 0 )
                    {
@@ -215,13 +213,11 @@ export class MailboxMockApi
                const id = request.params.get('id');

                // Find the label and delete it
-                const index = this._labels.findIndex((item) => item.id === id);
+                const index = this._labels.findIndex(item => item.id === id);
                this._labels.splice(index, 1);

                // Get all the mails that have the label
-                const mailsWithLabel = this._mails.filter((mail) => {
-                    return mail.labels.indexOf(id) > -1;
-                });
+                const mailsWithLabel = this._mails.filter(mail => mail.labels.indexOf(id) > -1);

                // Iterate through them and remove the label
                mailsWithLabel.forEach((mail) => {
@@ -267,9 +263,7 @@ export class MailboxMockApi
                });

                // Sort by date - descending
-                mails.sort((a, b) => {
-                    return new Date(b.date).getTime() - new Date(a.date).getTime();
-                });
+                mails.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());

                // Figure out the cc and bcc counts
                mails.forEach((mail) => {
@@ -343,7 +337,7 @@ export class MailboxMockApi
                const mails = cloneDeep(this._mails);

                // Find the mail
-                const mail = mails.find((item) => item.id === id);
+                const mail = mails.find(item => item.id === id);

                return [
                    200,
--- a/src/app/mock-api/apps/mailbox/data.ts
+++ b/src/app/mock-api/apps/mailbox/data.ts
@@ -1,6 +1,6 @@
+/* eslint-disable */
 import * as moment from 'moment';

-/* tslint:disable:max-line-length */
 export const folders = [
    {
        id   : '7c004a19-4506-48ef-93ab-f16381302e3b',
--- a/src/app/mock-api/apps/notes/api.ts
+++ b/src/app/mock-api/apps/notes/api.ts
@@ -0,0 +1,261 @@
+import { Injectable } from '@angular/core';
+import { cloneDeep } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
+import { labels as labelsData, notes as notesData } from 'app/mock-api/apps/notes/data';
+import { FuseMockApiUtils } from '@fuse/lib/mock-api';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NotesMockApi
+{
+    private _labels: any[] = labelsData;
+    private _notes: any[] = notesData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/notes/labels')
+            .reply(() => [
+                200,
+                cloneDeep(this._labels)
+            ]);
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Create a new label
+                const label = {
+                    id   : FuseMockApiUtils.guid(),
+                    title: request.body.title
+                };
+
+                // Update the labels
+                this._labels.push(label);
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Get label
+                const updatedLabel = request.body.label;
+
+                // Update the label
+                this._labels = this._labels.map((label) => {
+                    if ( label.id === updatedLabel.id )
+                    {
+                        return {
+                            ...label,
+                            title: updatedLabel.title
+                        };
+                    }
+
+                    return label;
+                });
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Labels - DELETE
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onDelete('api/apps/notes/labels')
+            .reply(({request}) => {
+
+                // Get label id
+                const id = request.params.get('id');
+
+                // Delete the label
+                this._labels = this._labels.filter(label => label.id !== id);
+
+                // Go through notes and delete the label
+                this._notes = this._notes.map(note => ({
+                    ...note,
+                    labels: note.labels.filter(item => item !== id)
+                }));
+
+                return [
+                    200,
+                    cloneDeep(this._labels)
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Note Tasks - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes/tasks')
+            .reply(({request}) => {
+
+                // Get note and task
+                let updatedNote = request.body.note;
+                const task = request.body.task;
+
+                // Update the note
+                this._notes = this._notes.map((note) => {
+                    if ( note.id === updatedNote.id )
+                    {
+                        // Update the tasks
+                        if ( !note.tasks )
+                        {
+                            note.tasks = [];
+                        }
+
+                        note.tasks.push({
+                            id       : FuseMockApiUtils.guid(),
+                            content  : task,
+                            completed: false
+                        });
+
+                        // Update the updatedNote with the new task
+                        updatedNote = cloneDeep(note);
+
+                        return {
+                            ...note
+                        };
+                    }
+
+                    return note;
+                });
+
+                return [
+                    200,
+                    updatedNote
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/apps/notes/all')
+            .reply(() => {
+
+                // Clone the labels and notes
+                const labels = cloneDeep(this._labels);
+                let notes = cloneDeep(this._notes);
+
+                // Attach the labels to the notes
+                notes = notes.map(note => (
+                    {
+                        ...note,
+                        labels: note.labels.map(labelId => labels.find(label => label.id === labelId))
+                    }
+                ));
+
+                return [
+                    200,
+                    notes
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - POST
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPost('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get note
+                const note = request.body.note;
+
+                // Add an id
+                note.id = FuseMockApiUtils.guid();
+
+                // Push the note
+                this._notes.push(note);
+
+                return [
+                    200,
+                    note
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - PATCH
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onPatch('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get note
+                const updatedNote = request.body.updatedNote;
+
+                // Update the note
+                this._notes = this._notes.map((note) => {
+                    if ( note.id === updatedNote.id )
+                    {
+                        return {
+                            ...updatedNote
+                        };
+                    }
+
+                    return note;
+                });
+
+                return [
+                    200,
+                    updatedNote
+                ];
+            });
+
+        // -----------------------------------------------------------------------------------------------------
+        // @ Notes - DELETE
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onDelete('api/apps/notes')
+            .reply(({request}) => {
+
+                // Get the id
+                const id = request.params.get('id');
+
+                // Find the note and delete it
+                this._notes.forEach((item, index) => {
+
+                    if ( item.id === id )
+                    {
+                        this._notes.splice(index, 1);
+                    }
+                });
+
+                // Return the response
+                return [200, true];
+            });
+    }
+}
--- a/src/app/mock-api/apps/notes/data.ts
+++ b/src/app/mock-api/apps/notes/data.ts
@@ -0,0 +1,314 @@
+/* eslint-disable */
+import moment from 'moment';
+
+export const labels = [
+    {
+        id   : 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+        title: 'Family'
+    },
+    {
+        id   : 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+        title: 'Work'
+    },
+    {
+        id   : 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+        title: 'Tasks'
+    },
+    {
+        id   : '6c288794-47eb-4605-8bdf-785b61a449d3',
+        title: 'Priority'
+    },
+    {
+        id   : 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+        title: 'Personal'
+    },
+    {
+        id   : '2dc11344-3507-48e0-83d6-1c047107f052',
+        title: 'Friends'
+    }
+];
+
+export const notes = [
+    {
+        id       : '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
+        title    : '',
+        content  : 'Find a new company name',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
+        title    : '',
+        content  : 'Send the photos of last summer to John',
+        tasks    : null,
+        image    : 'assets/images/cards/14-640x480.jpg',
+        reminder : null,
+        labels   : [
+            'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : false,
+        createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
+        title    : '',
+        content  : 'Update the design of the theme',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
+        archived : false,
+        createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(),
+        updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString()
+    },
+    {
+        id       : '89861bd4-0144-4bb4-8b39-332ca10371d5',
+        title    : '',
+        content  : 'Theming support for all apps',
+        tasks    : null,
+        image    : null,
+        reminder : moment().hour(12).minute(34).add(50, 'day').toISOString(),
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
+        title    : 'Gift Ideas',
+        content  : 'Stephanie\'s birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)',
+        tasks    : [
+            {
+                id       : '330a924f-fb51-48f6-a374-1532b1dd353d',
+                content  : 'Scarf',
+                completed: false
+            },
+            {
+                id       : '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
+                content  : 'A new bike helmet',
+                completed: true
+            },
+            {
+                id       : 'bcb8923b-33cd-42c2-9203-170994fa24f5',
+                content  : 'Necklace',
+                completed: false
+            },
+            {
+                id       : '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
+                content  : 'Flowers',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : null,
+        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived : false,
+        createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '71d223bb-abab-4183-8919-cd3600a950b4',
+        title    : 'Shopping list',
+        content  : '',
+        tasks    : [
+            {
+                id       : 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
+                content  : 'Bread',
+                completed: true
+            },
+            {
+                id       : '34013111-ab2c-4b2f-9352-d2ae282f57d3',
+                content  : 'Milk',
+                completed: false
+            },
+            {
+                id       : '0fbdea82-cc79-4433-8ee4-54fd542c380d',
+                content  : 'Onions',
+                completed: false
+            },
+            {
+                id       : '66490222-743e-4262-ac91-773fcd98a237',
+                content  : 'Coffee',
+                completed: true
+            },
+            {
+                id       : 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
+                content  : 'Toilet Paper',
+                completed: true
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        labels   : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
+        archived : false,
+        createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '11fbeb98-ae5e-41ad-bed6-330886fd7906',
+        title    : 'Keynote Schedule',
+        content  : '',
+        tasks    : [
+            {
+                id       : '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
+                content  : 'Breakfast',
+                completed: true
+            },
+            {
+                id       : 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
+                content  : 'Opening ceremony',
+                completed: true
+            },
+            {
+                id       : '7a721b6d-9d85-48e0-b6c3-f927079af582',
+                content  : 'Talk 1: How we did it!',
+                completed: true
+            },
+            {
+                id       : 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
+                content  : 'Talk 2: How can you do it!',
+                completed: false
+            },
+            {
+                id       : 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
+                content  : 'Lunch break',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(11).minute(27).subtract(14, 'day').toISOString(),
+        labels   : [
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+            'e2f749f5-41ed-49d0-a92a-1c83d879e371'
+        ],
+        archived : false,
+        createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
+        title    : '',
+        content  : 'Organize the dad\'s surprise retirement party',
+        tasks    : null,
+        image    : null,
+        reminder : moment().hour(14).minute(56).subtract(25, 'day').toISOString(),
+        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived : false,
+        createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '6bc9f002-1675-417c-93c4-308fba39023e',
+        title    : 'Plan the road trip',
+        content  : '',
+        tasks    : null,
+        image    : 'assets/images/cards/17-640x480.jpg',
+        reminder : null,
+        labels   : [
+            '2dc11344-3507-48e0-83d6-1c047107f052',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : false,
+        createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(),
+        updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString()
+    },
+    {
+        id       : '15188348-78aa-4ed6-b5c2-028a214ba987',
+        title    : 'Office Address',
+        content  : '933 8th Street Stamford, CT 06902',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : false,
+        createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '1dbfc685-1a0a-4070-9ca7-ed896c523037',
+        title    : 'Tasks',
+        content  : '',
+        tasks    : [
+            {
+                id       : '004638bf-3ee6-47a5-891c-3be7b9f3df09',
+                content  : 'Wash the dishes',
+                completed: true
+            },
+            {
+                id       : '86e6820b-1ae3-4c14-a13e-35605a0d654b',
+                content  : 'Walk the dog',
+                completed: false
+            }
+        ],
+        image    : null,
+        reminder : moment().hour(13).minute(43).subtract(2, 'day').toISOString(),
+        labels   : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
+        archived : false,
+        createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '49548409-90a3-44d4-9a9a-f5af75aa9a66',
+        title    : '',
+        content  : 'Dinner with parents',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+            '6c288794-47eb-4605-8bdf-785b61a449d3'
+        ],
+        archived : false,
+        createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title    : '',
+        content  : 'Re-fill the medicine cabinet',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+            '6c288794-47eb-4605-8bdf-785b61a449d3'
+        ],
+        archived : true,
+        createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title    : '',
+        content  : 'Update the icons pack',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived : true,
+        createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(),
+        updatedAt: null
+    },
+    {
+        id       : '46214383-f8e7-44da-aa2e-0b685e0c5027',
+        title    : 'Team Meeting',
+        content  : 'Talk about the future of the web apps',
+        tasks    : null,
+        image    : null,
+        reminder : null,
+        labels   : [
+            'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+            'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
+        ],
+        archived : true,
+        createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(),
+        updatedAt: null
+    }
+];
--- a/src/app/mock-api/apps/tasks/api.ts
+++ b/src/app/mock-api/apps/tasks/api.ts
@@ -35,13 +35,10 @@ export class TasksMockApi
        // -----------------------------------------------------------------------------------------------------
        this._fuseMockApiService
            .onGet('api/apps/tasks/tags')
-            .reply(() => {
-
-                return [
-                    200,
-                    cloneDeep(this._tags)
-                ];
-            });
+            .reply(() => [
+                200,
+                cloneDeep(this._tags)
+            ]);

        // -----------------------------------------------------------------------------------------------------
        // @ Tags - POST
@@ -109,7 +106,7 @@ export class TasksMockApi
                const id = request.params.get('id');

                // Find the tag and delete it
-                const index = this._tags.findIndex((item) => item.id === id);
+                const index = this._tags.findIndex(item => item.id === id);
                this._tags.splice(index, 1);

                // Get the tasks that have the tag
@@ -165,9 +162,8 @@ export class TasksMockApi
                    let tasks = cloneDeep(this._tasks);

                    // Filter the tasks
-                    tasks = tasks.filter((task) => {
-                        return task.title && task.title.toLowerCase().includes(query.toLowerCase()) || task.notes && task.notes.toLowerCase().includes(query.toLowerCase());
-                    });
+                    tasks = tasks.filter(task => task.title && task.title.toLowerCase().includes(query.toLowerCase()) || task.notes && task.notes.toLowerCase()
+                                                                                                                                           .includes(query.toLowerCase()));

                    // Mark the found chars
                    tasks.forEach((task) => {
@@ -231,7 +227,7 @@ export class TasksMockApi
                const tasks = cloneDeep(this._tasks);

                // Find the task
-                const task = tasks.find((item) => item.id === id);
+                const task = tasks.find(item => item.id === id);

                return [
                    200,
@@ -317,7 +313,7 @@ export class TasksMockApi
                const id = request.params.get('id');

                // Find the task and delete it
-                const index = this._tasks.findIndex((item) => item.id === id);
+                const index = this._tasks.findIndex(item => item.id === id);
                this._tasks.splice(index, 1);

                return [
--- a/src/app/mock-api/apps/tasks/data.ts
+++ b/src/app/mock-api/apps/tasks/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 export const tags = [
    {
        id   : 'a0bf42ca-c3a5-47be-8341-b9c0bb8ef270',
--- a/src/app/mock-api/common/auth/api.ts
+++ b/src/app/mock-api/common/auth/api.ts
@@ -40,28 +40,24 @@ export class AuthMockApi
        // -----------------------------------------------------------------------------------------------------
        this._fuseMockApiService
            .onPost('api/auth/forgot-password', 1000)
-            .reply(() => {
-
-                // Simply return true
-                return [
+            .reply(() =>
+                [
                    200,
                    true
-                ];
-            });
+                ]
+            );

        // -----------------------------------------------------------------------------------------------------
        // @ Reset password - POST
        // -----------------------------------------------------------------------------------------------------
        this._fuseMockApiService
            .onPost('api/auth/reset-password', 1000)
-            .reply(() => {
-
-                // Simply return true
-                return [
+            .reply(() =>
+                [
                    200,
                    true
-                ];
-            });
+                ]
+            );

        // -----------------------------------------------------------------------------------------------------
        // @ Sign in - POST
@@ -76,9 +72,9 @@ export class AuthMockApi
                    return [
                        200,
                        {
-                            user        : cloneDeep(this._user),
-                            access_token: this._generateJWTToken(),
-                            token_type  : 'bearer'
+                            user       : cloneDeep(this._user),
+                            accessToken: this._generateJWTToken(),
+                            tokenType  : 'bearer'
                        }
                    ];
                }
@@ -98,7 +94,7 @@ export class AuthMockApi
            .reply(({request}) => {

                // Get the access token
-                const accessToken = request.body.access_token;
+                const accessToken = request.body.accessToken;

                // Verify the token
                if ( this._verifyJWTToken(accessToken) )
@@ -106,9 +102,9 @@ export class AuthMockApi
                    return [
                        200,
                        {
-                            user        : cloneDeep(this._user),
-                            access_token: this._generateJWTToken(),
-                            token_type  : 'bearer'
+                            user       : cloneDeep(this._user),
+                            accessToken: this._generateJWTToken(),
+                            tokenType  : 'bearer'
                        }
                    ];
                }
@@ -127,14 +123,14 @@ export class AuthMockApi
        // -----------------------------------------------------------------------------------------------------
        this._fuseMockApiService
            .onPost('api/auth/sign-up', 1500)
-            .reply(() => {
+            .reply(() =>

                // Simply return true
-                return [
+                [
                    200,
                    true
-                ];
-            });
+                ]
+            );

        // -----------------------------------------------------------------------------------------------------
        // @ Unlock session - POST
@@ -149,9 +145,9 @@ export class AuthMockApi
                    return [
                        200,
                        {
-                            user        : cloneDeep(this._user),
-                            access_token: this._generateJWTToken(),
-                            token_type  : 'bearer'
+                            user       : cloneDeep(this._user),
+                            accessToken: this._generateJWTToken(),
+                            tokenType  : 'bearer'
                        }
                    ];
                }
--- a/src/app/mock-api/common/messages/data.ts
+++ b/src/app/mock-api/common/messages/data.ts
@@ -1,7 +1,7 @@
+/* eslint-disable */
 import * as moment from 'moment';
 import { Message } from 'app/layout/common/messages/messages.types';

-/* tslint:disable:max-line-length */
 export const messages: Message[] = [
    {
        id         : '832276cc-c5e9-4fcc-8e23-d38e2e267bc9',
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 import { FuseNavigationItem } from '@fuse/components/navigation';

 export const defaultNavigation: FuseNavigationItem[] = [
@@ -127,6 +127,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
                    classes: 'px-2 bg-pink-600 text-white rounded-full'
                }
            },
+            {
+                id   : 'apps.notes',
+                title: 'Notes',
+                type : 'basic',
+                icon : 'heroicons_outline:pencil-alt',
+                link : '/apps/notes'
+            },
            {
                id   : 'apps.tasks',
                title: 'Tasks',
@@ -644,6 +651,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
                type : 'basic',
                icon : 'heroicons_outline:user-circle',
                link : '/pages/profile'
+            },
+            {
+                id   : 'pages.settings',
+                title: 'Settings',
+                type : 'basic',
+                icon : 'heroicons_outline:cog',
+                link : '/pages/settings'
            }
        ]
    },
@@ -906,7 +920,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                icon : 'heroicons_outline:speakerphone',
                link : '/docs/changelog',
                badge: {
-                    title  : '12.2.0',
+                    title  : '13.0.0',
                    classes: 'px-2 bg-yellow-300 text-black rounded-full'
                }
            },
@@ -1242,6 +1256,13 @@ export const futuristicNavigation: FuseNavigationItem[] = [
                    classes: 'px-2 bg-black bg-opacity-25 text-white rounded-full'
                }
            },
+            {
+                id   : 'apps.notes',
+                title: 'Notes',
+                type : 'basic',
+                icon : 'heroicons_outline:pencil-alt',
+                link : '/apps/notes'
+            },
            {
                id   : 'apps.tasks',
                title: 'Tasks',
--- a/src/app/mock-api/common/notifications/data.ts
+++ b/src/app/mock-api/common/notifications/data.ts
@@ -1,7 +1,7 @@
+/* eslint-disable */
 import * as moment from 'moment';
 import { Notification } from 'app/layout/common/notifications/notifications.types';

-/* tslint:disable:max-line-length */
 export const notifications: Notification[] = [
    {
        id         : '493190c9-5b61-4912-afe5-78c21f1044d7',
--- a/src/app/mock-api/common/search/api.ts
+++ b/src/app/mock-api/common/search/api.ts
@@ -55,14 +55,10 @@ export class SearchMockApi
                }

                // Filter the navigation
-                const navigationResults = cloneDeep(flatNavigation).filter((item) => {
-                    return (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query)));
-                });
+                const navigationResults = cloneDeep(flatNavigation).filter(item => (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query))));

                // Filter the contacts
-                const contactsResults = cloneDeep(this._contacts).filter((user) => {
-                    return user.name.toLowerCase().includes(query);
-                });
+                const contactsResults = cloneDeep(this._contacts).filter(user => user.name.toLowerCase().includes(query));

                // Create the results array
                const results = [];
--- a/src/app/mock-api/common/shortcuts/data.ts
+++ b/src/app/mock-api/common/shortcuts/data.ts
@@ -1,6 +1,6 @@
+/* eslint-disable */
 import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';

-/* tslint:disable:max-line-length */
 export const shortcuts: Shortcut[] = [
    {
        id         : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
--- a/src/app/mock-api/common/user/data.ts
+++ b/src/app/mock-api/common/user/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */
 export const user: any = {
    id    : 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df',
    name  : 'Brian Hughes',
--- a/src/app/mock-api/dashboards/analytics/data.ts
+++ b/src/app/mock-api/dashboards/analytics/data.ts
@@ -1,6 +1,6 @@
+/* eslint-disable */
 import * as moment from 'moment';

-/* tslint:disable:max-line-length */
 export const analytics = {
    visitors           : {
        series: {
--- a/src/app/mock-api/dashboards/project/data.ts
+++ b/src/app/mock-api/dashboards/project/data.ts
@@ -1,6 +1,6 @@
+/* eslint-disable */
 import * as moment from 'moment';

-/* tslint:disable:max-line-length */
 export const project = {
    githubIssues      : {
        overview: {
--- a/src/app/mock-api/index.ts
+++ b/src/app/mock-api/index.ts
@@ -11,6 +11,7 @@ import { IconsMockApi } from 'app/mock-api/ui/icons/api';
 import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
 import { MessagesMockApi } from 'app/mock-api/common/messages/api';
 import { NavigationMockApi } from 'app/mock-api/common/navigation/api';
+import { NotesMockApi } from 'app/mock-api/apps/notes/api';
 import { NotificationsMockApi } from 'app/mock-api/common/notifications/api';
 import { ProjectMockApi } from 'app/mock-api/dashboards/project/api';
 import { SearchMockApi } from 'app/mock-api/common/search/api';
@@ -32,6 +33,7 @@ export const mockApiServices = [
    MailboxMockApi,
    MessagesMockApi,
    NavigationMockApi,
+    NotesMockApi,
    NotificationsMockApi,
    ProjectMockApi,
    SearchMockApi,
--- a/src/app/mock-api/ui/icons/data.ts
+++ b/src/app/mock-api/ui/icons/data.ts
@@ -1,4 +1,4 @@
-/* tslint:disable:max-line-length */
+/* eslint-disable */

 // Updated at: 20210425 - 1792 icons
 export const material = [
--- a/src/app/modules/admin/apps/academy/academy.module.ts
+++ b/src/app/modules/admin/apps/academy/academy.module.ts
@@ -23,7 +23,7 @@ import { MatTabsModule } from '@angular/material/tabs';
        AcademyDetailsComponent,
        AcademyListComponent
    ],
-    imports: [
+    imports     : [
        RouterModule.forChild(academyRoutes),
        MatButtonModule,
        MatFormFieldModule,
--- a/src/app/modules/admin/apps/academy/details/details.component.html
+++ b/src/app/modules/admin/apps/academy/details/details.component.html
@@ -48,7 +48,8 @@
            <div class="py-2 px-8">
                <ol>
                    <ng-container *ngFor="let step of course.steps; let last = last; trackBy: trackByFn">
-                        <li class="relative group py-6"
+                        <li
+                            class="relative group py-6"
                            [class.current-step]="step.order === currentStep">
                            <ng-container *ngIf="!last">
                                <div
--- a/src/app/modules/admin/apps/academy/list/list.component.ts
+++ b/src/app/modules/admin/apps/academy/list/list.component.ts
@@ -81,23 +81,21 @@ export class AcademyListComponent implements OnInit, OnDestroy
                // Filter by category
                if ( categorySlug !== 'all' )
                {
-                    this.filteredCourses = this.filteredCourses.filter((course) => course.category === categorySlug);
+                    this.filteredCourses = this.filteredCourses.filter(course => course.category === categorySlug);
                }

                // Filter by search query
                if ( query !== '' )
                {
-                    this.filteredCourses = this.filteredCourses.filter((course) => {
-                        return course.title.toLowerCase().includes(query.toLowerCase())
-                            || course.description.toLowerCase().includes(query.toLowerCase())
-                            || course.category.toLowerCase().includes(query.toLowerCase());
-                    });
+                    this.filteredCourses = this.filteredCourses.filter(course => course.title.toLowerCase().includes(query.toLowerCase())
+                        || course.description.toLowerCase().includes(query.toLowerCase())
+                        || course.category.toLowerCase().includes(query.toLowerCase()));
                }

                // Filter by completed
                if ( hideCompleted )
                {
-                    this.filteredCourses = this.filteredCourses.filter((course) => course.progress.completed === 0);
+                    this.filteredCourses = this.filteredCourses.filter(course => course.progress.completed === 0);
                }
            });
    }
--- a/src/app/modules/admin/apps/calendar/calendar.component.html
+++ b/src/app/modules/admin/apps/calendar/calendar.component.html
@@ -319,16 +319,16 @@
                                                [ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span>
                                            <span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span>
                                        </mat-select-trigger>
-                                        <mat-option
-                                            *ngFor="let calendar of calendars"
-                                            [value]="calendar.id">
-                                            <div class="inline-flex items-center">
-                                                <span
-                                                    class="w-3 h-3 rounded-full"
-                                                    [ngClass]="calendar.color"></span>
-                                                <span class="ml-3">{{calendar.title}}</span>
-                                            </div>
-                                        </mat-option>
+                                        <ng-container *ngFor="let calendar of calendars">
+                                            <mat-option [value]="calendar.id">
+                                                <div class="inline-flex items-center">
+                                                    <span
+                                                        class="w-3 h-3 rounded-full"
+                                                        [ngClass]="calendar.color"></span>
+                                                    <span class="ml-3">{{calendar.title}}</span>
+                                                </div>
+                                            </mat-option>
+                                        </ng-container>
                                    </mat-select>
                                </mat-form-field>
                            </div>
--- a/src/app/modules/admin/apps/calendar/calendar.component.ts
+++ b/src/app/modules/admin/apps/calendar/calendar.component.ts
@@ -243,10 +243,8 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy
                    day       : 'numeric',
                    omitCommas: true
                },
-                columnHeaderHtml  : (date) => {
-                    return `<span class="fc-weekday">${moment(date).format('ddd')}</span>
-                            <span class="fc-date">${moment(date).format('D')}</span>`;
-                },
+                columnHeaderHtml  : date => `<span class="fc-weekday">${moment(date).format('ddd')}</span>
+                                             <span class="fc-date">${moment(date).format('D')}</span>`,
                slotDuration      : '01:00:00',
                slotLabelFormat   : this.eventTimeFormat
            },
@@ -386,7 +384,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy
            return;
        }

-        return this.calendars.find((calendar) => calendar.id === id);
+        return this.calendars.find(calendar => calendar.id === id);
    }

    /**
@@ -552,7 +550,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy
    onEventRender(calendarEvent): void
    {
        // Get event's calendar
-        const calendar = this.calendars.find((item) => item.id === calendarEvent.event.extendedProps.calendarId);
+        const calendar = this.calendars.find(item => item.id === calendarEvent.event.extendedProps.calendarId);

        // Return if the calendar doesn't exist...
        if ( !calendar )
@@ -779,6 +777,7 @@ export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy

    /**
     * Create the event panel overlay
+     *
     * @private
     */
    private _createEventPanelOverlay(positionStrategy): void
--- a/src/app/modules/admin/apps/calendar/calendar.service.ts
+++ b/src/app/modules/admin/apps/calendar/calendar.service.ts
@@ -13,7 +13,7 @@ export class CalendarService
    // Private
    private _calendars: BehaviorSubject<Calendar[] | null> = new BehaviorSubject(null);
    private _events: BehaviorSubject<CalendarEvent[] | null> = new BehaviorSubject(null);
-    private _loadedEventsRange: { start: Moment | null, end: Moment | null } = {
+    private _loadedEventsRange: { start: Moment | null; end: Moment | null } = {
        start: null,
        end  : null
    };
@@ -163,7 +163,7 @@ export class CalendarService
                    this._calendars.next(calendars);

                    // Remove the events belong to deleted calendar
-                    const events = this._events.value.filter((event) => event.calendarId !== id);
+                    const events = this._events.value.filter(event => event.calendarId !== id);

                    // Update the events
                    this._events.next(events);
--- a/src/app/modules/admin/apps/calendar/recurrence/recurrence.component.html
+++ b/src/app/modules/admin/apps/calendar/recurrence/recurrence.component.html
@@ -35,14 +35,15 @@
            class="mt-1.5 border-0 space-x-1"
            [formControlName]="'byDay'"
            [multiple]="true">
-            <mat-button-toggle
-                class="w-10 h-10 border-0 rounded-full"
-                *ngFor="let weekday of weekdays"
-                [disableRipple]="true"
-                [value]="weekday.value"
-                [matTooltip]="weekday.label">
-                {{weekday.abbr}}
-            </mat-button-toggle>
+            <ng-container *ngFor="let weekday of weekdays">
+                <mat-button-toggle
+                    class="w-10 h-10 border-0 rounded-full"
+                    [disableRipple]="true"
+                    [value]="weekday.value"
+                    [matTooltip]="weekday.label">
+                    {{weekday.abbr}}
+                </mat-button-toggle>
+            </ng-container>
        </mat-button-toggle-group>
    </div>

--- a/src/app/modules/admin/apps/calendar/recurrence/recurrence.component.ts
+++ b/src/app/modules/admin/apps/calendar/recurrence/recurrence.component.ts
@@ -212,7 +212,7 @@ export class CalendarRecurrenceComponent implements OnInit, OnDestroy
            5: 'th'
        };
        this.nthWeekdayText = nthWeekday.slice(0, 1) + ordinalNumberSuffixes[nthWeekday.slice(0, 1)] + ' ' +
-            this.weekdays.find((item) => item.value === nthWeekday.slice(-2)).label;
+            this.weekdays.find(item => item.value === nthWeekday.slice(-2)).label;

        // Set the defaults on recurrence form values
        this.recurrenceFormValues = {
--- a/src/app/modules/admin/apps/calendar/sidebar/sidebar.component.html
+++ b/src/app/modules/admin/apps/calendar/sidebar/sidebar.component.html
@@ -9,25 +9,25 @@
            [svgIcon]="'heroicons_solid:plus-circle'"
            (click)="addCalendar()"></mat-icon>
    </div>
-    <div
-        class="group flex items-center justify-between mt-2"
-        *ngFor="let calendar of calendars">
-        <div
-            class="flex items-center"
-            (click)="toggleCalendarVisibility(calendar)">
+    <ng-container *ngFor="let calendar of calendars">
+        <div class="group flex items-center justify-between mt-2">
+            <div
+                class="flex items-center"
+                (click)="toggleCalendarVisibility(calendar)">
+                <mat-icon
+                    class="cursor-pointer"
+                    [svgIcon]="calendar.visible ? 'check_box' : 'check_box_outline_blank'"></mat-icon>
+                <span
+                    class="w-3 h-3 ml-2 rounded-full"
+                    [ngClass]="calendar.color"></span>
+                <span class="ml-2 leading-none">{{calendar.title}}</span>
+            </div>
            <mat-icon
-                class="cursor-pointer"
-                [svgIcon]="calendar.visible ? 'check_box' : 'check_box_outline_blank'"></mat-icon>
-            <span
-                class="w-3 h-3 ml-2 rounded-full"
-                [ngClass]="calendar.color"></span>
-            <span class="ml-2 leading-none">{{calendar.title}}</span>
+                class="hidden group-hover:inline-flex icon-size-5 cursor-pointer"
+                [svgIcon]="'heroicons_solid:pencil-alt'"
+                (click)="openEditPanel(calendar)"></mat-icon>
        </div>
-        <mat-icon
-            class="hidden group-hover:inline-flex icon-size-5 cursor-pointer"
-            [svgIcon]="'heroicons_solid:pencil-alt'"
-            (click)="openEditPanel(calendar)"></mat-icon>
-    </div>
+    </ng-container>

    <!-- Settings -->
    <div class="-mx-4 mt-auto">
@@ -62,19 +62,20 @@
                        </mat-select-trigger>
                        <div class="px-4 pt-5 text-xl font-semibold">Calendar color</div>
                        <div class="flex flex-wrap w-48 my-4 mx-3 -mr-5">
-                            <mat-option
-                                class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
-                                *ngFor="let color of calendarColors"
-                                [value]="color"
-                                #matOption="matOption">
-                                <mat-icon
-                                    class="absolute m-3 text-white"
-                                    *ngIf="matOption.selected"
-                                    [svgIcon]="'heroicons_outline:check'"></mat-icon>
-                                <span
-                                    class="flex w-10 h-10 m-1 rounded-full"
-                                    [ngClass]="color"></span>
-                            </mat-option>
+                            <ng-container *ngFor="let color of calendarColors">
+                                <mat-option
+                                    class="relative flex w-12 h-12 p-0 cursor-pointer rounded-full bg-transparent"
+                                    [value]="color"
+                                    #matOption="matOption">
+                                    <mat-icon
+                                        class="absolute m-3 text-white"
+                                        *ngIf="matOption.selected"
+                                        [svgIcon]="'heroicons_outline:check'"></mat-icon>
+                                    <span
+                                        class="flex w-10 h-10 m-1 rounded-full"
+                                        [ngClass]="color"></span>
+                                </mat-option>
+                            </ng-container>
                        </div>
                    </mat-select>
                </mat-form-field>
--- a/src/app/modules/admin/apps/calendar/sidebar/sidebar.component.ts
+++ b/src/app/modules/admin/apps/calendar/sidebar/sidebar.component.ts
@@ -15,8 +15,8 @@ import { calendarColors } from 'app/modules/admin/apps/calendar/sidebar/calendar
 })
 export class CalendarSidebarComponent implements OnInit, OnDestroy
 {
-    @ViewChild('editPanel') private _editPanel: TemplateRef<any>;
    @Output() readonly calendarUpdated: EventEmitter<any> = new EventEmitter<any>();
+    @ViewChild('editPanel') private _editPanel: TemplateRef<any>;

    calendar: Calendar | null;
    calendarColors: any = calendarColors;
@@ -194,6 +194,7 @@ export class CalendarSidebarComponent implements OnInit, OnDestroy

    /**
     * Create the edit panel overlay
+     *
     * @private
     */
    private _createEditPanelOverlay(): void
--- a/src/app/modules/admin/apps/chat/chat.module.ts
+++ b/src/app/modules/admin/apps/chat/chat.module.ts
@@ -26,7 +26,7 @@ import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.co
        NewChatComponent,
        ProfileComponent
    ],
-    imports: [
+    imports     : [
        RouterModule.forChild(chatRoutes),
        MatButtonModule,
        MatCheckboxModule,
@@ -36,7 +36,7 @@ import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.co
        MatMenuModule,
        MatSidenavModule,
        FuseAutogrowModule,
-        SharedModule,
+        SharedModule
    ]
 })
 export class ChatModule
--- a/src/app/modules/admin/apps/chat/chat.types.ts
+++ b/src/app/modules/admin/apps/chat/chat.types.ts
@@ -20,7 +20,7 @@ export interface Contact
        }[];
        phoneNumbers?: {
            country?: string;
-            number?: string;
+            phoneNumber?: string;
            label?: string;
        }[];
        title?: string;
@@ -29,9 +29,9 @@ export interface Contact
        address?: string;
    };
    attachments?: {
-        media?: any[]
-        docs?: any[]
-        links?: any[]
+        media?: any[];
+        docs?: any[];
+        links?: any[];
    };
 }

--- a/src/app/modules/admin/apps/chat/chats/chats.component.html
+++ b/src/app/modules/admin/apps/chat/chats/chats.component.html
@@ -116,8 +116,9 @@
                        <ng-container *ngIf="filteredChats.length > 0; else noChats">
                            <ng-container *ngFor="let chat of filteredChats; trackBy: trackByFn">
                                <div
-                                    class="z-20 flex items-center py-5 px-8 cursor-pointer border-b hover:bg-hover"
-                                    [ngClass]="{'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
+                                    class="z-20 flex items-center py-5 px-8 cursor-pointer border-b"
+                                    [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
+                                                'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
                                    [routerLink]="[chat.id]">
                                    <div class="relative flex flex-0 items-center justify-center w-10 h-10">
                                        <ng-container *ngIf="chat.unreadCount > 0">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sercan	3395e7f0bc	(docs) Updated docs	2021-05-15 13:44:13 +03:00
sercan	ee1caef303	Increased the version number (changelog) Updated changelog	2021-05-14 17:44:18 +03:00
sercan	cad136c0e5	(dependencies) Updated packages	2021-05-14 17:26:28 +03:00
sercan	d159ae1458	(linting) Migrated over to the ESLint	2021-05-14 17:17:06 +03:00
sercan	0c5f5b9165	(global) "ng build" automatically builds into production mode by default	2021-05-14 14:15:54 +03:00
sercan	f4ca06a9a8	(dependencies) Updated Angular Material to v12.0.0	2021-05-14 14:15:14 +03:00
sercan	6a86deaeec	(dependencies) Updated Angular to v12.0.0	2021-05-14 12:12:24 +03:00
sercan	44e7401310	(pages/settings) Moved titles to the same line with sidebar toggle button + small alignment tweaks	2021-05-12 15:49:36 +03:00
sercan	6d1dee8d0d	(3rdParty) Fixed: "_redirects" file must be in /src folder	2021-05-12 14:47:53 +03:00
sercan	b8b3d1daab	(3rdParty) Added a _redirects file for Netlify support	2021-05-12 14:28:16 +03:00
sercan	c3ed184853	(pages/settings) Added a close button for the sidebar	2021-05-12 14:14:03 +03:00
sercan	a9ada174b4	(routing) Use "corrected" behavior for relative link resolution (https://github.com/angular/angular/pull/22394 ) as it's the default value starting from Angular v11 (https://github.com/angular/angular/pull/25609 )	2021-05-12 12:46:01 +03:00
sercan	57ba071fa5	(pages/settings) Fixed: Drawer shouldn't be closed on 'side' mode when changing the selected panel	2021-05-11 13:09:38 +03:00
sercan	cc761d58e5	(pages/settings) Added new Settings page	2021-05-11 12:48:51 +03:00
sercan	5c3db88908	(apps/ecommerce) Tweaked hover color on inventory list for better consistency	2021-05-07 12:43:04 +03:00
sercan	039eef98ee	(apps/chat) Tweaked hover colors on lists for better consistency	2021-05-07 12:40:02 +03:00
sercan	83e67e1286	(docs/changelog) Small visual improvement on changelog titles	2021-05-07 12:33:50 +03:00
sercan	2bea991ba3	(refactoring) Move *ngFor directives to their own <ng-container> elements. This is mostly a personal preference but it's a good habit to have as you cannot put more than one structural directive on a single element. This way our main repeated element is free of any common structural directives so we can use ours on them if needed.	2021-05-07 12:10:45 +03:00
sercan	7e430a269c	(apps/tasks) Visual improvements (apps/contacts) Tweaked the hover color on contacts list for better consistency	2021-05-07 11:54:47 +03:00
sercan	4ccce1b423	Increased the version number (changelog) Updated the changelog	2021-05-06 17:11:12 +03:00
sercan	f6b4ca0880	(apps/notes) Responsive adjustments	2021-05-06 17:05:56 +03:00
sercan	77014174e8	(apps/notes) New version of the Notes app	2021-05-06 17:01:14 +03:00
sercan	5ac7002a98	(fuse/masonry) Fixed: Masonry doesn't work with the data that comes from async pipe	2021-05-06 12:07:07 +03:00
sercan	b0f1e1de95	(apps/mailbox) App title font size adjustment for better consistency	2021-05-05 17:52:10 +03:00
sercan	cf01383358	(apps/mailbox) Use shadow on threads for better consistency	2021-05-05 17:27:39 +03:00
sercan	e4442d683b	(apps/tasks) Tweaked the hover color on task list for better consistency	2021-05-05 17:27:12 +03:00
sercan	623b43a94c	(fuse/styles) Fixed: fuse-highlight doesn't have a margin around in Docs	2021-05-03 18:49:00 +03:00
sercan	e7a1d386a6	(fuse/masonry) Added a new component (and its docs) for creating Masonry layouts	2021-05-03 18:47:57 +03:00
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/card/public-api';`