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

(general) Updated version numbers and changelog
(dependencies) Updated various dependencies to their latest versions
2026-04-25 22:24:13 +00:00 · 2021-06-03 13:28:30 +03:00 · 2021-06-03 13:25:07 +03:00 · 2021-06-03 13:18:05 +03:00 · 2021-06-03 11:27:51 +03:00 · 2021-06-02 12:45:12 +03:00
641 changed files with 110156 additions and 21175 deletions
@@ -1,57 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "project": {
-        "name": "fuse2"
-    },
-    "apps": [
-        {
-            "root": "src",
-            "outDir": "dist",
-            "assets": [
-                "assets",
-                "favicon.ico"
-            ],
-            "index": "index.html",
-            "main": "main.ts",
-            "polyfills": "polyfills.ts",
-            "test": "test.ts",
-            "tsconfig": "tsconfig.app.json",
-            "testTsconfig": "tsconfig.spec.json",
-            "prefix": "app",
-            "styles": [
-                "styles.scss"
-            ],
-            "scripts": [],
-            "environmentSource": "environments/environment.ts",
-            "environments": {
-                "dev": "environments/environment.ts",
-                "prod": "environments/environment.prod.ts"
-            }
-        }
-    ],
-    "e2e": {
-        "protractor": {
-            "config": "./protractor.conf.js"
-        }
-    },
-    "lint": [
-        {
-            "project": "src/tsconfig.app.json"
-        },
-        {
-            "project": "src/tsconfig.spec.json"
-        },
-        {
-            "project": "e2e/tsconfig.e2e.json"
-        }
-    ],
-    "test": {
-        "karma": {
-            "config": "./karma.conf.js"
-        }
-    },
-    "defaults": {
-        "styleExt": "scss",
-        "component": {}
-    }
-}
@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
@@ -1,12 +1,16 @@
+# Editor configuration, see https://editorconfig.org
 root = true

 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true

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

 # dependencies
 /node_modules

+# profiling files
+chrome-profiler-events*.json
+
 # IDEs and editors
 /.idea
 .project
@@ -23,6 +28,7 @@
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*

 # misc
 /.sass-cache
@@ -30,13 +36,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings

-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db
@@ -1 +0,0 @@
-save-prefix=''
@@ -0,0 +1 @@
+12
@@ -0,0 +1,72 @@
+// -----------------------------------------------------------------------------------------------------
+// @ 3rd party credits
+// -----------------------------------------------------------------------------------------------------
+
+// Flags
+https://github.com/Yummygum/flagpack-core
+
+// Icons
+Material - https://material.io/tools/icons
+Feather - https://feathericons.com/
+Heroicons - https://github.com/refactoringui/heroicons
+Iconsmind - https://iconsmind.com/
+
+// Avatars
+https://uifaces.co
+
+// 404, 500 & Maintenance
+https://undraw.co
+
+// Mail app
+Photo by Riccardo Chiarini on Unsplash - https://unsplash.com/photos/2VDa8bnLM8c
+Photo by Johannes Plenio on Unsplash - https://unsplash.com/photos/RwHv7LgeC7s
+Photo by Jamie Davies on Unsplash - https://unsplash.com/photos/Hao52Fu9-F8
+Photo by Christian Joudrey on Unsplash - https://unsplash.com/photos/mWRR1xj95hg
+
+// Profile page
+Photo by Alex Knight on Unsplash - https://unsplash.com/photos/DpPutJwgyW8
+
+// Cards
+Photo by Kym Ellis on Unsplash - https://unsplash.com/photos/RPT3AjdXlZc
+Photo by Patrick Hendry on Unsplash - https://unsplash.com/photos/Qgxk3PQsMiI
+Photo by Hailey Kean on Unsplash - https://unsplash.com/photos/QxjsOlFNr_4
+Photo by Nathan Anderson on Unsplash - https://unsplash.com/photos/mG8ShlWrMDI
+Photo by Adrian Infernus on Unsplash - https://unsplash.com/photos/5apewqWk978
+Photo by freestocks.org on Unsplash - https://unsplash.com/photos/c73TZ2sIU38
+Photo by Tim Marshall on Unsplash - https://unsplash.com/photos/PKSCrmZdvwA
+Photo by Daniel Koponyas on Unsplash - https://unsplash.com/photos/rbiLY6ZwvXQ
+Photo by John Westrock on Unsplash - https://unsplash.com/photos/LCesauDseu8
+Photo by Gabriel Sollmann on Unsplash - https://unsplash.com/photos/kFWj9y-tJB4
+Photo by Kevin Wolf on Unsplash - https://unsplash.com/photos/BJyjgEdNTPs
+Photo by Luca Bravo on Unsplash - https://unsplash.com/photos/hFzIoD0F_i8
+Photo by Ian Baldwin on Unsplash - https://unsplash.com/photos/Dlj-SxxTlQ0
+Photo by Ben Kolde on Unsplash - https://unsplash.com/photos/KRTFIBOfcFw
+Photo by Chad Peltola on Unsplash - https://unsplash.com/photos/BTvQ2ET_iKc
+Photo by rocknwool on Unsplash - https://unsplash.com/photos/r56oO1V5oms
+Photo by Vita Vilcina on Unsplash - https://unsplash.com/photos/KtOid0FLjqU
+Photo by Jia Ye on Unsplash - https://unsplash.com/photos/y8ZnQqgohLk
+Photo by Parker Whitson on Unsplash - https://unsplash.com/photos/OlTYIqTjmVM
+Photo by Dorian Hurst on Unsplash - https://unsplash.com/photos/a9uWPQlIbYc
+Photo by Everaldo Coelho on Unsplash - https://unsplash.com/photos/KPaSCpklCZw
+Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/fh2JefbNlII
+Photo by Orlova Maria on Unsplash - https://unsplash.com/photos/p8y4dWEMGMU
+Photo by Jake Blucker on Unsplash - https://unsplash.com/photos/tMzCrBkM99Y
+Photo by Jerry Zhang on Unsplash - https://unsplash.com/photos/oIBcow6n36s
+Photo by John Cobb on Unsplash - https://unsplash.com/photos/IE_sifhay7o
+Photo by Dan Gold on Unsplash - https://unsplash.com/photos/mDlhOIfGxNI
+Photo by Ana Toma on Unsplash - https://unsplash.com/photos/XsGwe6gYg0c
+Photo by Andrea on Unsplash - https://unsplash.com/photos/1AWY0N960Sk
+Photo by Aswin on Unsplash - https://unsplash.com/photos/_roUcFWstas
+Photo by Justin Kauffman on Unsplash - https://unsplash.com/photos/aWG_dqyhI0A
+Photo by Barna Bartis on Unsplash - https://unsplash.com/photos/VVoBQqWrvkc
+Photo by Kyle Hinkson on Unsplash - https://unsplash.com/photos/3439EnvnAGo
+Photo by Spencer Watson on Unsplash - https://unsplash.com/photos/5TBf16GnHKg
+Photo by adrian on Unsplash - https://unsplash.com/photos/1wrzvwoK8A4
+Photo by Christopher Rusev on Unsplash - https://unsplash.com/photos/7gKWgCRixf0
+Photo by Stephen Leonardi on Unsplash - https://unsplash.com/photos/MDmwQVgDHHM
+Photo by Dwinanda Nurhanif Mujito on Unsplash - https://unsplash.com/photos/pKT5Mg16w_w
+Photo by Humphrey Muleba on Unsplash - https://unsplash.com/photos/Zuvf5mxT5fs
+Photo by adrian on Unsplash - https://unsplash.com/photos/PNRxLFPMyJY
+Photo by Dahee Son on Unsplash - https://unsplash.com/photos/tV06QVJXVxU
+Photo by Zachary Kyra-Derksen on Unsplash - https://unsplash.com/photos/vkqS7vLQUtg
+Photo by Rodrigo Soares on Unsplash - https://unsplash.com/photos/8BFWBUkSqQo
@@ -0,0 +1,6 @@
+Envato Standard License
+
+Copyright (c) Sercan Yemen <sercanyemen@gmail.com>
+
+This project is protected by Envato's Standard License. For more information,
+check the official license page at [https://themeforest.net/licenses/standard](https://themeforest.net/licenses/standard)
@@ -1,6 +1,6 @@
-# Fuse2
+# Fuse - Admin template and Starter project for Angular

-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.3.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli)

 ## Development server

@@ -8,11 +8,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w

 ## Code scaffolding

-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

 ## Build

-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

 ## Running unit tests

@@ -20,9 +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/).
-Before running the tests make sure you are serving the app via `ng serve`.
+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.
@@ -0,0 +1,144 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "fuse": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/fuse",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "allowedCommonJsDependencies": [
+                            "apexcharts",
+                            "highlight.js",
+                            "crypto-js/enc-utf8",
+                            "crypto-js/hmac-sha256",
+                            "crypto-js/enc-base64"
+                        ],
+                        "assets": [
+                            "src/favicon-16x16.png",
+                            "src/favicon-32x32.png",
+                            "src/assets",
+                            {
+                                "glob": "_redirects",
+                                "input": "src",
+                                "output": "/"
+                            }
+                        ],
+                        "stylePreprocessorOptions": {
+                            "includePaths": [
+                                "src/@fuse/styles"
+                            ]
+                        },
+                        "styles": [
+                            "src/@fuse/styles/tailwind.scss",
+                            "src/@fuse/styles/themes.scss",
+                            "src/styles/vendors.scss",
+                            "src/@fuse/styles/main.scss",
+                            "src/styles/styles.scss",
+                            "src/styles/tailwind.scss"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "5mb",
+                                    "maximumError": "8mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "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",
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "fuse:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "fuse:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon-16x16.png",
+                            "src/favicon-32x32.png",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles/styles.scss"
+                        ],
+                        "scripts": []
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "fuse",
+    "cli": {
+        "defaultCollection": "@angular-eslint/schematics"
+    }
+}
@@ -1,14 +0,0 @@
-import { Fuse2Page } from './app.po';
-
-describe('fuse2 App', () => {
-  let page: Fuse2Page;
-
-  beforeEach(() => {
-    page = new Fuse2Page();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
-  });
-});
@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class Fuse2Page {
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
-}
@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  }
-}
@@ -1,33 +1,45 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html

-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    angularCli: {
-      environment: 'dev'
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
+module.exports = function (config)
+{
+    config.set({
+        basePath           : '',
+        frameworks         : ['jasmine', '@angular-devkit/build-angular'],
+        plugins            : [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client             : {
+            jasmine     : {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter   : {
+            dir      : require('path').join(__dirname, './coverage/angular12'),
+            subdir   : '.',
+            reporters: [
+                {type: 'html'},
+                {type: 'text-summary'}
+            ]
+        },
+        reporters          : ['progress', 'kjhtml'],
+        port               : 9876,
+        colors             : true,
+        logLevel           : config.LOG_INFO,
+        autoWatch          : true,
+        browsers           : ['Chrome'],
+        singleRun          : false,
+        restartOnFileChange: true
+    });
 };
@@ -1,69 +1,90 @@
 {
-  "name": "fuse2",
-  "version": "1.0.3",
-  "license": "",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "4.3.5",
-    "@angular/cdk": "2.0.0-beta.10",
-    "@angular/common": "4.3.5",
-    "@angular/compiler": "4.3.5",
-    "@angular/core": "4.3.5",
-    "@angular/flex-layout": "2.0.0-beta.9",
-    "@angular/forms": "4.3.5",
-    "@angular/http": "4.3.5",
-    "@angular/material": "2.0.0-beta.10",
-    "@angular/platform-browser": "4.3.5",
-    "@angular/platform-browser-dynamic": "4.3.5",
-    "@angular/router": "4.3.5",
-    "@swimlane/ngx-charts": "6.0.2",
-    "@swimlane/ngx-datatable": "9.3.1",
-    "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.19.0",
-    "angular-in-memory-web-api": "0.3.2",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.0",
-    "d3": "4.10.0",
-    "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
-    "intl": "1.2.5",
-    "moment": "2.18.1",
-    "ngx-color-picker": "4.3.1",
-    "ngx-cookie-service": "1.0.7",
-    "ngx-perfect-scrollbar": "4.5.6",
-    "rxjs": "5.4.3",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.17"
-  },
-  "devDependencies": {
-    "@angular/cli": "^1.3.2",
-    "@angular/compiler-cli": "4.3.5",
-    "@angular/language-service": "4.3.5",
-    "@ngtools/webpack": "^1.6.2",
-    "@types/jasmine": "^2.5.54",
-    "@types/jasminewd2": "^2.0.2",
-    "@types/node": "^6.0.88",
-    "codelyzer": "~3.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "node-sass": "^4.5.3",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.0.4",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
-  }
+    "name": "@fuse/demo",
+    "version": "13.0.3",
+    "license": "https://themeforest.net/licenses/standard",
+    "private": true,
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "dependencies": {
+        "@angular/animations": "12.0.2",
+        "@angular/cdk": "12.0.2",
+        "@angular/common": "12.0.2",
+        "@angular/compiler": "12.0.2",
+        "@angular/core": "12.0.2",
+        "@angular/forms": "12.0.2",
+        "@angular/material": "12.0.2",
+        "@angular/material-moment-adapter": "12.0.2",
+        "@angular/platform-browser": "12.0.2",
+        "@angular/platform-browser-dynamic": "12.0.2",
+        "@angular/router": "12.0.2",
+        "@fullcalendar/angular": "4.4.5-beta",
+        "@fullcalendar/core": "4.4.2",
+        "@fullcalendar/daygrid": "4.4.2",
+        "@fullcalendar/interaction": "4.4.2",
+        "@fullcalendar/list": "4.4.2",
+        "@fullcalendar/moment": "4.4.2",
+        "@fullcalendar/rrule": "4.4.2",
+        "@fullcalendar/timegrid": "4.4.2",
+        "@ngneat/transloco": "2.21.0",
+        "apexcharts": "3.26.3",
+        "crypto-js": "3.3.0",
+        "highlight.js": "11.0.0",
+        "lodash-es": "4.17.21",
+        "moment": "2.29.1",
+        "ng-apexcharts": "1.5.10",
+        "ngx-markdown": "12.0.1",
+        "ngx-quill": "14.0.0",
+        "perfect-scrollbar": "1.5.1",
+        "quill": "1.3.7",
+        "rrule": "2.6.8",
+        "rxjs": "6.6.7",
+        "tslib": "2.2.0",
+        "web-animations-js": "2.3.2",
+        "zone.js": "0.11.4"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "12.0.2",
+        "@angular-eslint/builder": "12.1.0",
+        "@angular-eslint/eslint-plugin": "12.1.0",
+        "@angular-eslint/eslint-plugin-template": "12.1.0",
+        "@angular-eslint/schematics": "12.1.0",
+        "@angular-eslint/template-parser": "12.1.0",
+        "@angular/cli": "12.0.2",
+        "@angular/compiler-cli": "12.0.2",
+        "@angular/language-service": "12.0.2",
+        "@tailwindcss/aspect-ratio": "0.2.1",
+        "@tailwindcss/line-clamp": "0.2.1",
+        "@tailwindcss/typography": "0.4.1",
+        "@types/chroma-js": "2.1.3",
+        "@types/crypto-js": "3.1.47",
+        "@types/highlight.js": "10.1.0",
+        "@types/jasmine": "3.6.11",
+        "@types/lodash": "4.14.170",
+        "@types/lodash-es": "4.17.4",
+        "@types/node": "12.20.14",
+        "@typescript-eslint/eslint-plugin": "4.26.0",
+        "@typescript-eslint/parser": "4.26.0",
+        "autoprefixer": "10.2.6",
+        "chroma-js": "2.1.2",
+        "eslint": "7.27.0",
+        "eslint-plugin-import": "2.23.4",
+        "eslint-plugin-jsdoc": "35.1.2",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "jasmine-core": "3.7.1",
+        "karma": "6.3.3",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-coverage": "2.0.3",
+        "karma-jasmine": "4.0.1",
+        "karma-jasmine-html-reporter": "1.6.0",
+        "lodash": "4.17.21",
+        "postcss": "8.3.0",
+        "tailwindcss": "2.1.4",
+        "typescript": "4.2.4"
+    }
 }
@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './e2e/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};
@@ -0,0 +1,14 @@
+export class FuseAnimationCurves
+{
+    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';
+}
@@ -0,0 +1,34 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Expand / collapse
+// -----------------------------------------------------------------------------------------------------
+const expandCollapse = trigger('expandCollapse',
+    [
+        state('void, collapsed',
+            style({
+                height: '0'
+            })
+        ),
+
+        state('*, expanded',
+            style('*')
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void <=> false, collapsed <=> false, expanded <=> false', []),
+
+        // Transition
+        transition('void <=> *, collapsed <=> expanded',
+            animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { expandCollapse };
@@ -0,0 +1,330 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in
+// -----------------------------------------------------------------------------------------------------
+const fadeIn = trigger('fadeIn',
+    [
+        state('void',
+            style({
+                opacity: 0
+            })
+        ),
+
+        state('*',
+            style({
+                opacity: 1
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in top
+// -----------------------------------------------------------------------------------------------------
+const fadeInTop = trigger('fadeInTop',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in bottom
+// -----------------------------------------------------------------------------------------------------
+const fadeInBottom = trigger('fadeInBottom',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in left
+// -----------------------------------------------------------------------------------------------------
+const fadeInLeft = trigger('fadeInLeft',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade in right
+// -----------------------------------------------------------------------------------------------------
+const fadeInRight = trigger('fadeInRight',
+    [
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out
+// -----------------------------------------------------------------------------------------------------
+const fadeOut = trigger('fadeOut',
+    [
+        state('*',
+            style({
+                opacity: 1
+            })
+        ),
+
+        state('void',
+            style({
+                opacity: 0
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out top
+// -----------------------------------------------------------------------------------------------------
+const fadeOutTop = trigger('fadeOutTop',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out bottom
+// -----------------------------------------------------------------------------------------------------
+const fadeOutBottom = trigger('fadeOutBottom',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out left
+// -----------------------------------------------------------------------------------------------------
+const fadeOutLeft = trigger('fadeOutLeft',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Fade out right
+// -----------------------------------------------------------------------------------------------------
+const fadeOutRight = trigger('fadeOutRight',
+    [
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
@@ -0,0 +1 @@
+export * from '@fuse/animations/public-api';
@@ -0,0 +1,15 @@
+import { expandCollapse } from '@fuse/animations/expand-collapse';
+import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
+import { shake } from '@fuse/animations/shake';
+import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
+import { zoomIn, zoomOut } from '@fuse/animations/zoom';
+
+export const fuseAnimations = [
+    expandCollapse,
+    fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight,
+    fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight,
+    shake,
+    slideInTop, slideInBottom, slideInLeft, slideInRight,
+    slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
+    zoomIn, zoomOut
+];
@@ -0,0 +1,73 @@
+import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Shake
+// -----------------------------------------------------------------------------------------------------
+const shake = trigger('shake',
+    [
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *, * => true',
+            [
+                animate('{{timings}}',
+                    keyframes([
+                        style({
+                            transform: 'translate3d(0, 0, 0)',
+                            offset   : 0
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.1
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.2
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.3
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.4
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.5
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.6
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.7
+                        }),
+                        style({
+                            transform: 'translate3d(10px, 0, 0)',
+                            offset   : 0.8
+                        }),
+                        style({
+                            transform: 'translate3d(-10px, 0, 0)',
+                            offset   : 0.9
+                        }),
+                        style({
+                            transform: 'translate3d(0, 0, 0)',
+                            offset   : 1
+                        })
+                    ])
+                )
+            ],
+            {
+                params: {
+                    timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
+                }
+            }
+        )
+    ]
+);
+
+export { shake };
@@ -0,0 +1,252 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in top
+// -----------------------------------------------------------------------------------------------------
+const slideInTop = trigger('slideInTop',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in bottom
+// -----------------------------------------------------------------------------------------------------
+const slideInBottom = trigger('slideInBottom',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in left
+// -----------------------------------------------------------------------------------------------------
+const slideInLeft = trigger('slideInLeft',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide in right
+// -----------------------------------------------------------------------------------------------------
+const slideInRight = trigger('slideInRight',
+    [
+        state('void',
+            style({
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out top
+// -----------------------------------------------------------------------------------------------------
+const slideOutTop = trigger('slideOutTop',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(0, -100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out bottom
+// -----------------------------------------------------------------------------------------------------
+const slideOutBottom = trigger('slideOutBottom',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(0, 100%, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out left
+// -----------------------------------------------------------------------------------------------------
+const slideOutLeft = trigger('slideOutLeft',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(-100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Slide out right
+// -----------------------------------------------------------------------------------------------------
+const slideOutRight = trigger('slideOutRight',
+    [
+        state('*',
+            style({
+                transform: 'translate3d(0, 0, 0)'
+            })
+        ),
+
+        state('void',
+            style({
+                transform: 'translate3d(100%, 0, 0)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
@@ -0,0 +1,73 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { FuseAnimationCurves, FuseAnimationDurations } from '@fuse/animations/defaults';
+
+// -----------------------------------------------------------------------------------------------------
+// @ Zoom in
+// -----------------------------------------------------------------------------------------------------
+const zoomIn = trigger('zoomIn',
+    [
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'scale(0.5)'
+            })
+        ),
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'scale(1)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('void => false', []),
+
+        // Transition
+        transition('void => *', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
+                }
+            }
+        )
+    ]
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ Zoom out
+// -----------------------------------------------------------------------------------------------------
+const zoomOut = trigger('zoomOut',
+    [
+
+        state('*',
+            style({
+                opacity  : 1,
+                transform: 'scale(1)'
+            })
+        ),
+
+        state('void',
+            style({
+                opacity  : 0,
+                transform: 'scale(0.5)'
+            })
+        ),
+
+        // Prevent the transition if the state is false
+        transition('false => void', []),
+
+        // Transition
+        transition('* => void', animate('{{timings}}'),
+            {
+                params: {
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
+                }
+            }
+        )
+    ]
+);
+
+export { zoomIn, zoomOut };
+
@@ -0,0 +1,82 @@
+<div
+    class="fuse-alert-container"
+    *ngIf="!dismissible || dismissible && !dismissed"
+    [@fadeIn]="!dismissed"
+    [@fadeOut]="!dismissed">
+
+    <!-- Border -->
+    <div
+        class="fuse-alert-border"
+        *ngIf="appearance === 'border'"></div>
+
+    <!-- Icon -->
+    <div
+        class="fuse-alert-icon"
+        *ngIf="showIcon">
+
+        <!-- Custom icon -->
+        <div class="fuse-alert-custom-icon">
+            <ng-content select="[fuseAlertIcon]"></ng-content>
+        </div>
+
+        <!-- Default icons -->
+        <div class="fuse-alert-default-icon">
+
+            <mat-icon
+                *ngIf="type === 'primary'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'accent'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'warn'"
+                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'basic'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'info'"
+                [svgIcon]="'heroicons_solid:information-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'success'"
+                [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'warning'"
+                [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
+
+            <mat-icon
+                *ngIf="type === 'error'"
+                [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+
+        </div>
+
+    </div>
+
+    <!-- Content -->
+    <div class="fuse-alert-content">
+
+        <div class="fuse-alert-title">
+            <ng-content select="[fuseAlertTitle]"></ng-content>
+        </div>
+
+        <div class="fuse-alert-message">
+            <ng-content></ng-content>
+        </div>
+
+    </div>
+
+    <!-- Dismiss button -->
+    <button
+        class="fuse-alert-dismiss-button"
+        mat-icon-button
+        (click)="dismiss()">
+        <mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
+    </button>
+
+</div>
@@ -0,0 +1,213 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+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';
+
+@Component({
+    selector       : 'fuse-alert',
+    templateUrl    : './alert.component.html',
+    styleUrls      : ['./alert.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    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;
+    @Input() dismissible: boolean = false;
+    @Input() name: string = this._fuseUtilsService.randomId();
+    @Input() showIcon: boolean = true;
+    @Input() type: FuseAlertType = 'primary';
+    @Output() readonly dismissedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseAlertService: FuseAlertService,
+        private _fuseUtilsService: FuseUtilsService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'fuse-alert-appearance-border' : this.appearance === 'border',
+            'fuse-alert-appearance-fill'   : this.appearance === 'fill',
+            'fuse-alert-appearance-outline': this.appearance === 'outline',
+            'fuse-alert-appearance-soft'   : this.appearance === 'soft',
+            'fuse-alert-dismissed'         : this.dismissed,
+            'fuse-alert-dismissible'       : this.dismissible,
+            'fuse-alert-show-icon'         : this.showIcon,
+            'fuse-alert-type-primary'      : this.type === 'primary',
+            'fuse-alert-type-accent'       : this.type === 'accent',
+            'fuse-alert-type-warn'         : this.type === 'warn',
+            'fuse-alert-type-basic'        : this.type === 'basic',
+            'fuse-alert-type-info'         : this.type === 'info',
+            'fuse-alert-type-success'      : this.type === 'success',
+            'fuse-alert-type-warning'      : this.type === 'warning',
+            'fuse-alert-type-error'        : this.type === 'error'
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Dismissed
+        if ( 'dismissed' in changes )
+        {
+            // Coerce the value to a boolean
+            this.dismissed = coerceBooleanProperty(changes.dismissed.currentValue);
+
+            // Dismiss/show the alert
+            this._toggleDismiss(this.dismissed);
+        }
+
+        // Dismissible
+        if ( 'dismissible' in changes )
+        {
+            // Coerce the value to a boolean
+            this.dismissible = coerceBooleanProperty(changes.dismissible.currentValue);
+        }
+
+        // Show icon
+        if ( 'showIcon' in changes )
+        {
+            // Coerce the value to a boolean
+            this.showIcon = coerceBooleanProperty(changes.showIcon.currentValue);
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the dismiss calls
+        this._fuseAlertService.onDismiss
+            .pipe(
+                filter(name => this.name === name),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+
+                // Dismiss the alert
+                this.dismiss();
+            });
+
+        // Subscribe to the show calls
+        this._fuseAlertService.onShow
+            .pipe(
+                filter(name => this.name === name),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+
+                // Show the alert
+                this.show();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Dismiss the alert
+     */
+    dismiss(): void
+    {
+        // Return if the alert is already dismissed
+        if ( this.dismissed )
+        {
+            return;
+        }
+
+        // Dismiss the alert
+        this._toggleDismiss(true);
+    }
+
+    /**
+     * Show the dismissed alert
+     */
+    show(): void
+    {
+        // Return if the alert is already showing
+        if ( !this.dismissed )
+        {
+            return;
+        }
+
+        // Show the alert
+        this._toggleDismiss(false);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Dismiss/show the alert
+     *
+     * @param dismissed
+     * @private
+     */
+    private _toggleDismiss(dismissed: boolean): void
+    {
+        // Return if the alert is not dismissible
+        if ( !this.dismissible )
+        {
+            return;
+        }
+
+        // Set the dismissed
+        this.dismissed = dismissed;
+
+        // Execute the observable
+        this.dismissedChanged.next(this.dismissed);
+
+        // Notify the change detector
+        this._changeDetectorRef.markForCheck();
+    }
+}
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
+
+@NgModule({
+    declarations: [
+        FuseAlertComponent
+    ],
+    imports     : [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule
+    ],
+    exports     : [
+        FuseAlertComponent
+    ]
+})
+export class FuseAlertModule
+{
+}
@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseAlertService
+{
+    private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
+    private readonly _onShow: ReplaySubject<string> = new ReplaySubject<string>(1);
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for onDismiss
+     */
+    get onDismiss(): Observable<any>
+    {
+        return this._onDismiss.asObservable();
+    }
+
+    /**
+     * Getter for onShow
+     */
+    get onShow(): Observable<any>
+    {
+        return this._onShow.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Dismiss the alert
+     *
+     * @param name
+     */
+    dismiss(name: string): void
+    {
+        // Return if the name is not provided
+        if ( !name )
+        {
+            return;
+        }
+
+        // Execute the observable
+        this._onDismiss.next(name);
+    }
+
+    /**
+     * Show the dismissed alert
+     *
+     * @param name
+     */
+    show(name: string): void
+    {
+        // Return if the name is not provided
+        if ( !name )
+        {
+            return;
+        }
+
+        // Execute the observable
+        this._onShow.next(name);
+    }
+
+}
@@ -0,0 +1,15 @@
+export type FuseAlertAppearance =
+    | 'border'
+    | 'fill'
+    | 'outline'
+    | 'soft';
+
+export type FuseAlertType =
+    | 'primary'
+    | 'accent'
+    | 'warn'
+    | 'basic'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
@@ -0,0 +1 @@
+export * from '@fuse/components/alert/public-api';
@@ -0,0 +1,4 @@
+export * from '@fuse/components/alert/alert.component';
+export * from '@fuse/components/alert/alert.module';
+export * from '@fuse/components/alert/alert.service';
+export * from '@fuse/components/alert/alert.types';
@@ -0,0 +1,30 @@
+<!-- Flippable card -->
+<ng-container *ngIf="flippable">
+
+    <!-- Front -->
+    <div class="fuse-card-front">
+        <ng-content select="[fuseCardFront]"></ng-content>
+    </div>
+
+    <!-- Back -->
+    <div class="fuse-card-back">
+        <ng-content select="[fuseCardBack]"></ng-content>
+    </div>
+
+</ng-container>
+
+<!-- Normal card -->
+<ng-container *ngIf="!flippable">
+
+    <!-- Content -->
+    <ng-content></ng-content>
+
+    <!-- Expansion -->
+    <div
+        class="fuse-card-expansion"
+        *ngIf="expanded"
+        [@expandCollapse]>
+        <ng-content select="[fuseCardExpansion]"></ng-content>
+    </div>
+
+</ng-container>
@@ -0,0 +1,63 @@
+fuse-card {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    @apply rounded-2xl shadow bg-card;
+
+    /* Flippable */
+    &.fuse-card-flippable {
+        border-radius: 0;
+        overflow: visible;
+        transform-style: preserve-3d;
+        transition: transform 1s;
+        perspective: 600px;
+        background: transparent;
+        @apply shadow-none;
+
+        &.fuse-card-face-back {
+
+            .fuse-card-front {
+                visibility: hidden;
+                opacity: 0;
+                transform: rotateY(180deg);
+            }
+
+            .fuse-card-back {
+                visibility: visible;
+                opacity: 1;
+                transform: rotateY(360deg);
+            }
+        }
+
+        .fuse-card-front,
+        .fuse-card-back {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            z-index: 10;
+            transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
+            backface-visibility: hidden;
+            @apply rounded-2xl shadow bg-card;
+        }
+
+        .fuse-card-front {
+            position: relative;
+            opacity: 1;
+            visibility: visible;
+            transform: rotateY(0deg);
+            overflow: hidden;
+        }
+
+        .fuse-card-back {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            opacity: 0;
+            visibility: hidden;
+            transform: rotateY(180deg);
+            overflow: hidden auto;
+        }
+    }
+}
@@ -0,0 +1,74 @@
+import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseCardFace } from '@fuse/components/card/card.types';
+
+@Component({
+    selector     : 'fuse-card',
+    templateUrl  : './card.component.html',
+    styleUrls    : ['./card.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    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';
+    @Input() flippable: boolean = false;
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'fuse-card-expanded'  : this.expanded,
+            'fuse-card-face-back' : this.flippable && this.face === 'back',
+            'fuse-card-face-front': this.flippable && this.face === 'front',
+            'fuse-card-flippable' : this.flippable
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Expanded
+        if ( 'expanded' in changes )
+        {
+            // Coerce the value to a boolean
+            this.expanded = coerceBooleanProperty(changes.expanded.currentValue);
+        }
+
+        // Flippable
+        if ( 'flippable' in changes )
+        {
+            // Coerce the value to a boolean
+            this.flippable = coerceBooleanProperty(changes.flippable.currentValue);
+        }
+    }
+}
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseCardComponent } from '@fuse/components/card/card.component';
+
+@NgModule({
+    declarations: [
+        FuseCardComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseCardComponent
+    ]
+})
+export class FuseCardModule
+{
+}
@@ -0,0 +1,3 @@
+export type FuseCardFace =
+    | 'front'
+    | 'back';
@@ -0,0 +1 @@
+export * from '@fuse/components/card/public-api';
@@ -0,0 +1,2 @@
+export * from '@fuse/components/card/card.component';
+export * from '@fuse/components/card/card.module';
@@ -0,0 +1,101 @@
+<div
+    class="range"
+    (click)="openPickerPanel()"
+    #pickerPanelOrigin>
+
+    <div class="start">
+        <div class="date">{{range.startDate}}</div>
+        <div
+            class="time"
+            *ngIf="range.startTime">{{range.startTime}}</div>
+    </div>
+
+    <div class="separator">-</div>
+
+    <div class="end">
+        <div class="date">{{range.endDate}}</div>
+        <div
+            class="time"
+            *ngIf="range.endTime">{{range.endTime}}</div>
+    </div>
+
+</div>
+
+<ng-template #pickerPanel>
+
+    <!-- Start -->
+    <div class="start">
+
+        <div class="month">
+            <div class="month-header">
+                <button
+                    class="previous-button"
+                    mat-icon-button
+                    (click)="prev()"
+                    tabindex="1">
+                    <mat-icon [svgIcon]="'heroicons_outline:chevron-left'"></mat-icon>
+                </button>
+                <div class="month-label">{{getMonthLabel(1)}}</div>
+            </div>
+            <mat-month-view
+                [(activeDate)]="activeDates.month1"
+                [dateFilter]="dateFilter()"
+                [dateClass]="dateClass()"
+                (click)="$event.stopImmediatePropagation()"
+                (selectedChange)="onSelectedDateChange($event)"
+                #matMonthView1>
+            </mat-month-view>
+        </div>
+
+        <mat-form-field
+            class="fuse-mat-no-subscript time start-time"
+            *ngIf="timeRange">
+            <input
+                matInput
+                [autocomplete]="'off'"
+                [formControl]="startTimeFormControl"
+                (blur)="updateStartTime($event)"
+                tabindex="3">
+            <mat-label>Start time</mat-label>
+        </mat-form-field>
+
+    </div>
+
+    <!-- End -->
+    <div class="end">
+
+        <div class="month">
+            <div class="month-header">
+                <div class="month-label">{{getMonthLabel(2)}}</div>
+                <button
+                    class="next-button"
+                    mat-icon-button
+                    (click)="next()"
+                    tabindex="2">
+                    <mat-icon [svgIcon]="'heroicons_outline:chevron-right'"></mat-icon>
+                </button>
+            </div>
+            <mat-month-view
+                [(activeDate)]="activeDates.month2"
+                [dateFilter]="dateFilter()"
+                [dateClass]="dateClass()"
+                (click)="$event.stopImmediatePropagation()"
+                (selectedChange)="onSelectedDateChange($event)"
+                #matMonthView2>
+            </mat-month-view>
+        </div>
+
+        <mat-form-field
+            class="fuse-mat-no-subscript time end-time"
+            *ngIf="timeRange">
+            <input
+                matInput
+                [formControl]="endTimeFormControl"
+                (blur)="updateEndTime($event)"
+                tabindex="4">
+            <mat-label>End time</mat-label>
+        </mat-form-field>
+
+    </div>
+
+</ng-template>
@@ -0,0 +1,292 @@
+/* Variables */
+$body-cell-padding: 2px;
+
+fuse-date-range {
+    display: flex;
+
+    .range {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        min-height: 48px;
+        max-height: 48px;
+        cursor: pointer;
+
+        .start,
+        .end {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding: 0 16px;
+            border-radius: 6px;
+            border-width: 1px;
+            line-height: 1;
+            @apply shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500;
+
+            .date {
+                white-space: nowrap;
+
+                + .time {
+                    margin-left: 8px;
+                }
+            }
+
+            .time {
+                white-space: nowrap;
+            }
+        }
+
+        .separator {
+            margin: 0 2px;
+
+            @screen sm {
+                margin: 0 12px;
+            }
+        }
+    }
+}
+
+.fuse-date-range-panel {
+    border-radius: 4px;
+    padding: 24px;
+    @apply shadow-2xl bg-card;
+
+    .start,
+    .end {
+        display: flex;
+        flex-direction: column;
+
+        .month {
+            max-width: 196px;
+            min-width: 196px;
+            width: 196px;
+
+            .month-header {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 32px;
+                margin-bottom: 16px;
+
+                .previous-button,
+                .next-button {
+                    position: absolute;
+                    width: 24px !important;
+                    height: 24px !important;
+                    min-height: 24px !important;
+                    max-height: 24px !important;
+                    line-height: 24px !important;
+
+                    .mat-icon {
+                        @apply icon-size-5;
+                    }
+                }
+
+                .previous-button {
+                    left: 0;
+                }
+
+                .next-button {
+                    right: 0;
+                }
+
+                .month-label {
+                    font-weight: 500;
+                    @apply text-secondary;
+                }
+            }
+
+            mat-month-view {
+                display: flex;
+                min-height: 188px;
+
+                .mat-calendar-table {
+                    width: 100%;
+                    border-collapse: collapse;
+
+                    tbody {
+
+                        tr {
+
+                            &[aria-hidden=true] {
+                                display: none !important;
+                            }
+
+                            &:first-child {
+
+                                td:first-child {
+
+                                    &[aria-hidden=true] {
+                                        visibility: hidden;
+                                        pointer-events: none;
+                                        opacity: 0;
+                                    }
+                                }
+                            }
+
+                            td,
+                            td:hover {
+
+                                &.fuse-date-range {
+
+                                    &:before {
+                                        @apply bg-primary-200;
+                                    }
+
+                                    .mat-calendar-body-cell-content {
+                                        background-color: transparent;
+                                    }
+                                }
+
+                                &.fuse-date-range-start,
+                                &.fuse-date-range-end {
+
+                                    .mat-calendar-body-cell-content {
+                                        @apply bg-primary text-on-primary;
+                                    }
+                                }
+
+                                .mat-calendar-body-today {
+                                    border: none;
+                                }
+                            }
+
+                            td.mat-calendar-body-cell {
+                                width: 28px !important;
+                                height: 28px !important;
+                                padding: $body-cell-padding !important;
+
+                                &.fuse-date-range {
+                                    position: relative;
+
+                                    &:before {
+                                        content: '';
+                                        position: absolute;
+                                        top: $body-cell-padding;
+                                        right: 0;
+                                        bottom: $body-cell-padding;
+                                        left: 0;
+                                    }
+
+                                    &.fuse-date-range-start {
+
+                                        &:before {
+                                            left: $body-cell-padding;
+                                            border-radius: 999px 0 0 999px;
+                                        }
+
+                                        &.fuse-date-range-end,
+                                        &:last-child {
+
+                                            &:before {
+                                                right: $body-cell-padding;
+                                                border-radius: 999px;
+                                            }
+                                        }
+                                    }
+
+                                    &.fuse-date-range-end {
+
+                                        &:before {
+                                            right: $body-cell-padding;
+                                            border-radius: 0 999px 999px 0;
+                                        }
+
+                                        &:first-child {
+
+                                            &:before {
+                                                left: $body-cell-padding;
+                                                border-radius: 999px;
+                                            }
+                                        }
+                                    }
+
+                                    &:first-child {
+
+                                        &:before {
+                                            border-radius: 999px 0 0 999px;
+                                        }
+                                    }
+
+                                    &:last-child {
+
+                                        &:before {
+                                            border-radius: 0 999px 999px 0;
+                                        }
+                                    }
+                                }
+
+                                .mat-calendar-body-cell-content {
+                                    position: relative;
+                                    top: 0;
+                                    left: 0;
+                                    width: 24px;
+                                    height: 24px;
+                                    font-size: 12px;
+                                }
+                            }
+
+                            td.mat-calendar-body-label {
+
+                                + td.mat-calendar-body-cell {
+
+                                    &.fuse-date-range {
+
+                                        &:before {
+                                            border-radius: 999px 0 0 999px;
+                                        }
+
+                                        &.fuse-date-range-start {
+
+                                            &.fuse-date-range-end {
+                                                border-radius: 999px;
+                                            }
+                                        }
+
+                                        &.fuse-date-range-end {
+
+                                            &:before {
+                                                left: $body-cell-padding;
+                                                border-radius: 999px;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .time {
+            width: 100%;
+            max-width: 196px;
+        }
+    }
+
+    .start {
+        align-items: flex-start;
+        margin-right: 20px;
+
+        .month {
+
+            .month-label {
+                margin-left: 8px;
+            }
+        }
+    }
+
+    .end {
+        align-items: flex-end;
+        margin-left: 20px;
+
+        .month {
+
+            .month-label {
+                margin-right: 8px;
+            }
+        }
+    }
+}
@@ -0,0 +1,682 @@
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { MatCalendarCellCssClasses, MatMonthView } from '@angular/material/datepicker';
+import { Subject } from 'rxjs';
+import * as moment from 'moment';
+import { Moment } from 'moment';
+
+@Component({
+    selector     : 'fuse-date-range',
+    templateUrl  : './date-range.component.html',
+    styleUrls    : ['./date-range.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'fuseDateRange',
+    providers    : [
+        {
+            provide    : NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FuseDateRangeComponent),
+            multi      : true
+        }
+    ]
+})
+export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnDestroy
+{
+    @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 } = {
+        month1: null,
+        month2: null
+    };
+    setWhichDate: 'start' | 'end' = 'start';
+    startTimeFormControl: FormControl;
+    endTimeFormControl: FormControl;
+    private _dateFormat: string;
+    private _onChange: (value: any) => void;
+    private _onTouched: (value: any) => void;
+    private _programmaticChange!: boolean;
+    private _range: { start: Moment | null; end: Moment | null } = {
+        start: null,
+        end  : null
+    };
+    private _timeFormat: string;
+    private _timeRange: boolean;
+    private readonly _timeRegExp: RegExp = new RegExp('^(0[0-9]|1[0-9]|2[0-4]|[0-9]):([0-5][0-9])(A|(?:AM)|P|(?:PM))?$', 'i');
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _elementRef: ElementRef,
+        private _overlay: Overlay,
+        private _renderer2: Renderer2,
+        private _viewContainerRef: ViewContainerRef
+    )
+    {
+        this._onChange = (): void => {
+        };
+        this._onTouched = (): void => {
+        };
+        this.dateFormat = 'DD/MM/YYYY';
+        this.timeFormat = '12';
+
+        // Initialize the component
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Setter & getter for dateFormat input
+     *
+     * @param value
+     */
+    @Input()
+    set dateFormat(value: string)
+    {
+        // Return if the values are the same
+        if ( this._dateFormat === value )
+        {
+            return;
+        }
+
+        // Store the value
+        this._dateFormat = value;
+    }
+
+    get dateFormat(): string
+    {
+        return this._dateFormat;
+    }
+
+    /**
+     * Setter & getter for timeFormat input
+     *
+     * @param value
+     */
+    @Input()
+    set timeFormat(value: string)
+    {
+        // Return if the values are the same
+        if ( this._timeFormat === value )
+        {
+            return;
+        }
+
+        // Set format based on the time format input
+        this._timeFormat = value === '12' ? 'hh:mmA' : 'HH:mm';
+    }
+
+    get timeFormat(): string
+    {
+        return this._timeFormat;
+    }
+
+    /**
+     * Setter & getter for timeRange input
+     *
+     * @param value
+     */
+    @Input()
+    set timeRange(value: boolean)
+    {
+        // Return if the values are the same
+        if ( this._timeRange === value )
+        {
+            return;
+        }
+
+        // Store the value
+        this._timeRange = value;
+
+        // If the time range turned off...
+        if ( !value )
+        {
+            this.range = {
+                start: this._range.start.clone().startOf('day'),
+                end  : this._range.end.clone().endOf('day')
+            };
+        }
+    }
+
+    get timeRange(): boolean
+    {
+        return this._timeRange;
+    }
+
+    /**
+     * Setter & getter for range input
+     *
+     * @param value
+     */
+    @Input()
+    set range(value)
+    {
+        if ( !value )
+        {
+            return;
+        }
+
+        // Check if the value is an object and has 'start' and 'end' values
+        if ( !value.start || !value.end )
+        {
+            console.error('Range input must have "start" and "end" properties!');
+
+            return;
+        }
+
+        // Check if we are setting an individual date or both of them
+        const whichDate = value.whichDate || null;
+
+        // Get the start and end dates as moment
+        const start = moment(value.start);
+        const end = moment(value.end);
+
+        // If we are only setting the start date...
+        if ( whichDate === 'start' )
+        {
+            // Set the start date
+            this._range.start = start.clone();
+
+            // If the selected start date is after the end date...
+            if ( this._range.start.isAfter(this._range.end) )
+            {
+                // Set the end date to the start date but keep the end date's time
+                const endDate = start.clone().hours(this._range.end.hours()).minutes(this._range.end.minutes()).seconds(this._range.end.seconds());
+
+                // Test this new end date to see if it's ahead of the start date
+                if ( this._range.start.isBefore(endDate) )
+                {
+                    // If it's, set the new end date
+                    this._range.end = endDate;
+                }
+                else
+                {
+                    // Otherwise, set the end date same as the start date
+                    this._range.end = start.clone();
+                }
+            }
+        }
+
+        // If we are only setting the end date...
+        if ( whichDate === 'end' )
+        {
+            // Set the end date
+            this._range.end = end.clone();
+
+            // If the selected end date is before the start date...
+            if ( this._range.start.isAfter(this._range.end) )
+            {
+                // Set the start date to the end date but keep the start date's time
+                const startDate = end.clone().hours(this._range.start.hours()).minutes(this._range.start.minutes()).seconds(this._range.start.seconds());
+
+                // Test this new end date to see if it's ahead of the start date
+                if ( this._range.end.isAfter(startDate) )
+                {
+                    // If it's, set the new start date
+                    this._range.start = startDate;
+                }
+                else
+                {
+                    // Otherwise, set the start date same as the end date
+                    this._range.start = end.clone();
+                }
+            }
+        }
+
+        // If we are setting both dates...
+        if ( !whichDate )
+        {
+            // Set the start date
+            this._range.start = start.clone();
+
+            // If the start date is before the end date, set the end date as normal.
+            // If the start date is after the end date, set the end date same as the start date.
+            this._range.end = start.isBefore(end) ? end.clone() : start.clone();
+        }
+
+        // Prepare another range object that holds the ISO formatted range dates
+        const range = {
+            start: this._range.start.clone().toISOString(),
+            end  : this._range.end.clone().toISOString()
+        };
+
+        // Emit the range changed event with the range
+        this.rangeChanged.emit(range);
+
+        // Update the model with the range if the change was not a programmatic change
+        // Because programmatic changes trigger writeValue which triggers onChange and onTouched
+        // internally causing them to trigger twice which breaks the form's pristine and touched
+        // statuses.
+        if ( !this._programmaticChange )
+        {
+            this._onTouched(range);
+            this._onChange(range);
+        }
+
+        // Set the active dates
+        this.activeDates = {
+            month1: this._range.start.clone(),
+            month2: this._range.start.clone().add(1, 'month')
+        };
+
+        // Set the time form controls
+        this.startTimeFormControl.setValue(this._range.start.clone().format(this._timeFormat).toString());
+        this.endTimeFormControl.setValue(this._range.end.clone().format(this._timeFormat).toString());
+
+        // Run ngAfterContentInit on month views to trigger
+        // re-render on month views if they are available
+        if ( this._matMonthView1 && this._matMonthView2 )
+        {
+            this._matMonthView1.ngAfterContentInit();
+            this._matMonthView2.ngAfterContentInit();
+        }
+
+        // Reset the programmatic change status
+        this._programmaticChange = false;
+    }
+
+    get range(): any
+    {
+        // Clone the range start and end
+        const start = this._range.start.clone();
+        const end = this._range.end.clone();
+
+        // Build and return the range object
+        return {
+            startDate: start.clone().format(this.dateFormat),
+            startTime: this.timeRange ? start.clone().format(this.timeFormat) : null,
+            endDate  : end.clone().format(this.dateFormat),
+            endTime  : this.timeRange ? end.clone().format(this.timeFormat) : null
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Control Value Accessor
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Update the form model on change
+     *
+     * @param fn
+     */
+    registerOnChange(fn: any): void
+    {
+        this._onChange = fn;
+    }
+
+    /**
+     * Update the form model on blur
+     *
+     * @param fn
+     */
+    registerOnTouched(fn: any): void
+    {
+        this._onTouched = fn;
+    }
+
+    /**
+     * Write to view from model when the form model changes programmatically
+     *
+     * @param range
+     */
+    writeValue(range: { start: string; end: string }): void
+    {
+        // Set this change as a programmatic one
+        this._programmaticChange = true;
+
+        // Set the range
+        this.range = range;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+
+        // @ TODO: Workaround until "angular/issues/20007" resolved
+        this.writeValue = (): void => {
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open the picker panel
+     */
+    openPickerPanel(): void
+    {
+        // Create the overlay
+        const overlayRef = this._overlay.create({
+            panelClass      : 'fuse-date-range-panel',
+            backdropClass   : '',
+            hasBackdrop     : true,
+            scrollStrategy  : this._overlay.scrollStrategies.reposition(),
+            positionStrategy: this._overlay.position()
+                                  .flexibleConnectedTo(this._pickerPanelOrigin)
+                                  .withPositions([
+                                      {
+                                          originX : 'start',
+                                          originY : 'bottom',
+                                          overlayX: 'start',
+                                          overlayY: 'top',
+                                          offsetY : 8
+                                      },
+                                      {
+                                          originX : 'start',
+                                          originY : 'top',
+                                          overlayX: 'start',
+                                          overlayY: 'bottom',
+                                          offsetY : -8
+                                      }
+                                  ])
+        });
+
+        // Create a portal from the template
+        const templatePortal = new TemplatePortal(this._pickerPanel, this._viewContainerRef);
+
+        // On backdrop click
+        overlayRef.backdropClick().subscribe(() => {
+
+            // If template portal exists and attached...
+            if ( templatePortal && templatePortal.isAttached )
+            {
+                // Detach it
+                templatePortal.detach();
+            }
+
+            // If overlay exists and attached...
+            if ( overlayRef && overlayRef.hasAttached() )
+            {
+                // Detach it
+                overlayRef.detach();
+                overlayRef.dispose();
+            }
+        });
+
+        // Attach the portal to the overlay
+        overlayRef.attach(templatePortal);
+    }
+
+    /**
+     * Get month label
+     *
+     * @param month
+     */
+    getMonthLabel(month: number): string
+    {
+        if ( month === 1 )
+        {
+            return this.activeDates.month1.clone().format('MMMM Y');
+        }
+
+        return this.activeDates.month2.clone().format('MMMM Y');
+    }
+
+    /**
+     * Date class function to add/remove class names to calendar days
+     */
+    dateClass(): any
+    {
+        return (date: Moment): MatCalendarCellCssClasses => {
+
+            // If the date is both start and end date...
+            if ( date.isSame(this._range.start, 'day') && date.isSame(this._range.end, 'day') )
+            {
+                return ['fuse-date-range', 'fuse-date-range-start', 'fuse-date-range-end'];
+            }
+
+            // If the date is the start date...
+            if ( date.isSame(this._range.start, 'day') )
+            {
+                return ['fuse-date-range', 'fuse-date-range-start'];
+            }
+
+            // If the date is the end date...
+            if ( date.isSame(this._range.end, 'day') )
+            {
+                return ['fuse-date-range', 'fuse-date-range-end'];
+            }
+
+            // If the date is in between start and end dates...
+            if ( date.isBetween(this._range.start, this._range.end, 'day') )
+            {
+                return ['fuse-date-range', 'fuse-date-range-mid'];
+            }
+
+            return undefined;
+        };
+    }
+
+    /**
+     * Date filter to enable/disable calendar days
+     */
+    dateFilter(): any
+    {
+        // 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'));
+    }
+
+    /**
+     * On selected date change
+     *
+     * @param date
+     */
+    onSelectedDateChange(date: Moment): void
+    {
+        // Create a new range object
+        const newRange = {
+            start    : this._range.start.clone().toISOString(),
+            end      : this._range.end.clone().toISOString(),
+            whichDate: null
+        };
+
+        // Replace either the start or the end date with the new one
+        // depending on which date we are setting
+        if ( this.setWhichDate === 'start' )
+        {
+            newRange.start = moment(newRange.start).year(date.year()).month(date.month()).date(date.date()).toISOString();
+        }
+        else
+        {
+            newRange.end = moment(newRange.end).year(date.year()).month(date.month()).date(date.date()).toISOString();
+        }
+
+        // Append the which date to the new range object
+        newRange.whichDate = this.setWhichDate;
+
+        // Switch which date to set on the next run
+        this.setWhichDate = this.setWhichDate === 'start' ? 'end' : 'start';
+
+        // Set the range
+        this.range = newRange;
+    }
+
+    /**
+     * Go to previous month on both views
+     */
+    prev(): void
+    {
+        this.activeDates.month1 = moment(this.activeDates.month1).subtract(1, 'month');
+        this.activeDates.month2 = moment(this.activeDates.month2).subtract(1, 'month');
+    }
+
+    /**
+     * Go to next month on both views
+     */
+    next(): void
+    {
+        this.activeDates.month1 = moment(this.activeDates.month1).add(1, 'month');
+        this.activeDates.month2 = moment(this.activeDates.month2).add(1, 'month');
+    }
+
+    /**
+     * Update the start time
+     *
+     * @param event
+     */
+    updateStartTime(event): void
+    {
+        // Parse the time
+        const parsedTime = this._parseTime(event.target.value);
+
+        // Go back to the previous value if the form control is not valid
+        if ( this.startTimeFormControl.invalid )
+        {
+            // Override the time
+            const time = this._range.start.clone().format(this._timeFormat);
+
+            // Set the time
+            this.startTimeFormControl.setValue(time);
+
+            // Do not update the range
+            return;
+        }
+
+        // Append the new time to the start date
+        const startDate = this._range.start.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
+
+        // If the new start date is after the current end date,
+        // use the end date's time and set the start date again
+        if ( startDate.isAfter(this._range.end) )
+        {
+            const endDateHours = this._range.end.hours();
+            const endDateMinutes = this._range.end.minutes();
+
+            // Set the start date
+            startDate.hours(endDateHours).minutes(endDateMinutes);
+        }
+
+        // If everything is okay, set the new date
+        this.range = {
+            start    : startDate.toISOString(),
+            end      : this._range.end.clone().toISOString(),
+            whichDate: 'start'
+        };
+    }
+
+    /**
+     * Update the end time
+     *
+     * @param event
+     */
+    updateEndTime(event): void
+    {
+        // Parse the time
+        const parsedTime = this._parseTime(event.target.value);
+
+        // Go back to the previous value if the form control is not valid
+        if ( this.endTimeFormControl.invalid )
+        {
+            // Override the time
+            const time = this._range.end.clone().format(this._timeFormat);
+
+            // Set the time
+            this.endTimeFormControl.setValue(time);
+
+            // Do not update the range
+            return;
+        }
+
+        // Append the new time to the end date
+        const endDate = this._range.end.clone().hours(parsedTime.hours()).minutes(parsedTime.minutes());
+
+        // If the new end date is before the current start date,
+        // use the start date's time and set the end date again
+        if ( endDate.isBefore(this._range.start) )
+        {
+            const startDateHours = this._range.start.hours();
+            const startDateMinutes = this._range.start.minutes();
+
+            // Set the end date
+            endDate.hours(startDateHours).minutes(startDateMinutes);
+        }
+
+        // If everything is okay, set the new date
+        this.range = {
+            start    : this._range.start.clone().toISOString(),
+            end      : endDate.toISOString(),
+            whichDate: 'end'
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Start and end time form controls
+        this.startTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
+        this.endTimeFormControl = new FormControl('', [Validators.pattern(this._timeRegExp)]);
+
+        // Set the default range
+        this._programmaticChange = true;
+        this.range = {
+            start: moment().startOf('day').toISOString(),
+            end  : moment().add(1, 'day').endOf('day').toISOString()
+        };
+
+        // Set the default time range
+        this._programmaticChange = true;
+        this.timeRange = true;
+    }
+
+    /**
+     * Parse the time from the inputs
+     *
+     * @param value
+     * @private
+     */
+    private _parseTime(value: string): Moment
+    {
+        // Parse the time using the time regexp
+        const timeArr = value.split(this._timeRegExp).filter(part => part !== '');
+
+        // Get the meridiem
+        const meridiem = timeArr[2] || null;
+
+        // If meridiem exists...
+        if ( meridiem )
+        {
+            // Create a moment using 12-hours format and return it
+            return moment(value, 'hh:mmA').seconds(0);
+        }
+
+        // If meridiem doesn't exist, create a moment using 24-hours format and return in
+        return moment(value, 'HH:mm').seconds(0);
+    }
+}
@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { FuseDateRangeComponent } from '@fuse/components/date-range/date-range.component';
+
+@NgModule({
+    declarations: [
+        FuseDateRangeComponent
+    ],
+    imports     : [
+        CommonModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatDatepickerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatMomentDateModule
+    ],
+    exports     : [
+        FuseDateRangeComponent
+    ]
+})
+export class FuseDateRangeModule
+{
+}
@@ -0,0 +1 @@
+export * from '@fuse/components/date-range/public-api';
@@ -0,0 +1,2 @@
+export * from '@fuse/components/date-range/date-range.component';
+export * from '@fuse/components/date-range/date-range.module';
@@ -0,0 +1,3 @@
+<div class="fuse-drawer-content">
+    <ng-content></ng-content>
+</div>
@@ -0,0 +1,131 @@
+/* Variables */
+$fuse-drawer-width: 320;
+
+fuse-drawer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: #{$fuse-drawer-width}px;
+    min-width: #{$fuse-drawer-width}px;
+    max-width: #{$fuse-drawer-width}px;
+    z-index: 300;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
+    @apply bg-card;
+
+    /* Animations */
+    &.fuse-drawer-animations-enabled {
+        transition-duration: 400ms;
+        transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+        transition-property: visibility, margin-left, margin-right, transform, width, max-width, min-width;
+
+        .fuse-drawer-content {
+            transition-duration: 400ms;
+            transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+            transition-property: width, max-width, min-width;
+        }
+    }
+
+    /* Over mode */
+    &.fuse-drawer-mode-over {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+
+        /* Fixed mode */
+        &.fuse-drawer-fixed {
+            position: fixed;
+        }
+    }
+
+    /* Left position */
+    &.fuse-drawer-position-left {
+
+        /* Side mode */
+        &.fuse-drawer-mode-side {
+            margin-left: -#{$fuse-drawer-width}px;
+
+            &.fuse-drawer-opened {
+                margin-left: 0;
+            }
+        }
+
+        /* Over mode */
+        &.fuse-drawer-mode-over {
+            left: 0;
+            transform: translate3d(-100%, 0, 0);
+
+            &.fuse-drawer-opened {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        /* Content */
+        .fuse-drawer-content {
+            left: 0;
+        }
+    }
+
+    /* Right position */
+    &.fuse-drawer-position-right {
+
+        /* Side mode */
+        &.fuse-drawer-mode-side {
+            margin-right: -#{$fuse-drawer-width}px;
+
+            &.fuse-drawer-opened {
+                margin-right: 0;
+            }
+        }
+
+        /* Over mode */
+        &.fuse-drawer-mode-over {
+            right: 0;
+            transform: translate3d(100%, 0, 0);
+
+            &.fuse-drawer-opened {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+
+        /* Content */
+        .fuse-drawer-content {
+            right: 0;
+        }
+    }
+
+    /* Content */
+    .fuse-drawer-content {
+        position: absolute;
+        display: flex;
+        flex: 1 1 auto;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        @apply bg-card;
+    }
+}
+
+/* Overlay */
+.fuse-drawer-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 299;
+    opacity: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+
+    /* Fixed mode */
+    &.fuse-drawer-overlay-fixed {
+        position: fixed;
+    }
+
+    /* Transparent overlay */
+    &.fuse-drawer-overlay-transparent {
+        background-color: transparent;
+    }
+}
@@ -0,0 +1,418 @@
+import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
+import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+
+@Component({
+    selector     : 'fuse-drawer',
+    templateUrl  : './drawer.component.html',
+    styleUrls    : ['./drawer.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'fuseDrawer'
+})
+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';
+    @Input() name: string = this._fuseUtilsService.randomId();
+    @Input() opened: boolean = false;
+    @Input() position: FuseDrawerPosition = 'left';
+    @Input() transparentOverlay: boolean = false;
+    @Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() readonly modeChanged: EventEmitter<FuseDrawerMode> = new EventEmitter<FuseDrawerMode>();
+    @Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();
+
+    private _animationsEnabled: boolean = false;
+    private _hovered: boolean = false;
+    private _overlay: HTMLElement;
+    private _player: AnimationPlayer;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _animationBuilder: AnimationBuilder,
+        private _elementRef: ElementRef,
+        private _renderer2: Renderer2,
+        private _fuseDrawerService: FuseDrawerService,
+        private _fuseUtilsService: FuseUtilsService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'fuse-drawer-animations-enabled'         : this._animationsEnabled,
+            'fuse-drawer-fixed'                      : this.fixed,
+            'fuse-drawer-hover'                      : this._hovered,
+            [`fuse-drawer-mode-${this.mode}`]        : true,
+            'fuse-drawer-opened'                     : this.opened,
+            [`fuse-drawer-position-${this.position}`]: true
+        };
+    }
+
+    /**
+     * Host binding for component inline styles
+     */
+    @HostBinding('style') get styleList(): any
+    {
+        return {
+            'visibility': this.opened ? 'visible' : 'hidden'
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ 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
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Fixed
+        if ( 'fixed' in changes )
+        {
+            // Coerce the value to a boolean
+            this.fixed = coerceBooleanProperty(changes.fixed.currentValue);
+
+            // Execute the observable
+            this.fixedChanged.next(this.fixed);
+        }
+
+        // Mode
+        if ( 'mode' in changes )
+        {
+            // Get the previous and current values
+            const previousMode = changes.mode.previousValue;
+            const currentMode = changes.mode.currentValue;
+
+            // Disable the animations
+            this._disableAnimations();
+
+            // If the mode changes: 'over -> side'
+            if ( previousMode === 'over' && currentMode === 'side' )
+            {
+                // Hide the overlay
+                this._hideOverlay();
+            }
+
+            // If the mode changes: 'side -> over'
+            if ( previousMode === 'side' && currentMode === 'over' )
+            {
+                // If the drawer is opened
+                if ( this.opened )
+                {
+                    // Show the overlay
+                    this._showOverlay();
+                }
+            }
+
+            // Execute the observable
+            this.modeChanged.next(currentMode);
+
+            // Enable the animations after a delay
+            // The delay must be bigger than the current transition-duration
+            // to make sure nothing will be animated while the mode is changing
+            setTimeout(() => {
+                this._enableAnimations();
+            }, 500);
+        }
+
+        // Opened
+        if ( 'opened' in changes )
+        {
+            // Coerce the value to a boolean
+            const open = coerceBooleanProperty(changes.opened.currentValue);
+
+            // Open/close the drawer
+            this._toggleOpened(open);
+        }
+
+        // Position
+        if ( 'position' in changes )
+        {
+            // Execute the observable
+            this.positionChanged.next(this.position);
+        }
+
+        // Transparent overlay
+        if ( 'transparentOverlay' in changes )
+        {
+            // Coerce the value to a boolean
+            this.transparentOverlay = coerceBooleanProperty(changes.transparentOverlay.currentValue);
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Register the drawer
+        this._fuseDrawerService.registerComponent(this.name, this);
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Deregister the drawer from the registry
+        this._fuseDrawerService.deregisterComponent(this.name);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open the drawer
+     */
+    open(): void
+    {
+        // Return if the drawer has already opened
+        if ( this.opened )
+        {
+            return;
+        }
+
+        // Open the drawer
+        this._toggleOpened(true);
+    }
+
+    /**
+     * Close the drawer
+     */
+    close(): void
+    {
+        // Return if the drawer has already closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Close the drawer
+        this._toggleOpened(false);
+    }
+
+    /**
+     * Toggle the drawer
+     */
+    toggle(): void
+    {
+        if ( this.opened )
+        {
+            this.close();
+        }
+        else
+        {
+            this.open();
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Enable the animations
+     *
+     * @private
+     */
+    private _enableAnimations(): void
+    {
+        // Return if the animations are already enabled
+        if ( this._animationsEnabled )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._animationsEnabled = true;
+    }
+
+    /**
+     * Disable the animations
+     *
+     * @private
+     */
+    private _disableAnimations(): void
+    {
+        // Return if the animations are already disabled
+        if ( !this._animationsEnabled )
+        {
+            return;
+        }
+
+        // Disable the animations
+        this._animationsEnabled = false;
+    }
+
+    /**
+     * Show the backdrop
+     *
+     * @private
+     */
+    private _showOverlay(): void
+    {
+        // Create the backdrop element
+        this._overlay = this._renderer2.createElement('div');
+
+        // Return if overlay couldn't be create for some reason
+        if ( !this._overlay )
+        {
+            return;
+        }
+
+        // Add a class to the backdrop element
+        this._overlay.classList.add('fuse-drawer-overlay');
+
+        // Add a class depending on the fixed option
+        if ( this.fixed )
+        {
+            this._overlay.classList.add('fuse-drawer-overlay-fixed');
+        }
+
+        // Add a class depending on the transparentOverlay option
+        if ( this.transparentOverlay )
+        {
+            this._overlay.classList.add('fuse-drawer-overlay-transparent');
+        }
+
+        // Append the backdrop to the parent of the drawer
+        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+
+        // Create the enter animation and attach it to the player
+        this._player = this._animationBuilder.build([
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
+        ]).create(this._overlay);
+
+        // Play the animation
+        this._player.play();
+
+        // Add an event listener to the overlay
+        this._overlay.addEventListener('click', () => {
+            this.close();
+        });
+    }
+
+    /**
+     * Hide the backdrop
+     *
+     * @private
+     */
+    private _hideOverlay(): void
+    {
+        if ( !this._overlay )
+        {
+            return;
+        }
+
+        // Create the leave animation and attach it to the player
+        this._player = this._animationBuilder.build([
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
+        ]).create(this._overlay);
+
+        // Play the animation
+        this._player.play();
+
+        // Once the animation is done...
+        this._player.onDone(() => {
+
+            // If the backdrop still exists...
+            if ( this._overlay )
+            {
+                // Remove the backdrop
+                this._overlay.parentNode.removeChild(this._overlay);
+                this._overlay = null;
+            }
+        });
+    }
+
+    /**
+     * Open/close the drawer
+     *
+     * @param open
+     * @private
+     */
+    private _toggleOpened(open: boolean): void
+    {
+        // Set the opened
+        this.opened = open;
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // If the mode is 'over'
+        if ( this.mode === 'over' )
+        {
+            // If the drawer opens, show the overlay
+            if ( open )
+            {
+                this._showOverlay();
+            }
+            // Otherwise, close the overlay
+            else
+            {
+                this._hideOverlay();
+            }
+        }
+
+        // Execute the observable
+        this.openedChanged.next(open);
+    }
+}
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
+
+@NgModule({
+    declarations: [
+        FuseDrawerComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseDrawerComponent
+    ]
+})
+export class FuseDrawerModule
+{
+}
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseDrawerService
+{
+    private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register drawer component
+     *
+     * @param name
+     * @param component
+     */
+    registerComponent(name: string, component: FuseDrawerComponent): void
+    {
+        this._componentRegistry.set(name, component);
+    }
+
+    /**
+     * Deregister drawer component
+     *
+     * @param name
+     */
+    deregisterComponent(name: string): void
+    {
+        this._componentRegistry.delete(name);
+    }
+
+    /**
+     * Get drawer component from the registry
+     *
+     * @param name
+     */
+    getComponent(name: string): FuseDrawerComponent | undefined
+    {
+        return this._componentRegistry.get(name);
+    }
+}
@@ -0,0 +1,7 @@
+export type FuseDrawerMode =
+    | 'over'
+    | 'side';
+
+export type FuseDrawerPosition =
+    | 'left'
+    | 'right';
@@ -0,0 +1 @@
+export * from '@fuse/components/drawer/public-api';
@@ -0,0 +1,4 @@
+export * from '@fuse/components/drawer/drawer.component';
+export * from '@fuse/components/drawer/drawer.module';
+export * from '@fuse/components/drawer/drawer.service';
+export * from '@fuse/components/drawer/drawer.types';
@@ -0,0 +1,7 @@
+<!-- Button -->
+<button
+    mat-icon-button
+    [matTooltip]="'Toggle Fullscreen'"
+    (click)="toggleFullscreen()">
+    <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
+</button>
@@ -0,0 +1,164 @@
+import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
+
+@Component({
+    selector       : 'fuse-fullscreen',
+    templateUrl    : './fullscreen.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'fuseFullscreen'
+})
+export class FuseFullscreenComponent implements OnInit
+{
+    private _fsDoc: FSDocument;
+    private _fsDocEl: FSDocumentElement;
+    private _isFullscreen: boolean = false;
+
+    /**
+     * Constructor
+     */
+    constructor(@Inject(DOCUMENT) private _document: Document)
+    {
+        this._fsDoc = _document as FSDocument;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        this._fsDocEl = document.documentElement as FSDocumentElement;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the fullscreen mode
+     */
+    toggleFullscreen(): void
+    {
+        // Check if the fullscreen is open
+        this._isFullscreen = this._getBrowserFullscreenElement() !== null;
+
+        // Toggle the fullscreen
+        if ( this._isFullscreen )
+        {
+            this._closeFullscreen();
+        }
+        else
+        {
+            this._openFullscreen();
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get browser's fullscreen element
+     *
+     * @private
+     */
+    private _getBrowserFullscreenElement(): Element
+    {
+        if ( typeof this._fsDoc.fullscreenElement !== 'undefined' )
+        {
+            return this._fsDoc.fullscreenElement;
+        }
+
+        if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' )
+        {
+            return this._fsDoc.mozFullScreenElement;
+        }
+
+        if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' )
+        {
+            return this._fsDoc.msFullscreenElement;
+        }
+
+        if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' )
+        {
+            return this._fsDoc.webkitFullscreenElement;
+        }
+
+        throw new Error('Fullscreen mode is not supported by this browser');
+    }
+
+    /**
+     * Open the fullscreen
+     *
+     * @private
+     */
+    private _openFullscreen(): void
+    {
+        if ( this._fsDocEl.requestFullscreen )
+        {
+            this._fsDocEl.requestFullscreen();
+            return;
+        }
+
+        // Firefox
+        if ( this._fsDocEl.mozRequestFullScreen )
+        {
+            this._fsDocEl.mozRequestFullScreen();
+            return;
+        }
+
+        // Chrome, Safari and Opera
+        if ( this._fsDocEl.webkitRequestFullscreen )
+        {
+            this._fsDocEl.webkitRequestFullscreen();
+            return;
+        }
+
+        // IE/Edge
+        if ( this._fsDocEl.msRequestFullscreen )
+        {
+            this._fsDocEl.msRequestFullscreen();
+            return;
+        }
+    }
+
+    /**
+     * Close the fullscreen
+     *
+     * @private
+     */
+    private _closeFullscreen(): void
+    {
+        if ( this._fsDoc.exitFullscreen )
+        {
+            this._fsDoc.exitFullscreen();
+            return;
+        }
+
+        // Firefox
+        if ( this._fsDoc.mozCancelFullScreen )
+        {
+            this._fsDoc.mozCancelFullScreen();
+            return;
+        }
+
+        // Chrome, Safari and Opera
+        if ( this._fsDoc.webkitExitFullscreen )
+        {
+            this._fsDoc.webkitExitFullscreen();
+            return;
+        }
+
+        // IE/Edge
+        else if ( this._fsDoc.msExitFullscreen )
+        {
+            this._fsDoc.msExitFullscreen();
+            return;
+        }
+    }
+}
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
+
+@NgModule({
+    declarations: [
+        FuseFullscreenComponent
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+        MatTooltipModule
+    ],
+    exports     : [
+        FuseFullscreenComponent
+    ]
+})
+export class FuseFullscreenModule
+{
+}
@@ -0,0 +1,16 @@
+export interface FSDocument extends HTMLDocument
+{
+    mozFullScreenElement?: Element;
+    mozCancelFullScreen?: () => void;
+    msFullscreenElement?: Element;
+    msExitFullscreen?: () => void;
+    webkitFullscreenElement?: Element;
+    webkitExitFullscreen?: () => void;
+}
+
+export interface FSDocumentElement extends HTMLElement
+{
+    mozRequestFullScreen?: () => void;
+    msRequestFullscreen?: () => void;
+    webkitRequestFullscreen?: () => void;
+}
@@ -0,0 +1 @@
+export * from '@fuse/components/fullscreen/public-api';
@@ -0,0 +1,3 @@
+export * from '@fuse/components/fullscreen/fullscreen.component';
+export * from '@fuse/components/fullscreen/fullscreen.module';
+export * from '@fuse/components/fullscreen/fullscreen.types';
@@ -0,0 +1,9 @@
+<ng-content></ng-content>
+
+<!-- @formatter:off -->
+<ng-template let-highlightedCode="highlightedCode" let-lang="lang">
+<div class="fuse-highlight fuse-highlight-code-container">
+<pre [ngClass]="'language-' + lang"><code [ngClass]="'language-' + lang" [innerHTML]="highlightedCode"></code></pre>
+</div>
+</ng-template>
+<!-- @formatter:on -->
@@ -0,0 +1,3 @@
+textarea[fuse-highlight] {
+    display: none;
+}
@@ -0,0 +1,132 @@
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
+
+@Component({
+    selector       : 'textarea[fuse-highlight]',
+    templateUrl    : './highlight.component.html',
+    styleUrls      : ['./highlight.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'fuseHighlight'
+})
+export class FuseHighlightComponent implements OnChanges, AfterViewInit
+{
+    @Input() code: string;
+    @Input() lang: string;
+    @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
+
+    highlightedCode: string;
+    private _viewRef: EmbeddedViewRef<any>;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _domSanitizer: DomSanitizer,
+        private _elementRef: ElementRef,
+        private _renderer2: Renderer2,
+        private _fuseHighlightService: FuseHighlightService,
+        private _viewContainerRef: ViewContainerRef
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Code & Lang
+        if ( 'code' in changes || 'lang' in changes )
+        {
+            // Return if the viewContainerRef is not available
+            if ( !this._viewContainerRef.length )
+            {
+                return;
+            }
+
+            // Highlight and insert the code
+            this._highlightAndInsert();
+        }
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Return if there is no language set
+        if ( !this.lang )
+        {
+            return;
+        }
+
+        // If there is no code input, get the code from
+        // the textarea
+        if ( !this.code )
+        {
+            // Get the code
+            this.code = this._elementRef.nativeElement.value;
+        }
+
+        // Highlight and insert
+        this._highlightAndInsert();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Highlight and insert the highlighted code
+     *
+     * @private
+     */
+    private _highlightAndInsert(): void
+    {
+        // Return if the template reference is not available
+        if ( !this.templateRef )
+        {
+            return;
+        }
+
+        // Return if the code or language is not defined
+        if ( !this.code || !this.lang )
+        {
+            return;
+        }
+
+        // Destroy the component if there is already one
+        if ( this._viewRef )
+        {
+            this._viewRef.destroy();
+            this._viewRef = null;
+        }
+
+        // Highlight and sanitize the code just in case
+        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._fuseHighlightService.highlight(this.code, this.lang));
+
+        // Return if the highlighted code is null
+        if ( this.highlightedCode === null )
+        {
+            return;
+        }
+
+        // Render and insert the template
+        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
+            highlightedCode: this.highlightedCode,
+            lang           : this.lang
+        });
+
+        // Detect the changes
+        this._viewRef.detectChanges();
+    }
+}
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
+
+@NgModule({
+    declarations: [
+        FuseHighlightComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseHighlightComponent
+    ]
+})
+export class FuseHighlightModule
+{
+}
@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import hljs from 'highlight.js';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseHighlightService
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Highlight
+     */
+    highlight(code: string, language: string): string
+    {
+        // Format the code
+        code = this._format(code);
+
+        // Highlight and return the code
+        return hljs.highlight(code, {language}).value;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Remove the empty lines around the code block
+     * and re-align the indentation based on the first
+     * non-whitespace indented character
+     *
+     * @param code
+     * @private
+     */
+    private _format(code: string): string
+    {
+        let indentation = 0;
+
+        // Split the code into lines and store the lines
+        const lines = code.split('\n');
+
+        // Trim the empty lines around the code block
+        while ( lines.length && lines[0].trim() === '' )
+        {
+            lines.shift();
+        }
+
+        while ( lines.length && lines[lines.length - 1].trim() === '' )
+        {
+            lines.pop();
+        }
+
+        // Iterate through the lines
+        lines.filter(line => line.length)
+             .forEach((line, index) => {
+
+                 // Always get the indentation of the first line so we can
+                 // have something to compare with
+                 if ( index === 0 )
+                 {
+                     indentation = line.search(/\S|$/);
+                     return;
+                 }
+
+                 // Look at all the remaining lines to figure out the smallest indentation.
+                 indentation = Math.min(line.search(/\S|$/), indentation);
+             });
+
+        // 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');
+    }
+}
@@ -0,0 +1 @@
+export * from '@fuse/components/highlight/public-api';
@@ -0,0 +1,3 @@
+export * from '@fuse/components/highlight/highlight.component';
+export * from '@fuse/components/highlight/highlight.module';
+export * from '@fuse/components/highlight/highlight.service';
@@ -0,0 +1 @@
+export * from '@fuse/components/masonry/public-api';
@@ -0,0 +1,3 @@
+<div class="flex">
+    <ng-container *ngTemplateOutlet="columnsTemplate; context: { $implicit: distributedColumns }"></ng-container>
+</div>
@@ -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]);
+        }
+    }
+}
@@ -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
+{
+}
@@ -0,0 +1,2 @@
+export * from '@fuse/components/masonry/masonry.component';
+export * from '@fuse/components/masonry/masonry.module';
@@ -0,0 +1,111 @@
+<!-- Item wrapper -->
+<div
+    class="fuse-horizontal-navigation-item-wrapper"
+    [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
+    [ngClass]="item.classes?.wrapper">
+
+    <!-- Item with an internal link -->
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+    <!-- Item with an external link -->
+    <a
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
+        [href]="item.link">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
+
+    <!-- Item with a function -->
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="!item.link && item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+    <!-- Item with an internal link and function -->
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && !item.externalLink && item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+    <!-- Item with an external link and function -->
+    <a
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && item.externalLink && item.function && !item.disabled"
+        [href]="item.link"
+        (click)="item.function(item)"
+        mat-menu-item>
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
+
+    <!-- Item with a no link and no function -->
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="!item.link && !item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+    <!-- Item is disabled -->
+    <div
+        class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
+        *ngIf="item.disabled">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+</div>
+
+<!-- Item template -->
+<ng-template #itemTemplate>
+
+    <!-- Icon -->
+    <mat-icon
+        class="fuse-horizontal-navigation-item-icon"
+        [ngClass]="item.classes?.icon"
+        *ngIf="item.icon"
+        [svgIcon]="item.icon"></mat-icon>
+
+    <!-- Title & Subtitle -->
+    <div class="fuse-horizontal-navigation-item-title-wrapper">
+        <div class="fuse-horizontal-navigation-item-title">
+            <span [ngClass]="item.classes?.title">
+                {{item.title}}
+            </span>
+        </div>
+        <div
+            class="fuse-horizontal-navigation-item-subtitle text-hint"
+            *ngIf="item.subtitle">
+            <span [ngClass]="item.classes?.subtitle">
+                {{item.subtitle}}
+            </span>
+        </div>
+    </div>
+
+    <!-- Badge -->
+    <div
+        class="fuse-horizontal-navigation-item-badge"
+        *ngIf="item.badge">
+        <div
+            class="fuse-horizontal-navigation-item-badge-content"
+            [ngClass]="item.badge.classes">
+            {{item.badge.title}}
+        </div>
+    </div>
+
+</ng-template>
@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-basic-item',
+    templateUrl    : './basic.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
+{
+    @Input() item: FuseNavigationItem;
+    @Input() name: string;
+
+    isActiveMatchOptions: IsActiveMatchOptions;
+    private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseUtilsService: FuseUtilsService
+    )
+    {
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._fuseUtilsService.exactMatchOptions
+                : this._fuseUtilsService.subsetMatchOptions;
+
+        // Get the parent navigation component
+        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,115 @@
+<div
+    *ngIf="!child"
+    [ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
+                 'fuse-horizontal-navigation-menu-active-forced': item.active}"
+    [matMenuTriggerFor]="matMenu"
+    (onMenuOpen)="triggerChangeDetection()"
+    (onMenuClose)="triggerChangeDetection()"
+    #trigger="matMenuTrigger">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+</div>
+
+<mat-menu
+    class="fuse-horizontal-navigation-menu-panel"
+    [overlapTrigger]="false"
+    #matMenu="matMenu">
+
+    <ng-container *ngFor="let item of item.children">
+
+        <!-- Skip the hidden items -->
+        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+
+            <!-- Basic -->
+            <div
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'basic'"
+                [disabled]="item.disabled"
+                mat-menu-item>
+                <fuse-horizontal-navigation-basic-item
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-basic-item>
+            </div>
+
+            <!-- Branch: aside, collapsable, group -->
+            <div
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
+                [disabled]="item.disabled"
+                [matMenuTriggerFor]="branch.matMenu"
+                mat-menu-item>
+                <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+                <fuse-horizontal-navigation-branch-item
+                    [child]="true"
+                    [item]="item"
+                    [name]="name"
+                    #branch></fuse-horizontal-navigation-branch-item>
+            </div>
+
+            <!-- Divider -->
+            <div
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'divider'"
+                mat-menu-item>
+                <fuse-horizontal-navigation-divider-item
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-divider-item>
+            </div>
+
+        </ng-container>
+
+    </ng-container>
+
+</mat-menu>
+
+<!-- Item template -->
+<ng-template
+    let-item
+    #itemTemplate>
+
+    <div
+        class="fuse-horizontal-navigation-item-wrapper"
+        [class.fuse-horizontal-navigation-item-has-subtitle]="!!item.subtitle"
+        [ngClass]="item.classes?.wrapper">
+
+        <div
+            class="fuse-horizontal-navigation-item"
+            [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
+                         'fuse-horizontal-navigation-item-active-forced': item.active}">
+
+            <!-- Icon -->
+            <mat-icon
+                class="fuse-horizontal-navigation-item-icon"
+                [ngClass]="item.classes?.icon"
+                *ngIf="item.icon"
+                [svgIcon]="item.icon"></mat-icon>
+
+            <!-- Title & Subtitle -->
+            <div class="fuse-horizontal-navigation-item-title-wrapper">
+                <div class="fuse-horizontal-navigation-item-title">
+                    <span [ngClass]="item.classes?.title">
+                        {{item.title}}
+                    </span>
+                </div>
+                <div
+                    class="fuse-horizontal-navigation-item-subtitle text-hint"
+                    *ngIf="item.subtitle">
+                    <span [ngClass]="item.classes?.subtitle">
+                        {{item.subtitle}}
+                    </span>
+                </div>
+            </div>
+
+            <!-- Badge -->
+            <div
+                class="fuse-horizontal-navigation-item-badge"
+                *ngIf="item.badge">
+                <div
+                    class="fuse-horizontal-navigation-item-badge-content"
+                    [ngClass]="item.badge.classes">
+                    {{item.badge.title}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+</ng-template>
@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { MatMenu } from '@angular/material/menu';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-branch-item',
+    templateUrl    : './branch.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+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;
+    @Input() name: string;
+    @ViewChild('matMenu', {static: true}) matMenu: MatMenu;
+
+    private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent navigation component
+        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Trigger the change detection
+     */
+    triggerChangeDetection(): void
+    {
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+}
@@ -0,0 +1,4 @@
+<!-- Divider -->
+<div
+    class="fuse-horizontal-navigation-item-wrapper divider"
+    [ngClass]="item.classes?.wrapper"></div>
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-divider-item',
+    templateUrl    : './divider.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
+{
+    @Input() item: FuseNavigationItem;
+    @Input() name: string;
+
+    private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent navigation component
+        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,4 @@
+<!-- Spacer -->
+<div
+    class="fuse-horizontal-navigation-item-wrapper"
+    [ngClass]="item.classes?.wrapper"></div>
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-spacer-item',
+    templateUrl    : './spacer.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
+{
+    @Input() item: FuseNavigationItem;
+    @Input() name: string;
+
+    private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent navigation component
+        this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,33 @@
+<div class="fuse-horizontal-navigation-wrapper">
+
+    <ng-container *ngFor="let item of navigation">
+
+        <!-- Skip the hidden items -->
+        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+
+            <!-- Basic -->
+            <fuse-horizontal-navigation-basic-item
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'basic'"
+                [item]="item"
+                [name]="name"></fuse-horizontal-navigation-basic-item>
+
+            <!-- Branch: aside, collapsable, group -->
+            <fuse-horizontal-navigation-branch-item
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
+                [item]="item"
+                [name]="name"></fuse-horizontal-navigation-branch-item>
+
+            <!-- Spacer -->
+            <fuse-horizontal-navigation-spacer-item
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'spacer'"
+                [item]="item"
+                [name]="name"></fuse-horizontal-navigation-spacer-item>
+
+        </ng-container>
+
+    </ng-container>
+
+</div>
@@ -0,0 +1,180 @@
+/* Root navigation specific */
+fuse-horizontal-navigation {
+
+    .fuse-horizontal-navigation-wrapper {
+        display: flex;
+        align-items: center;
+
+        /* Basic, Branch */
+        fuse-horizontal-navigation-basic-item,
+        fuse-horizontal-navigation-branch-item {
+
+            @screen sm {
+
+                &:hover {
+
+                    .fuse-horizontal-navigation-item-wrapper {
+                        @apply bg-hover;
+                    }
+                }
+            }
+
+            .fuse-horizontal-navigation-item-wrapper {
+                border-radius: 4px;
+                overflow: hidden;
+
+                .fuse-horizontal-navigation-item {
+                    padding: 0 16px;
+                    cursor: pointer;
+                    user-select: none;
+
+                    .fuse-horizontal-navigation-item-icon {
+                        margin-right: 12px;
+                    }
+                }
+            }
+        }
+
+        /* Basic - When item active (current link) */
+        fuse-horizontal-navigation-basic-item {
+
+            .fuse-horizontal-navigation-item-active,
+            .fuse-horizontal-navigation-item-active-forced {
+
+                .fuse-horizontal-navigation-item-title {
+                    @apply text-primary #{'!important'};
+                }
+
+                .fuse-horizontal-navigation-item-subtitle {
+                    @apply text-primary-400 #{'!important'};
+
+                    .dark & {
+                        @apply text-primary-600 #{'!important'};
+                    }
+                }
+
+                .fuse-horizontal-navigation-item-icon {
+                    @apply text-primary #{'!important'};
+                }
+            }
+        }
+
+        /* Branch - When menu open */
+        fuse-horizontal-navigation-branch-item {
+
+            .fuse-horizontal-navigation-menu-active,
+            .fuse-horizontal-navigation-menu-active-forced {
+
+                .fuse-horizontal-navigation-item-wrapper {
+                    @apply bg-hover;
+                }
+            }
+        }
+
+        /* Spacer */
+        fuse-horizontal-navigation-spacer-item {
+            margin: 12px 0;
+        }
+    }
+}
+
+/* Menu panel specific */
+.fuse-horizontal-navigation-menu-panel {
+
+    .fuse-horizontal-navigation-menu-item {
+        height: auto;
+        min-height: 0;
+        line-height: normal;
+        white-space: normal;
+
+        /* Basic, Branch */
+        fuse-horizontal-navigation-basic-item,
+        fuse-horizontal-navigation-branch-item,
+        fuse-horizontal-navigation-divider-item {
+            display: flex;
+            flex: 1 1 auto;
+        }
+
+        /* Divider */
+        fuse-horizontal-navigation-divider-item {
+            margin: 8px -16px;
+
+            .fuse-horizontal-navigation-item-wrapper {
+                height: 1px;
+                box-shadow: 0 1px 0 0;
+            }
+        }
+    }
+}
+
+/* Navigation menu item common */
+.fuse-horizontal-navigation-menu-item {
+
+    /* Basic - When item active (current link) */
+    fuse-horizontal-navigation-basic-item {
+
+        .fuse-horizontal-navigation-item-active,
+        .fuse-horizontal-navigation-item-active-forced {
+
+            .fuse-horizontal-navigation-item-title {
+                @apply text-primary #{'!important'};
+            }
+
+            .fuse-horizontal-navigation-item-subtitle {
+                @apply text-primary-400 #{'!important'};
+
+                .dark & {
+                    @apply text-primary-600 #{'!important'};
+                }
+            }
+
+            .fuse-horizontal-navigation-item-icon {
+                @apply text-primary #{'!important'};
+            }
+        }
+    }
+
+    .fuse-horizontal-navigation-item-wrapper {
+        width: 100%;
+
+        &.fuse-horizontal-navigation-item-has-subtitle {
+
+            .fuse-horizontal-navigation-item {
+                min-height: 56px;
+            }
+        }
+
+        .fuse-horizontal-navigation-item {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            min-height: 48px;
+            width: 100%;
+            font-size: 13px;
+            font-weight: 500;
+            text-decoration: none;
+
+            .fuse-horizontal-navigation-item-title-wrapper {
+
+                .fuse-horizontal-navigation-item-subtitle {
+                    font-size: 12px;
+                }
+            }
+
+            .fuse-horizontal-navigation-item-badge {
+                margin-left: auto;
+
+                .fuse-horizontal-navigation-item-badge-content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 10px;
+                    font-weight: 600;
+                    white-space: nowrap;
+                    height: 20px;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,109 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { ReplaySubject, Subject } from 'rxjs';
+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';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation',
+    templateUrl    : './horizontal.component.html',
+    styleUrls      : ['./horizontal.component.scss'],
+    animations     : fuseAnimations,
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'fuseHorizontalNavigation'
+})
+export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
+{
+    @Input() name: string = this._fuseUtilsService.randomId();
+    @Input() navigation: FuseNavigationItem[];
+
+    onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseUtilsService: FuseUtilsService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Navigation
+        if ( 'navigation' in changes )
+        {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Make sure the name input is not an empty string
+        if ( this.name === '' )
+        {
+            this.name = this._fuseUtilsService.randomId();
+        }
+
+        // Register the navigation component
+        this._fuseNavigationService.registerComponent(this.name, this);
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Deregister the navigation component from the registry
+        this._fuseNavigationService.deregisterComponent(this.name);
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Refresh the component to apply the changes
+     */
+    refresh(): void
+    {
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        // Execute the observable
+        this.onRefreshed.next(true);
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+}
@@ -0,0 +1 @@
+export * from '@fuse/components/navigation/public-api';
@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api';
+import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
+import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component';
+import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
+import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component';
+import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
+import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+
+@NgModule({
+    declarations: [
+        FuseHorizontalNavigationBasicItemComponent,
+        FuseHorizontalNavigationBranchItemComponent,
+        FuseHorizontalNavigationDividerItemComponent,
+        FuseHorizontalNavigationSpacerItemComponent,
+        FuseHorizontalNavigationComponent,
+        FuseVerticalNavigationAsideItemComponent,
+        FuseVerticalNavigationBasicItemComponent,
+        FuseVerticalNavigationCollapsableItemComponent,
+        FuseVerticalNavigationDividerItemComponent,
+        FuseVerticalNavigationGroupItemComponent,
+        FuseVerticalNavigationSpacerItemComponent,
+        FuseVerticalNavigationComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+        MatTooltipModule,
+        FuseScrollbarModule
+    ],
+    exports     : [
+        FuseHorizontalNavigationComponent,
+        FuseVerticalNavigationComponent
+    ]
+})
+export class FuseNavigationModule
+{
+}
@@ -0,0 +1,186 @@
+import { Injectable } from '@angular/core';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseNavigationService
+{
+    private _componentRegistry: Map<string, any> = new Map<string, any>();
+    private _navigationStore: Map<string, FuseNavigationItem[]> = new Map<string, any>();
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register navigation component
+     *
+     * @param name
+     * @param component
+     */
+    registerComponent(name: string, component: any): void
+    {
+        this._componentRegistry.set(name, component);
+    }
+
+    /**
+     * Deregister navigation component
+     *
+     * @param name
+     */
+    deregisterComponent(name: string): void
+    {
+        this._componentRegistry.delete(name);
+    }
+
+    /**
+     * Get navigation component from the registry
+     *
+     * @param name
+     */
+    getComponent<T>(name: string): T
+    {
+        return this._componentRegistry.get(name);
+    }
+
+    /**
+     * Store the given navigation with the given key
+     *
+     * @param key
+     * @param navigation
+     */
+    storeNavigation(key: string, navigation: FuseNavigationItem[]): void
+    {
+        // Add to the store
+        this._navigationStore.set(key, navigation);
+    }
+
+    /**
+     * Get navigation from storage by key
+     *
+     * @param key
+     */
+    getNavigation(key: string): FuseNavigationItem[]
+    {
+        return this._navigationStore.get(key) ?? [];
+    }
+
+    /**
+     * Delete the navigation from the storage
+     *
+     * @param key
+     */
+    deleteNavigation(key: string): void
+    {
+        // Check if the navigation exists
+        if ( !this._navigationStore.has(key) )
+        {
+            console.warn(`Navigation with the key '${key}' does not exist in the store.`);
+        }
+
+        // Delete from the storage
+        this._navigationStore.delete(key);
+    }
+
+    /**
+     * Utility function that returns a flattened
+     * version of the given navigation array
+     *
+     * @param navigation
+     * @param flatNavigation
+     */
+    getFlatNavigation(navigation: FuseNavigationItem[], flatNavigation: FuseNavigationItem[] = []): FuseNavigationItem[]
+    {
+        for ( const item of navigation )
+        {
+            if ( item.type === 'basic' )
+            {
+                flatNavigation.push(item);
+                continue;
+            }
+
+            if ( item.type === 'aside' || item.type === 'collapsable' || item.type === 'group' )
+            {
+                if ( item.children )
+                {
+                    this.getFlatNavigation(item.children, flatNavigation);
+                }
+            }
+        }
+
+        return flatNavigation;
+    }
+
+    /**
+     * Utility function that returns the item
+     * with the given id from given navigation
+     *
+     * @param id
+     * @param navigation
+     */
+    getItem(id: string, navigation: FuseNavigationItem[]): FuseNavigationItem | null
+    {
+        for ( const item of navigation )
+        {
+            if ( item.id === id )
+            {
+                return item;
+            }
+
+            if ( item.children )
+            {
+                const childItem = this.getItem(id, item.children);
+
+                if ( childItem )
+                {
+                    return childItem;
+                }
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Utility function that returns the item's parent
+     * with the given id from given navigation
+     *
+     * @param id
+     * @param navigation
+     * @param parent
+     */
+    getItemParent(
+        id: string,
+        navigation: FuseNavigationItem[],
+        parent: FuseNavigationItem[] | FuseNavigationItem
+    ): FuseNavigationItem[] | FuseNavigationItem | null
+    {
+        for ( const item of navigation )
+        {
+            if ( item.id === id )
+            {
+                return parent;
+            }
+
+            if ( item.children )
+            {
+                const childItem = this.getItemParent(id, item.children, item);
+
+                if ( childItem )
+                {
+                    return childItem;
+                }
+            }
+        }
+
+        return null;
+    }
+}
@@ -0,0 +1,50 @@
+import { IsActiveMatchOptions } from '@angular/router';
+
+export interface FuseNavigationItem
+{
+    id?: string;
+    title?: string;
+    subtitle?: string;
+    type:
+        | 'aside'
+        | 'basic'
+        | 'collapsable'
+        | 'divider'
+        | 'group'
+        | 'spacer';
+    hidden?: (item: FuseNavigationItem) => boolean;
+    active?: boolean;
+    disabled?: boolean;
+    link?: string;
+    externalLink?: boolean;
+    exactMatch?: boolean;
+    isActiveMatchOptions?: IsActiveMatchOptions;
+    function?: (item: FuseNavigationItem) => void;
+    classes?: {
+        title?: string;
+        subtitle?: string;
+        icon?: string;
+        wrapper?: string;
+    };
+    icon?: string;
+    badge?: {
+        title?: string;
+        classes?: string;
+    };
+    children?: FuseNavigationItem[];
+    meta?: any;
+}
+
+export type FuseVerticalNavigationAppearance =
+    | 'default'
+    | 'compact'
+    | 'dense'
+    | 'thin';
+
+export type FuseVerticalNavigationMode =
+    | 'over'
+    | 'side';
+
+export type FuseVerticalNavigationPosition =
+    | 'left'
+    | 'right';
@@ -0,0 +1,5 @@
+export * from '@fuse/components/navigation/horizontal/horizontal.component';
+export * from '@fuse/components/navigation/vertical/vertical.component';
+export * from '@fuse/components/navigation/navigation.module';
+export * from '@fuse/components/navigation/navigation.service';
+export * from '@fuse/components/navigation/navigation.types';
@@ -0,0 +1,96 @@
+<div
+    class="fuse-vertical-navigation-item-wrapper"
+    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
+    [ngClass]="item.classes?.wrapper">
+
+    <div
+        class="fuse-vertical-navigation-item"
+        [ngClass]="{'fuse-vertical-navigation-item-active': active,
+                    'fuse-vertical-navigation-item-disabled': item.disabled,
+                    'fuse-vertical-navigation-item-active-forced': item.active}">
+
+        <!-- Icon -->
+        <mat-icon
+            class="fuse-vertical-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            *ngIf="item.icon"
+            [svgIcon]="item.icon"></mat-icon>
+
+        <!-- Title & Subtitle -->
+        <div class="fuse-vertical-navigation-item-title-wrapper">
+            <div class="fuse-vertical-navigation-item-title">
+                <span [ngClass]="item.classes?.title">
+                    {{item.title}}
+                </span>
+            </div>
+            <div
+                class="fuse-vertical-navigation-item-subtitle"
+                *ngIf="item.subtitle">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
+        </div>
+
+        <!-- Badge -->
+        <div
+            class="fuse-vertical-navigation-item-badge"
+            *ngIf="item.badge">
+            <div
+                class="fuse-vertical-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
+            </div>
+        </div>
+
+    </div>
+
+</div>
+
+<ng-container *ngIf="!skipChildren">
+
+    <div class="fuse-vertical-navigation-item-children">
+
+        <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+
+            <!-- Skip the hidden items -->
+            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+
+                <!-- Basic -->
+                <fuse-vertical-navigation-basic-item
+                    *ngIf="item.type === 'basic'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-basic-item>
+
+                <!-- Collapsable -->
+                <fuse-vertical-navigation-collapsable-item
+                    *ngIf="item.type === 'collapsable'"
+                    [item]="item"
+                    [name]="name"
+                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+
+                <!-- Divider -->
+                <fuse-vertical-navigation-divider-item
+                    *ngIf="item.type === 'divider'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-divider-item>
+
+                <!-- Group -->
+                <fuse-vertical-navigation-group-item
+                    *ngIf="item.type === 'group'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-group-item>
+
+                <!-- Spacer -->
+                <fuse-vertical-navigation-spacer-item
+                    *ngIf="item.type === 'spacer'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-spacer-item>
+
+            </ng-container>
+
+        </ng-container>
+
+    </div>
+
+</ng-container>
@@ -0,0 +1,188 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+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';
+
+@Component({
+    selector       : 'fuse-vertical-navigation-aside-item',
+    templateUrl    : './aside.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+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;
+    @Input() item: FuseNavigationItem;
+    @Input() name: string;
+    @Input() skipChildren: boolean;
+
+    active: boolean = false;
+    private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _router: Router,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Active item id
+        if ( 'activeItemId' in changes )
+        {
+            // Mark if active
+            this._markIfActive(this._router.url);
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Mark if active
+        this._markIfActive(this._router.url);
+
+        // Attach a listener to the NavigationEnd event
+        this._router.events
+            .pipe(
+                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe((event: NavigationEnd) => {
+
+                // Mark if active
+                this._markIfActive(event.urlAfterRedirects);
+            });
+
+        // Get the parent navigation component
+        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        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
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * 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;
+                }
+            }
+
+            // Skip items other than 'basic'
+            if ( child.type !== 'basic' )
+            {
+                continue;
+            }
+
+            // 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;
+    }
+
+    /**
+     * Decide and mark if the item is active
+     *
+     * @private
+     */
+    private _markIfActive(currentUrl: string): void
+    {
+        // Check if the activeItemId is equals to this item id
+        this.active = this.activeItemId === this.item.id;
+
+        // If the aside has a children that is active,
+        // always mark it as active
+        if ( this._hasActiveChild(this.item, currentUrl) )
+        {
+            this.active = true;
+        }
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+}
@@ -0,0 +1,110 @@
+<!-- Item wrapper -->
+<div
+    class="fuse-vertical-navigation-item-wrapper"
+    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
+    [ngClass]="item.classes?.wrapper">
+
+    <!-- Item with an internal link -->
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-vertical-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
+
+    <!-- Item with an external link -->
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
+        [href]="item.link">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
+
+    <!-- Item with a function -->
+    <div
+        class="fuse-vertical-navigation-item"
+        *ngIf="!item.link && item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+    <!-- Item with an internal link and function -->
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && !item.externalLink && item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-vertical-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
+
+    <!-- Item with an external link and function -->
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && item.externalLink && item.function && !item.disabled"
+        [href]="item.link"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
+
+    <!-- Item with a no link and no function -->
+    <div
+        class="fuse-vertical-navigation-item"
+        *ngIf="!item.link && !item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+    <!-- Item is disabled -->
+    <div
+        class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
+        *ngIf="item.disabled">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
+
+</div>
+
+<!-- Item template -->
+<ng-template #itemTemplate>
+
+    <!-- Icon -->
+    <mat-icon
+        class="fuse-vertical-navigation-item-icon"
+        [ngClass]="item.classes?.icon"
+        *ngIf="item.icon"
+        [svgIcon]="item.icon"></mat-icon>
+
+    <!-- Title & Subtitle -->
+    <div class="fuse-vertical-navigation-item-title-wrapper">
+        <div class="fuse-vertical-navigation-item-title">
+            <span [ngClass]="item.classes?.title">
+                {{item.title}}
+            </span>
+        </div>
+        <div
+            class="fuse-vertical-navigation-item-subtitle"
+            *ngIf="item.subtitle">
+            <span [ngClass]="item.classes?.subtitle">
+                {{item.subtitle}}
+            </span>
+        </div>
+    </div>
+
+    <!-- Badge -->
+    <div
+        class="fuse-vertical-navigation-item-badge"
+        *ngIf="item.badge">
+        <div
+            class="fuse-vertical-navigation-item-badge-content"
+            [ngClass]="item.badge.classes">
+            {{item.badge.title}}
+        </div>
+    </div>
+
+</ng-template>
@@ -0,0 +1,83 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+
+@Component({
+    selector       : 'fuse-vertical-navigation-basic-item',
+    templateUrl    : './basic.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
+{
+    @Input() item: FuseNavigationItem;
+    @Input() name: string;
+
+    isActiveMatchOptions: IsActiveMatchOptions;
+    private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseUtilsService: FuseUtilsService
+    )
+    {
+        // Set the equivalent of {exact: false} as default for active match options.
+        // We are not assigning the item.isActiveMatchOptions directly to the
+        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
+        // will throw an error and stop working.
+        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ?? this.item.exactMatch
+                ? this._fuseUtilsService.exactMatchOptions
+                : this._fuseUtilsService.subsetMatchOptions;
+
+        // Get the parent navigation component
+        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,99 @@
+<div
+    class="fuse-vertical-navigation-item-wrapper"
+    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
+    [ngClass]="item.classes?.wrapper">
+
+    <div
+        class="fuse-vertical-navigation-item"
+        [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
+        (click)="toggleCollapsable()">
+
+        <!-- Icon -->
+        <mat-icon
+            class="fuse-vertical-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            *ngIf="item.icon"
+            [svgIcon]="item.icon"></mat-icon>
+
+        <!-- Title & Subtitle -->
+        <div class="fuse-vertical-navigation-item-title-wrapper">
+            <div class="fuse-vertical-navigation-item-title">
+                <span [ngClass]="item.classes?.title">
+                    {{item.title}}
+                </span>
+            </div>
+            <div
+                class="fuse-vertical-navigation-item-subtitle"
+                *ngIf="item.subtitle">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
+        </div>
+
+        <!-- Badge -->
+        <div
+            class="fuse-vertical-navigation-item-badge"
+            *ngIf="item.badge">
+            <div
+                class="fuse-vertical-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
+            </div>
+        </div>
+
+        <!-- Arrow -->
+        <mat-icon
+            class="fuse-vertical-navigation-item-arrow icon-size-4"
+            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
+
+    </div>
+
+</div>
+
+<div
+    class="fuse-vertical-navigation-item-children"
+    *ngIf="!isCollapsed"
+    @expandCollapse>
+
+    <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+
+        <!-- Skip the hidden items -->
+        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+
+            <!-- Basic -->
+            <fuse-vertical-navigation-basic-item
+                *ngIf="item.type === 'basic'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-basic-item>
+
+            <!-- Collapsable -->
+            <fuse-vertical-navigation-collapsable-item
+                *ngIf="item.type === 'collapsable'"
+                [item]="item"
+                [name]="name"
+                [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+
+            <!-- Divider -->
+            <fuse-vertical-navigation-divider-item
+                *ngIf="item.type === 'divider'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-divider-item>
+
+            <!-- Group -->
+            <fuse-vertical-navigation-group-item
+                *ngIf="item.type === 'group'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-group-item>
+
+            <!-- Spacer -->
+            <fuse-vertical-navigation-spacer-item
+                *ngIf="item.type === 'spacer'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-spacer-item>
+
+        </ng-container>
+
+    </ng-container>
+
+</div>
@@ -0,0 +1,347 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+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 { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+
+@Component({
+    selector       : 'fuse-vertical-navigation-collapsable-item',
+    templateUrl    : './collapsable.component.html',
+    styles         : [],
+    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;
+    @Input() name: string;
+
+    isCollapsed: boolean = true;
+    isExpanded: boolean = false;
+    private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _router: Router,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        return {
+            'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
+            'fuse-vertical-navigation-item-expanded' : this.isExpanded
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent navigation component
+        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // If the item has a children that has a matching url with the current url, expand...
+        if ( this._hasActiveChild(this.item, this._router.url) )
+        {
+            this.expand();
+        }
+        // Otherwise...
+        else
+        {
+            // If the autoCollapse is on, collapse...
+            if ( this.autoCollapse )
+            {
+                this.collapse();
+            }
+        }
+
+        // Listen for the onCollapsableItemCollapsed from the service
+        this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((collapsedItem) => {
+
+                // Check if the collapsed item is null
+                if ( collapsedItem === null )
+                {
+                    return;
+                }
+
+                // Collapse if this is a children of the collapsed item
+                if ( this._isChildrenOf(collapsedItem, this.item) )
+                {
+                    this.collapse();
+                }
+            });
+
+        // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
+        if ( this.autoCollapse )
+        {
+            this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
+                .pipe(takeUntil(this._unsubscribeAll))
+                .subscribe((expandedItem) => {
+
+                    // Check if the expanded item is null
+                    if ( expandedItem === null )
+                    {
+                        return;
+                    }
+
+                    // Check if this is a parent of the expanded item
+                    if ( this._isChildrenOf(this.item, expandedItem) )
+                    {
+                        return;
+                    }
+
+                    // Check if this has a children with a matching url with the current active url
+                    if ( this._hasActiveChild(this.item, this._router.url) )
+                    {
+                        return;
+                    }
+
+                    // Check if this is the expanded item
+                    if ( this.item === expandedItem )
+                    {
+                        return;
+                    }
+
+                    // If none of the above conditions are matched, collapse this item
+                    this.collapse();
+                });
+        }
+
+        // Attach a listener to the NavigationEnd event
+        this._router.events
+            .pipe(
+                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe((event: NavigationEnd) => {
+
+                // If the item has a children that has a matching url with the current url, expand...
+                if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
+                {
+                    this.expand();
+                }
+                // Otherwise...
+                else
+                {
+                    // If the autoCollapse is on, collapse...
+                    if ( this.autoCollapse )
+                    {
+                        this.collapse();
+                    }
+                }
+            });
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Collapse
+     */
+    collapse(): void
+    {
+        // Return if the item is disabled
+        if ( this.item.disabled )
+        {
+            return;
+        }
+
+        // Return if the item is already collapsed
+        if ( this.isCollapsed )
+        {
+            return;
+        }
+
+        // Collapse it
+        this.isCollapsed = true;
+        this.isExpanded = !this.isCollapsed;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        // Execute the observable
+        this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed.next(this.item);
+    }
+
+    /**
+     * Expand
+     */
+    expand(): void
+    {
+        // Return if the item is disabled
+        if ( this.item.disabled )
+        {
+            return;
+        }
+
+        // Return if the item is already expanded
+        if ( !this.isCollapsed )
+        {
+            return;
+        }
+
+        // Expand it
+        this.isCollapsed = false;
+        this.isExpanded = !this.isCollapsed;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        // Execute the observable
+        this._fuseVerticalNavigationComponent.onCollapsableItemExpanded.next(this.item);
+    }
+
+    /**
+     * Toggle collapsable
+     */
+    toggleCollapsable(): void
+    {
+        // Toggle collapse/expand
+        if ( this.isCollapsed )
+        {
+            this.expand();
+        }
+        else
+        {
+            this.collapse();
+        }
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        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;
+    }
+}
@@ -0,0 +1,4 @@
+<!-- Divider -->
+<div
+    class="fuse-vertical-navigation-item-wrapper divider"
+    [ngClass]="item.classes?.wrapper"></div>
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+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';
+
+@Component({
+    selector       : 'fuse-vertical-navigation-divider-item',
+    templateUrl    : './divider.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
+{
+    @Input() item: FuseNavigationItem;
+    @Input() name: string;
+
+    private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent navigation component
+        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,85 @@
+<!-- Item wrapper -->
+<div
+    class="fuse-vertical-navigation-item-wrapper"
+    [class.fuse-vertical-navigation-item-has-subtitle]="!!item.subtitle"
+    [ngClass]="item.classes?.wrapper">
+
+    <div class="fuse-vertical-navigation-item">
+
+        <!-- Icon -->
+        <mat-icon
+            class="fuse-vertical-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            *ngIf="item.icon"
+            [svgIcon]="item.icon"></mat-icon>
+
+        <!-- Title & Subtitle -->
+        <div class="fuse-vertical-navigation-item-title-wrapper">
+            <div class="fuse-vertical-navigation-item-title">
+                <span [ngClass]="item.classes?.title">
+                    {{item.title}}
+                </span>
+            </div>
+            <div
+                class="fuse-vertical-navigation-item-subtitle"
+                *ngIf="item.subtitle">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
+        </div>
+
+        <!-- Badge -->
+        <div
+            class="fuse-vertical-navigation-item-badge"
+            *ngIf="item.badge">
+            <div
+                class="fuse-vertical-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
+            </div>
+        </div>
+
+    </div>
+
+</div>
+
+<ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+
+    <!-- Skip the hidden items -->
+    <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+
+        <!-- Basic -->
+        <fuse-vertical-navigation-basic-item
+            *ngIf="item.type === 'basic'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-basic-item>
+
+        <!-- Collapsable -->
+        <fuse-vertical-navigation-collapsable-item
+            *ngIf="item.type === 'collapsable'"
+            [item]="item"
+            [name]="name"
+            [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
+
+        <!-- Divider -->
+        <fuse-vertical-navigation-divider-item
+            *ngIf="item.type === 'divider'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-divider-item>
+
+        <!-- Group -->
+        <fuse-vertical-navigation-group-item
+            *ngIf="item.type === 'group'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-group-item>
+
+        <!-- Spacer -->
+        <fuse-vertical-navigation-spacer-item
+            *ngIf="item.type === 'spacer'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-spacer-item>
+
+    </ng-container>
+
+</ng-container>
@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+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';
+
+@Component({
+    selector       : 'fuse-vertical-navigation-group-item',
+    templateUrl    : './group.component.html',
+    styles         : [],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+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;
+    @Input() name: string;
+
+    private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent navigation component
+        this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
+
+        // Subscribe to onRefreshed on the navigation component
+        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
+            takeUntil(this._unsubscribeAll)
+        ).subscribe(() => {
+
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        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;
+    }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sercan	6c7201b77a	Merge remote-tracking branch 'origin/demo' into starter	2021-06-03 13:28:30 +03:00
sercan	2c5cd60c0a	(general) Updated version numbers and changelog	2021-06-03 13:25:07 +03:00
sercan	decb238f73	(dependencies) Updated various dependencies to their latest versions (fuse/highlight) Updated the import path	2021-06-03 13:18:05 +03:00
sercan	ab3ad4fd2f	(apps/scrumboard) Dark mode fixes and tweaks	2021-06-03 11:27:51 +03:00
sercan	c2dd77d7a3	(angular.json) Removed "e2e" entry, fixed the styles file path for "test"	2021-06-02 12:45:12 +03:00
sercan	a78b087a68	(apps/scrumboard) New version of the Scrumboard app	2021-06-02 11:42:22 +03:00
sercan	84d40427a1	(apps/ecommerce) Small tweaks (apps/mailbox) Small tweaks	2021-06-02 11:41:47 +03:00
sercan	f295fd9061	(fuse/autogrow) BREAKING: Removed fuseAutogrow in favor of matTextareaAutosize since all of its problems solved, use [matTextareaAutosize] without any vertical padding on the textarea itself.	2021-05-31 17:14:03 +03:00
sercan	b98cfc1d37	(Angular Material) Increased default MatDialog border radius to 16px for better consistency	2021-05-31 16:12:08 +03:00
sercan	0ba5677c01	(Dependencies) Updated Angular & Angular Material to v12.0.2	2021-05-31 10:49:51 +03:00
sercan	90f869e7b9	Merge remote-tracking branch 'origin/demo' into starter	2021-05-31 10:46:26 +03:00
sercan	96ef1281ae	(Angular Material) Fixed: Density setting is not working for dark themes	2021-05-31 10:45:29 +03:00
sercan	2d2db97416	Merge remote-tracking branch 'origin/demo' into starter	2021-05-24 14:33:12 +03:00
sercan	466bf50de4	Increased the version number Updated the changelog	2021-05-24 14:32:45 +03:00
sercan	5daa2260e6	Merge remote-tracking branch 'origin/demo' into starter	2021-05-24 14:29:35 +03:00
sercan	95bc7dc4db	(apps/ecommerce/inventory) Performance improvements, decreased the mockApi delay	2021-05-24 09:22:18 +03:00
sercan	af984fcba1	Merge remote-tracking branch 'origin/demo' into starter	2021-05-23 07:13:28 +03:00
sercan	cfca19dc68	(mockApi) Removed typings from data files	2021-05-23 07:11:58 +03:00
sercan	a0c20f8d59	(pages/settings) Fixed: Settings container component width is not filling the container	2021-05-22 21:14:42 +03:00
sercan	97d3662417	Merge remote-tracking branch 'origin/demo' into starter	2021-05-21 12:17:06 +03:00
sercan	df9f2256cd	Increased the version number Updated the changelog	2021-05-21 12:02:05 +03:00
sercan	6bcd04b799	(eslint) Fixed linting issues	2021-05-21 11:48:42 +03:00
sercan	3c0e326113	(dependencies) Updated various packages to their latest versions	2021-05-21 11:40:50 +03:00
sercan	c7158377f7	Revert "(dependencies) Updated Angular & Angular Material to v12.0.1" This reverts commit `105575d4`	2021-05-20 22:46:40 +03:00
sercan	105575d40e	(dependencies) Updated Angular & Angular Material to v12.0.1	2021-05-20 22:23:25 +03:00
sercan	f470313d72	(pages/activities) Couple data tweaks	2021-05-20 16:51:40 +03:00
sercan	60e9c65505	(pages/activities) Couple data and style tweaks	2021-05-20 16:48:38 +03:00
sercan	3b727fe859	(pages/activities) Added Activities page (timeline)	2021-05-20 15:30:14 +03:00
sercan	4694bb401d	(layout/common) Added trackBy functions to ngFor loops in common components	2021-05-19 22:43:16 +03:00
sercan	ee86dc6245	(tailwind) Use TAILWIND_MODE environment variable to activate purge on build	2021-05-19 14:45:30 +03:00
sercan	3d09241c64	(fuse/animations) Fixed: Barrel exports (FuseMasonry) Fixed: Barrel exports (FuseUtilsService) Fixed: Barrel exports (FuseValidators) Fixed: Barrel exports	2021-05-19 14:37:38 +03:00
sercan	e499c06884	(apps/mailbox) Small tweak on resolver's comment	2021-05-19 13:38:10 +03:00
sercan	eca618c95b	(FuseNavigation) Fixed: If [routerLinkActiveOptions] is "undefined" initially, router throws an error and stops working	2021-05-19 13:37:37 +03:00
sercan	8524df013a	(fuse/tailwind) Fixed: Barrel exports are wrong for FuseTailwindService	2021-05-19 10:57:40 +03:00
sercan	d897a244c8	Merge remote-tracking branch 'origin/demo' into starter	2021-05-18 16:25:53 +03:00
sercan	e4df408abe	(FuseNavigation) Added support for new "isActiveMatchOptions" for Basic navigation items; https://github.com/angular/angular/pull/40303 (docs) Updated FuseNavigation documentation	2021-05-18 16:09:31 +03:00
sercan	fd859a8663	(comments) Fixed: The word 'data' replaced with 'mock-api' by mistake in the past causing a lot of comments to make no sense	2021-05-18 15:18:44 +03:00
sercan	59960af7a5	(MultiLang) Added multi language support using @ngneat/transloco (docs) Added docs about multi language	2021-05-18 15:11:57 +03:00
sercan	74c4dc2ad8	(app.module.ts) Small tweaks on comments	2021-05-18 14:34:46 +03:00
sercan	f76f38b812	(FuseVerticalNavigation) Added missing return types	2021-05-18 14:12:38 +03:00
sercan	5c40e99518	(FuseNavigation) Use the generic return type for "getComponent" (docs) Updated FuseNavigation docs	2021-05-18 13:10:39 +03:00
sercan	c1ca701e92	(FuseNavigation) Added a generic return type for "getComponent" method on FuseNavigationService	2021-05-18 13:08:02 +03:00
sercan	e00dda98bc	(core) Separated the "auth" and "icon registry" to their own modules to keep the CoreModule simple	2021-05-18 11:44:42 +03:00
sercan	9edc62f703	(eslint) Activate explicit return types on functions and methods	2021-05-18 11:42:36 +03:00
sercan	f9c8e16778	(fuse/mock-api) Added a return type to the factory function	2021-05-17 15:21:08 +03:00
sercan	4a30e3482c	(eslint) Removed e2e tsconfig path as there is no default e2e solution included into Angular since v12.0.0	2021-05-16 16:22:40 +03:00
sercan	837f444cc9	(overrides/angular-material) Use @apply whenever it's possible	2021-05-16 15:55:17 +03:00
sercan	d0876eb80c	(overrides) Change the text and arrow color of mat-select on focus when it's used as a prefix or suffix in mat-form-field	2021-05-16 15:54:55 +03:00
sercan	3395e7f0bc	(docs) Updated docs	2021-05-15 13:44:13 +03:00
sercan	d146a92c79	Merge remote-tracking branch 'origin/demo' into starter	2021-05-15 13:18: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	27b6858b76	Merge remote-tracking branch 'origin/demo' into starter	2021-05-06 17:12:50 +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
sercan	b05763135e	(apps/chat) Adjustments and optimizations for smaller devices	2021-04-30 19:55:37 +03:00
sercan	fcfba4c9e4	Merge remote-tracking branch 'origin/demo' into starter	2021-04-30 19:40:30 +03:00
sercan	40894e0aa3	Merge remote-tracking branch 'origin/demo' into starter # Conflicts: # src/app/app.routing.ts # src/app/mock-api/common/navigation/data.ts # src/app/modules/admin/apps/academy/academy.service.ts # src/app/modules/admin/apps/academy/details/details.component.html # src/app/modules/admin/apps/academy/list/list.component.html # src/app/modules/admin/apps/mailbox/list/list.component.ts # src/app/modules/admin/docs/changelog/changelog.ts # src/app/modules/admin/pages/pricing/modern/modern.component.html # src/app/modules/admin/pages/pricing/simple/simple.component.html # src/app/modules/admin/pages/pricing/single/single.component.html # src/app/modules/admin/pages/pricing/table/table.component.html	2021-04-30 19:40:07 +03:00
sercan	5dd60c816c	(apps/chat) Small adjustments and tweaks for Dark mode	2021-04-30 19:39:02 +03:00
sercan	0ac967a945	Removed optional chaining operators to support Node v12 Set the version on .nvmrc to 12	2021-04-30 19:27:40 +03:00
sercan	e3821da077	(apps/chat) New and improved Chat app	2021-04-30 19:18:09 +03:00
sercan	ee48e11548	Increased the version number (dependencies) Updated Angular, Angular Material and various other packages (changelog) Updated the changelog	2021-04-30 19:07:53 +03:00
sercan	215546cc31	(apps/academy) Removed a misplaced import	2021-04-29 19:57:58 +03:00
sercan	072dbce6d4	(fuse/fullscreen) Added Fullscreen toggle component	2021-04-28 10:55:32 +03:00
sercan	5ffe0d0efa	(pages/pricing) Improved the spacing of the CTA section on all pricing pages	2021-04-26 23:42:16 +03:00
sercan	e90fb9e618	(apps/academy) Added missing trackBy functions to '*ngFor's	2021-04-26 16:41:21 +03:00
sercan	88e98d002d	(apps/mailbox) Removed unused methods	2021-04-26 16:08:19 +03:00
sercan	deeef323f9	(apps/academy) Better error handling on courses that are not exist	2021-04-26 15:59:44 +03:00
sercan	8dcf21cb1a	Merge remote-tracking branch 'origin/demo' into starter	2021-04-26 10:23:15 +03:00
sercan	284e282761	Remove quotes from .nvmrc version info	2021-04-26 10:23:08 +03:00
sercan	d917f03883	Merge remote-tracking branch 'origin/demo' into starter	2021-04-26 10:20:06 +03:00
sercan	52e234325f	Added .nvmrc with required Node version	2021-04-26 10:19:52 +03:00
sercan	0f2ddbda83	Merge remote-tracking branch 'origin/demo' into starter # Conflicts: # src/app/mock-api/common/navigation/data.ts # src/app/modules/admin/docs/changelog/changelog.ts	2021-04-26 09:56:44 +03:00
sercan	fa0d74504b	Merge remote-tracking branch 'origin/demo' into starter	2021-04-26 09:56:29 +03:00
sercan	42e0864538	(dependencies) Updated Angular, Angular Material and various other packages (changelog) Added changelog and updated the version number	2021-04-26 09:55:41 +03:00
sercan	ad2b19a07a	Merge remote-tracking branch 'origin/demo' into starter # Conflicts: # src/app/app.routing.ts # src/app/mock-api/common/navigation/data.ts # src/app/modules/admin/apps/contacts/details/details.component.html # src/app/modules/admin/apps/file-manager/list/list.component.html # src/app/modules/admin/apps/file-manager/list/list.component.ts # src/app/modules/landing/home/home.component.html	2021-04-26 09:31:42 +03:00
sercan	6b6442b37f	(apps/academy) Added page info in between the desktop navigation buttons	2021-04-26 09:29:59 +03:00
sercan	bb0efade72	(apps/academy) New version of the Academy app	2021-04-25 23:23:23 +03:00
sercan	63edc8d1f2	(layouts/classy) Disabled footer on Classy layout for more 'classy' look	2021-04-25 23:15:38 +03:00
sercan	9dde624bb5	(icons) Added Material Solid icons	2021-04-25 23:14:13 +03:00
sercan	a5a27d0a51	(icons) Added Material Solid icons	2021-04-25 13:23:26 +03:00
sercan	85ea34a6ce	(Contacts) Fixed: Clicking on the tag checkbox on tag panel breaks the toggling	2021-04-25 12:42:41 +03:00
sercan	9b059f8d0d	(icons/heroicons) Updated heroicons to v1.0.1	2021-04-22 22:05:59 +03:00
sercan	df48ad1c56	(apps/file-manager) Removed unnecessary imports	2021-04-22 11:24:16 +03:00
sercan	6a113a5317	(icons/heroicons-outline) Fixed: academic-cap icon path fills breaks the icon	2021-04-22 11:23:21 +03:00
sercan	4b268e5d1b	(apps/file-manager) Better grid	2021-04-20 22:44:12 +03:00
sercan	4bf11591a2	(Assets) Added avatar images back	2021-04-19 13:08:24 +03:00
sercan	f45a605b4e	Preparing the starter	2021-04-15 17:43:28 +03:00
sercan	c150a8902c	Starter	2021-04-15 17:23:49 +03:00
sercan	5e8701f517	Fixed the landing	2021-04-15 17:23:17 +03:00
sercan	700d52d815	Fuse v12.0.0	2021-04-15 17:13:46 +03:00
				`@@ -0,0 +1 @@`
				`export * from '@fuse/animations/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/alert/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/card/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/date-range/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/drawer/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/fullscreen/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/highlight/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/masonry/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/navigation/public-api';`