Merge branch 'dev' into dev-starter

Standalone components, Angular v16 and more
2026-04-25 13:34:11 +00:00 · 2023-05-30 12:27:04 +03:00 · 2023-05-30 12:24:21 +03:00 · 2023-05-30 12:00:42 +03:00 · 2023-05-30 11:58:30 +03:00 · 2023-05-30 09:26:50 +03:00
719 changed files with 89016 additions and 37493 deletions
@@ -1,6 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
 [*]
-charset=utf-8
-end_of_line=lf
-insert_final_newline=false
-indent_style=space
-indent_size=4
+charset = utf-8
+indent_style = space
+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,8 +28,10 @@
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*

 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -1 +1 @@
-save-prefix=''
+legacy-peer-deps=true
@@ -0,0 +1 @@
+16
@@ -1,16 +1,72 @@
 // -----------------------------------------------------------------------------------------------------
-// @ Image/Vector/Icon Credits
+// @ 3rd party credits
 // -----------------------------------------------------------------------------------------------------
-Avatars - https://uifaces.co/
-Flag icons - http://www.famfamfam.com/lab/icons/flags/
-Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
-A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
-Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
-Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
-Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
-Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
-Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
-Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
-Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
-Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
-First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4
+
+// 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
@@ -1,2 +0,0 @@
-This project is protected by Envato's Regular License. For more information,
-check the official license page at https://themeforest.net/licenses/terms/regular
@@ -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,16 +1,10 @@
-# Fuse - Angular
+# Fuse - Admin template and Starter project for Angular

-Material Design Admin Template with Angular 7+ and Angular Material
-
-## The Community
-
-Share your ideas, discuss Fuse and help each other.
-
-[Click here](http://fusetheme.com/community) to see our Community page.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli)

 ## Development server

-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

 ## Code scaffolding

@@ -18,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can

 ## 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.

 ## Running unit tests

@@ -26,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/).
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice.  To use this command, you need to first add a package that implements end-to-end testing capabilities.

 ## 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.
@@ -4,90 +4,99 @@
    "newProjectRoot": "projects",
    "projects": {
        "fuse": {
-            "root": "",
-            "sourceRoot": "src",
            "projectType": "application",
-            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
-                    "styleext": "scss"
+                    "style": "scss"
                }
            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
-                        "outputPath": "dist",
+                        "outputPath": "dist/fuse",
                        "index": "src/index.html",
                        "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.app.json",
+                        "polyfills": [
+                            "zone.js"
+                        ],
+                        "tsConfig": "tsconfig.app.json",
+                        "inlineStyleLanguage": "scss",
+                        "allowedCommonJsDependencies": [
+                            "apexcharts",
+                            "highlight.js",
+                            "crypto-js/enc-utf8",
+                            "crypto-js/hmac-sha256",
+                            "crypto-js/enc-base64",
+                            "flat",
+                            "quill"
+                        ],
                        "assets": [
-                            "src/favicon.ico",
-                            "src/assets"
+                            "src/favicon-16x16.png",
+                            "src/favicon-32x32.png",
+                            "src/assets",
+                            {
+                                "glob": "_redirects",
+                                "input": "src",
+                                "output": "/"
+                            }
                        ],
+                        "stylePreprocessorOptions": {
+                            "includePaths": [
+                                "src/@fuse/styles"
+                            ]
+                        },
                        "styles": [
-                            "src/styles.scss"
+                            "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": [],
-                        "showCircularDependencies": false
+                        "scripts": []
                    },
                    "configurations": {
                        "production": {
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.prod.ts"
-                                }
-                            ],
-                            "optimization": true,
-                            "outputHashing": "all",
-                            "sourceMap": false,
-                            "extractCss": true,
-                            "namedChunks": false,
-                            "aot": true,
-                            "extractLicenses": true,
-                            "vendorChunk": false,
-                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
-                                    "maximumWarning": "2mb",
+                                    "maximumWarning": "3mb",
                                    "maximumError": "5mb"
-                                }
-                            ]
-                        },
-                        "ec": {
-                            "sourceMap": true,
-                            "extractCss": true
-                        },
-                        "hmr": {
-                            "fileReplacements": [
+                                },
                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.hmr.ts"
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "75kb",
+                                    "maximumError": "90kb"
                                }
-                            ]
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
                        }
-                    }
+                    },
+                    "defaultConfiguration": "production"
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
-                    "options": {
-                        "browserTarget": "fuse:build"
-                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "fuse:build:production"
                        },
-                        "hmr": {
-                            "hmr": true,
-                            "browserTarget": "fuse:build:hmr"
-                        },
-                        "ec": {
-                            "browserTarget": "fuse:build:ec"
+                        "development": {
+                            "browserTarget": "fuse:build:development"
                        }
-                    }
+                    },
+                    "defaultConfiguration": "development"
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -98,62 +107,24 @@
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
-                        "main": "src/test.ts",
-                        "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
-                        "styles": [
-                            "src/styles.scss"
+                        "polyfills": [
+                            "zone.js",
+                            "zone.js/testing"
                        ],
-                        "scripts": [],
+                        "tsConfig": "tsconfig.spec.json",
+                        "inlineStyleLanguage": "scss",
                        "assets": [
-                            "src/favicon.ico",
+                            "src/favicon-16x16.png",
+                            "src/favicon-32x32.png",
                            "src/assets"
-                        ]
-                    }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": [
-                            "src/tsconfig.app.json",
-                            "src/tsconfig.spec.json"
                        ],
-                        "exclude": [
-                            "**/node_modules/**"
-                        ]
-                    }
-                }
-            }
-        },
-        "fuse-e2e": {
-            "root": "e2e/",
-            "projectType": "application",
-            "prefix": "",
-            "architect": {
-                "e2e": {
-                    "builder": "@angular-devkit/build-angular:protractor",
-                    "options": {
-                        "protractorConfig": "e2e/protractor.conf.js",
-                        "devServerTarget": "fuse:serve"
-                    },
-                    "configurations": {
-                        "production": {
-                            "devServerTarget": "fuse:serve:production"
-                        }
-                    }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": [
-                            "**/node_modules/**"
-                        ]
+                        "styles": [
+                            "src/styles/styles.scss"
+                        ],
+                        "scripts": []
                    }
                }
            }
        }
-    },
-    "defaultProject": "fuse"
+    }
 }
@@ -1,31 +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            : [
-        './src/**/*.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: require('path').join(__dirname, './tsconfig.e2e.json')
-        });
-        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
-    }
-};
@@ -1,14 +0,0 @@
-import { FusePage } from './app.po';
-
-describe('Fuse App', () => {
-    let page: FusePage;
-
-    beforeEach(() => {
-        page = new FusePage();
-    });
-
-    it('should display welcome message', () => {
-        page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
-    });
-});
@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class FusePage {
-    navigateTo(): any {
-        return browser.get('/');
-    }
-
-    getParagraphText(): any {
-        return element(by.css('app #main')).getText();
-    }
-}
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
@@ -1,90 +1,66 @@
 {
-  "name": "fuse",
-  "version": "7.0.1",
-  "license": "https://themeforest.net/licenses/terms/regular",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve --open",
-    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
-    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
-    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
-    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
-    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
-  },
-  "private": true,
-  "dependencies": {
-    "@agm/core": "1.0.0-beta.5",
-    "@angular/animations": "7.0.4",
-    "@angular/cdk": "7.0.4",
-    "@angular/common": "7.0.4",
-    "@angular/compiler": "7.0.4",
-    "@angular/core": "7.0.4",
-    "@angular/flex-layout": "7.0.0-beta.19",
-    "@angular/forms": "7.0.4",
-    "@angular/http": "7.0.4",
-    "@angular/material": "7.0.4",
-    "@angular/material-moment-adapter": "7.0.4",
-    "@angular/platform-browser": "7.0.4",
-    "@angular/platform-browser-dynamic": "7.0.4",
-    "@angular/router": "7.0.4",
-    "@ngrx/effects": "6.1.2",
-    "@ngrx/router-store": "6.1.2",
-    "@ngrx/store": "6.1.2",
-    "@ngrx/store-devtools": "6.1.2",
-    "@ngx-translate/core": "11.0.1",
-    "@swimlane/dragula": "3.7.3",
-    "@swimlane/ngx-charts": "10.0.0",
-    "@swimlane/ngx-datatable": "14.0.0",
-    "@swimlane/ngx-dnd": "6.0.0",
-    "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.26.4",
-    "angular-in-memory-web-api": "0.7.0",
-    "chart.js": "2.7.3",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.7",
-    "d3": "5.7.0",
-    "date-fns": "1.29.0",
-    "hammerjs": "2.0.8",
-    "lodash": "4.17.11",
-    "moment": "2.22.2",
-    "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "7.0.2",
-    "ngx-cookie-service": "2.0.0",
-    "perfect-scrollbar": "1.4.0",
-    "prismjs": "1.15.0",
-    "rxjs": "6.3.3",
-    "rxjs-compat": "6.3.3",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.26"
-  },
-  "devDependencies": {
-    "@angular/cli": "7.0.6",
-    "@angular/compiler-cli": "7.0.4",
-    "@angular/language-service": "7.0.4",
-    "@angular-devkit/build-angular": "0.10.6",
-    "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.11",
-    "@types/jasminewd2": "2.0.6",
-    "@types/lodash": "4.14.118",
-    "@types/node": "8.9.5",
-    "codelyzer": "4.5.0",
-    "jasmine-core": "2.99.1",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "3.0.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.4",
-    "karma-jasmine": "1.1.2",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.4.1",
-    "ts-node": "7.0.1",
-    "tslint": "5.11.0",
-    "typescript": "3.1.6",
-    "webpack-bundle-analyzer": "3.0.3"
-  }
+    "name": "fuse-angular",
+    "version": "18.0.0",
+    "description": "Fuse - Angular Admin Template and Starter Project",
+    "author": "https://themeforest.net/user/srcn",
+    "license": "https://themeforest.net/licenses/standard",
+    "private": true,
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "test": "ng test"
+    },
+    "dependencies": {
+        "@angular/animations": "16.0.3",
+        "@angular/cdk": "16.0.2",
+        "@angular/common": "16.0.3",
+        "@angular/compiler": "16.0.3",
+        "@angular/core": "16.0.3",
+        "@angular/forms": "16.0.3",
+        "@angular/material": "16.0.2",
+        "@angular/material-luxon-adapter": "16.0.2",
+        "@angular/platform-browser": "16.0.3",
+        "@angular/platform-browser-dynamic": "16.0.3",
+        "@angular/router": "16.0.3",
+        "@ngneat/transloco": "4.2.7",
+        "apexcharts": "3.40.0",
+        "crypto-js": "3.3.0",
+        "highlight.js": "11.8.0",
+        "lodash-es": "4.17.21",
+        "luxon": "3.3.0",
+        "ng-apexcharts": "1.7.6",
+        "ngx-quill": "22.0.0",
+        "perfect-scrollbar": "1.5.5",
+        "quill": "1.3.7",
+        "rxjs": "7.8.1",
+        "tslib": "2.5.2",
+        "zone.js": "0.13.0"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "16.0.3",
+        "@angular/cli": "16.0.3",
+        "@angular/compiler-cli": "16.0.3",
+        "@tailwindcss/typography": "0.5.9",
+        "@types/chroma-js": "2.4.0",
+        "@types/crypto-js": "3.1.47",
+        "@types/highlight.js": "10.1.0",
+        "@types/jasmine": "4.3.2",
+        "@types/lodash": "4.14.195",
+        "@types/lodash-es": "4.17.7",
+        "@types/luxon": "3.3.0",
+        "autoprefixer": "10.4.14",
+        "chroma-js": "2.4.2",
+        "jasmine-core": "5.0.0",
+        "karma": "6.4.2",
+        "karma-chrome-launcher": "3.2.0",
+        "karma-coverage": "2.2.0",
+        "karma-jasmine": "5.1.0",
+        "karma-jasmine-html-reporter": "2.0.0",
+        "lodash": "4.17.21",
+        "postcss": "8.4.24",
+        "tailwindcss": "3.3.2",
+        "typescript": "5.0.4"
+    }
 }
@@ -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 };
@@ -1,417 +1 @@
-import { sequence, trigger, animate, style, group, query, transition, animateChild, state, animation, useAnimation, stagger } from '@angular/animations';
-
-const customAnimation = animation([
-    style({
-        opacity  : '{{opacity}}',
-        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
-    }),
-    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
-], {
-    params: {
-        duration: '200ms',
-        delay   : '0ms',
-        opacity : '0',
-        scale   : '1',
-        x       : '0',
-        y       : '0',
-        z       : '0'
-    }
-});
-
-export const fuseAnimations = [
-
-    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
-
-    trigger('animateStagger', [
-        state('50', style('*')),
-        state('100', style('*')),
-        state('200', style('*')),
-
-        transition('void => 50',
-            query('@*',
-                [
-                    stagger('50ms', [
-                        animateChild()
-                    ])
-                ], {optional: true})),
-        transition('void => 100',
-            query('@*',
-                [
-                    stagger('100ms', [
-                        animateChild()
-                    ])
-                ], {optional: true})),
-        transition('void => 200',
-            query('@*',
-                [
-                    stagger('200ms', [
-                        animateChild()
-                    ])
-                ], {optional: true}))
-    ]),
-
-    trigger('fadeInOut', [
-        state('0', style({
-            display: 'none',
-            opacity: 0
-        })),
-        state('1', style({
-            display: 'block',
-            opacity: 1
-        })),
-        transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in'))
-    ]),
-
-    trigger('slideInOut', [
-        state('0', style({
-            height : '0px',
-            display: 'none'
-        })),
-        state('1', style({
-            height : '*',
-            display: 'block'
-        })),
-        transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in'))
-    ]),
-
-    trigger('slideIn', [
-        transition('void => left', [
-                style({
-                    transform: 'translateX(100%)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(0)'
-                    })
-                )
-            ]
-        ),
-        transition('left => void', [
-                style({
-                    transform: 'translateX(0)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(-100%)'
-                    })
-                )
-            ]
-        ),
-        transition('void => right', [
-                style({
-                    transform: 'translateX(-100%)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(0)'
-                    })
-                )
-            ]
-        ),
-        transition('right => void', [
-                style({
-                    transform: 'translateX(0)'
-                }),
-                animate('300ms ease-in',
-                    style({
-                        transform: 'translateX(100%)'
-                    })
-                )
-            ]
-        ),
-    ]),
-
-    trigger('slideInLeft', [
-        state('void', style({
-            transform: 'translateX(-100%)',
-            display  : 'none'
-        })),
-        state('*', style({
-            transform: 'translateX(0)',
-            display  : 'flex'
-        })),
-        transition('void => *', animate('300ms')),
-        transition('* => void', animate('300ms'))
-    ]),
-
-    trigger('slideInRight', [
-        state('void', style({
-            transform: 'translateX(100%)',
-            display  : 'none'
-        })),
-        state('*', style({
-            transform: 'translateX(0)',
-            display  : 'flex'
-        })),
-        transition('void => *', animate('300ms')),
-        transition('* => void', animate('300ms'))
-    ]),
-
-    trigger('slideInTop', [
-        state('void', style({
-            transform: 'translateY(-100%)',
-            display  : 'none'
-        })),
-        state('*', style({
-            transform: 'translateY(0)',
-            display  : 'flex'
-        })),
-        transition('void => *', animate('300ms')),
-        transition('* => void', animate('300ms'))
-    ]),
-
-    trigger('slideInBottom', [
-        state('void',
-            style({
-                transform: 'translateY(100%)',
-                display  : 'none'
-            })),
-        state('*', style({
-            transform: 'translateY(0)',
-            display  : 'flex'
-        })),
-        transition('void => *', animate('300ms')),
-        transition('* => void', animate('300ms'))
-    ]),
-
-    trigger('expandCollapse', [
-        state('void', style({
-            height: '0px'
-        })),
-        state('*', style({
-            height: '*'
-        })),
-        transition('void => *', animate('300ms ease-out')),
-        transition('* => void', animate('300ms ease-in'))
-    ]),
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Router animations
-    // -----------------------------------------------------------------------------------------------------
-    
-    trigger('routerTransitionLeft', [
-
-        transition('* => *', [
-            query('content > :enter, content > :leave', [
-                style({
-                    position: 'absolute',
-                    top     : 0,
-                    bottom  : 0,
-                    left    : 0,
-                    right   : 0
-                })
-            ], {optional: true}),
-            query('content > :enter', [
-                style({
-                    transform: 'translateX(100%)',
-                    opacity  : 0
-                })
-            ], {optional: true}),
-            sequence([
-                group([
-                    query('content > :leave', [
-                        style({
-                            transform: 'translateX(0)',
-                            opacity  : 1
-                        }),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                            style({
-                                transform: 'translateX(-100%)',
-                                opacity  : 0
-                            }))
-                    ], {optional: true}),
-                    query('content > :enter', [
-                        style({transform: 'translateX(100%)'}),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                            style({
-                                transform: 'translateX(0%)',
-                                opacity  : 1
-                            }))
-                    ], {optional: true})
-                ]),
-                query('content > :leave', animateChild(), {optional: true}),
-                query('content > :enter', animateChild(), {optional: true})
-            ])
-        ])
-    ]),
-
-    trigger('routerTransitionRight', [
-
-        transition('* => *', [
-            query('content > :enter, content > :leave', [
-                style({
-                    position: 'absolute',
-                    top     : 0,
-                    bottom  : 0,
-                    left    : 0,
-                    right   : 0
-                })
-            ], {optional: true}),
-            query('content > :enter', [
-                style({
-                    transform: 'translateX(-100%)',
-                    opacity  : 0
-                })
-            ], {optional: true}),
-            sequence([
-                group([
-                    query('content > :leave', [
-                        style({
-                            transform: 'translateX(0)',
-                            opacity  : 1
-                        }),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                            style({
-                                transform: 'translateX(100%)',
-                                opacity  : 0
-                            }))
-                    ], {optional: true}),
-                    query('content > :enter', [
-                        style({transform: 'translateX(-100%)'}),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                            style({
-                                transform: 'translateX(0%)',
-                                opacity  : 1
-                            }))
-                    ], {optional: true})
-                ]),
-                query('content > :leave', animateChild(), {optional: true}),
-                query('content > :enter', animateChild(), {optional: true})
-            ])
-        ])
-    ]),
-
-    trigger('routerTransitionUp', [
-
-        transition('* => *', [
-            query('content > :enter, content > :leave', [
-                style({
-                    position: 'absolute',
-                    top     : 0,
-                    bottom  : 0,
-                    left    : 0,
-                    right   : 0
-                })
-            ], {optional: true}),
-            query('content > :enter', [
-                style({
-                    transform: 'translateY(100%)',
-                    opacity  : 0
-                })
-            ], {optional: true}),
-            group([
-                query('content > :leave', [
-                    style({
-                        transform: 'translateY(0)',
-                        opacity  : 1
-                    }),
-                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                        style({
-                            transform: 'translateY(-100%)',
-                            opacity  : 0
-                        }))
-                ], {optional: true}),
-                query('content > :enter', [
-                    style({transform: 'translateY(100%)'}),
-                    animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                        style({
-                            transform: 'translateY(0%)',
-                            opacity  : 1
-                        }))
-                ], {optional: true})
-            ]),
-            query('content > :leave', animateChild(), {optional: true}),
-            query('content > :enter', animateChild(), {optional: true})
-        ])
-    ]),
-
-    trigger('routerTransitionDown', [
-
-        transition('* => *', [
-            query('content > :enter, content > :leave', [
-                style({
-                    position: 'absolute',
-                    top     : 0,
-                    bottom  : 0,
-                    left    : 0,
-                    right   : 0
-                })
-            ], {optional: true}),
-            query('content > :enter', [
-                style({
-                    transform: 'translateY(-100%)',
-                    opacity  : 0
-                })
-            ], {optional: true}),
-            sequence([
-                group([
-                    query('content > :leave', [
-                        style({
-                            transform: 'translateY(0)',
-                            opacity  : 1
-                        }),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                            style({
-                                transform: 'translateY(100%)',
-                                opacity  : 0
-                            }))
-                    ], {optional: true}),
-                    query('content > :enter', [
-                        style({transform: 'translateY(-100%)'}),
-                        animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                            style({
-                                transform: 'translateY(0%)',
-                                opacity  : 1
-                            }))
-                    ], {optional: true})
-                ]),
-                query('content > :leave', animateChild(), {optional: true}),
-                query('content > :enter', animateChild(), {optional: true})
-            ])
-        ])
-    ]),
-
-    trigger('routerTransitionFade', [
-
-        transition('* => *', group([
-
-            query('content > :enter, content > :leave ', [
-                style({
-                    position: 'absolute',
-                    top     : 0,
-                    bottom  : 0,
-                    left    : 0,
-                    right   : 0
-                })
-            ], {optional: true}),
-
-            query('content > :enter', [
-                style({
-                    opacity: 0
-                })
-            ], {optional: true}),
-            query('content > :leave', [
-                style({
-                    opacity: 1
-                }),
-                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                    style({
-                        opacity: 0
-                    }))
-            ], {optional: true}),
-            query('content > :enter', [
-                style({
-                    opacity: 0
-                }),
-                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
-                    style({
-                        opacity: 1
-                    }))
-            ], {optional: true}),
-            query('content > :enter', animateChild(), {optional: true}),
-            query('content > :leave', animateChild(), {optional: true})
-        ]))
-    ])
-];
+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-triangle'"></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-mark'"></mat-icon>
+    </button>
+
+</div>
@@ -0,0 +1,219 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseAlertService } from '@fuse/components/alert/alert.service';
+import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { filter, Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector       : 'fuse-alert',
+    templateUrl    : './alert.component.html',
+    styleUrls      : ['./alert.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    animations     : fuseAnimations,
+    exportAs       : 'fuseAlert',
+    standalone     : true,
+    imports        : [NgIf, MatIconModule, MatButtonModule],
+})
+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
+    {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        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',
+        };
+        /* eslint-enable @typescript-eslint/naming-convention */
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ 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(null);
+        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,75 @@
+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,3 @@
+export * from '@fuse/components/alert/alert.component';
+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,79 @@
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf } from '@angular/common';
+import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+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',
+    standalone   : true,
+    imports      : [NgIf],
+})
+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
+    {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        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,
+        };
+        /* eslint-enable @typescript-eslint/naming-convention */
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ 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,3 @@
+export type FuseCardFace =
+    | 'front'
+    | 'back';
@@ -0,0 +1 @@
+export * from '@fuse/components/card/public-api';
@@ -0,0 +1 @@
+export * from '@fuse/components/card/card.component';
@@ -1,6 +0,0 @@
-<h1 matDialogTitle>Confirm</h1>
-<div mat-dialog-content>{{confirmMessage}}</div>
-<div mat-dialog-actions class="pt-24">
-    <button mat-raised-button class="mat-accent mr-16" (click)="dialogRef.close(true)">Confirm</button>
-    <button mat-button (click)="dialogRef.close(false)">Cancel</button>
-</div>
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
-
-@Component({
-    selector   : 'fuse-confirm-dialog',
-    templateUrl: './confirm-dialog.component.html',
-    styleUrls  : ['./confirm-dialog.component.scss']
-})
-export class FuseConfirmDialogComponent
-{
-    public confirmMessage: string;
-
-    /**
-     * Constructor
-     *
-     * @param {MatDialogRef<FuseConfirmDialogComponent>} dialogRef
-     */
-    constructor(
-        public dialogRef: MatDialogRef<FuseConfirmDialogComponent>
-    )
-    {
-    }
-
-}
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule, MatDialogModule } from '@angular/material';
-
-import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
-
-@NgModule({
-    declarations: [
-        FuseConfirmDialogComponent
-    ],
-    imports: [
-        MatDialogModule,
-        MatButtonModule
-    ],
-    entryComponents: [
-        FuseConfirmDialogComponent
-    ],
-})
-export class FuseConfirmDialogModule
-{
-}
@@ -1,39 +0,0 @@
-<div class="fuse-countdown">
-
-    <div class="time days">
-        <div class="value">
-            {{countdown.days}}
-        </div>
-        <div class="title">
-            days
-        </div>
-    </div>
-
-    <div class="time hours">
-        <div class="value">
-            {{countdown.hours}}
-        </div>
-        <div class="title">
-            hours
-        </div>
-    </div>
-
-    <div class="time minutes">
-        <div class="value">
-            {{countdown.minutes}}
-        </div>
-        <div class="title">
-            minutes
-        </div>
-    </div>
-
-    <div class="time seconds">
-        <div class="value">
-            {{countdown.seconds}}
-        </div>
-        <div class="title">
-            seconds
-        </div>
-    </div>
-
-</div>
@@ -1,30 +0,0 @@
-fuse-countdown {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    .fuse-countdown {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-
-        .time {
-            display: flex;
-            flex-direction: column;
-            padding: 0 12px;
-
-            .value {
-                font-size: 34px;
-                line-height: 34px;
-                padding-bottom: 8px;
-            }
-
-            .title {
-                color: rgba(0, 0, 0, 0.54);
-            }
-        }
-    }
-}
@@ -1,110 +0,0 @@
-import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { interval, Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
-import * as moment from 'moment';
-
-@Component({
-    selector   : 'fuse-countdown',
-    templateUrl: './countdown.component.html',
-    styleUrls    : ['./countdown.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class FuseCountdownComponent implements OnInit, OnDestroy
-{
-    // Event date
-    @Input('eventDate')
-    eventDate;
-
-    countdown: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-        // Set the defaults
-        this.countdown = {
-            days   : '',
-            hours  : '',
-            minutes: '',
-            seconds: ''
-        };
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        const currDate = moment();
-        const eventDate = moment(this.eventDate);
-
-        // Get the difference in between the current date and event date in seconds
-        let diff = eventDate.diff(currDate, 'seconds');
-
-        // Calculate the remaining time for the first time so there will be no
-        // delay on the countdown
-        this.countdown = this._secondsToRemaining(diff);
-
-        // Create a subscribable interval
-        const countDown = interval(1000)
-            .pipe(
-                map(value => {
-                    return diff = diff - 1;
-                }),
-                map(value => {
-                    return this._secondsToRemaining(value);
-                })
-            );
-
-        // Subscribe to the countdown interval
-        countDown
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(value => {
-                this.countdown = value;
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Converts given seconds to a remaining time
-     *
-     * @param seconds
-     * @private
-     */
-    private _secondsToRemaining(seconds): any
-    {
-        const timeLeft = moment.duration(seconds, 'seconds');
-
-        return {
-            days   : timeLeft.asDays().toFixed(0),
-            hours  : timeLeft.hours(),
-            minutes: timeLeft.minutes(),
-            seconds: timeLeft.seconds()
-        };
-    }
-
-}
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
-
-@NgModule({
-    declarations: [
-        FuseCountdownComponent
-    ],
-    exports: [
-        FuseCountdownComponent
-    ],
-})
-export class FuseCountdownModule
-{
-}
@@ -1,17 +0,0 @@
-@mixin fuse-countdown-theme($theme) {
-
-    $foreground: map-get($theme, foreground);
-
-    fuse-countdown {
-
-        .fuse-countdown {
-
-            .time {
-
-                .title {
-                    color: map-get($foreground, secondary-text);
-                }
-            }
-        }
-    }
-}
@@ -1,83 +0,0 @@
-<!-- DEMO CONTENT -->
-<div class="demo-content line-height-1.75">
-
-    <h1 class="m-0">Early Sunrise in Winter</h1>
-    <h4 class="mt-0 secondary-text">Demo Content</h4>
-
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
-        auctor venenatis nisl. Suspendisse potenti. Nullam sagittis nulla in diam finibus, sed pharetra velit
-        vestibulum. Suspendisse euismod in urna eu posuere.
-    </p>
-
-    <blockquote class="my-24">
-        <p>
-            Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
-            et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
-            sollicitudin. Donec viverra augue dolor, a venenatis tellus consectetur sit amet.
-        </p>
-        <footer>
-            John Doe
-        </footer>
-    </blockquote>
-
-    <p>
-        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
-        <b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
-        Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
-        gravida. In hac habitasse platea dictumst. In et placerat eros, eu tempor turpis. Curabitur ac felis finibus,
-        elementum lectus vitae, venenatis est. Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel
-        erat condimentum tristique vel vel mi. Nulla id euismod mi, et mollis tellus.
-    </p>
-
-    <p>
-        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti
-        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae sagittis odio.
-        Suspendisse ullamcorper nunc non pellentesque laoreet. Curabitur eu tortor id quam pretium mattis. Proin ut quam
-        velit.
-    </p>
-
-    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
-
-    <p class="mt-8 mb-24 secondary-text">
-        <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>
-    </p>
-
-    <p>
-        Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
-        in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
-        feugiat, sagittis nec ipsum. Quisque dapibus mollis felis non tristique.
-    </p>
-
-    <p>
-        Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
-        ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
-        sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
-        Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
-    </p>
-
-    <ul>
-        <li>Orci varius</li>
-        <li>Magnis dis</li>
-        <li>Conubia nostra</li>
-        <li>Semper urna</li>
-        <li>Donec viverra</li>
-    </ul>
-
-    <p>
-        Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
-        eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
-        iaculis metus. Praesent pulvinar quam eu leo consectetur faucibus. Vestibulum purus diam, gravida sagittis
-        feugiat sit amet, tincidunt in ligula. Sed semper vestibulum magna. Lorem ipsum dolor sit amet, consectetur
-        adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec, auctor venenatis nisl. Suspendisse potenti.
-    </p>
-
-    <p>
-        Nullam sagittis nulla in diam finibus, sed pharetra velit vestibulum. Suspendisse euismod in urna eu posuere.
-        Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
-        lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
-        id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
-        viverra augue dolor, a venenatis tellus consectetur sit amet.
-    </p>
-</div>
-<!-- / DEMO CONTENT -->
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-demo-content',
-    templateUrl: './demo-content.component.html',
-    styleUrls  : ['./demo-content.component.scss']
-})
-export class FuseDemoContentComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-}
@@ -1,100 +0,0 @@
-<div class="demo-sidebar">
-    <mat-list>
-        <h3 matSubheader>Sidebar Demo</h3>
-
-        <mat-list-item>
-            <span>Sidebar Item 1</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 2</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 3</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 4</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 5</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 6</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 7</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 8</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 9</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 10</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 11</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 12</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 13</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 14</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 15</span>
-        </mat-list-item>
-
-        <mat-divider></mat-divider>
-
-        <mat-list-item>
-            <span>Sidebar Item 16</span>
-        </mat-list-item>
-
-    </mat-list>
-</div>
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-demo-sidebar',
-    templateUrl: './demo-sidebar.component.html',
-    styleUrls  : ['./demo-sidebar.component.scss']
-})
-export class FuseDemoSidebarComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-}
@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { MatDividerModule, MatListModule } from '@angular/material';
-
-import { FuseDemoContentComponent } from './demo-content/demo-content.component';
-import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
-
-@NgModule({
-    declarations: [
-        FuseDemoContentComponent,
-        FuseDemoSidebarComponent
-    ],
-    imports     : [
-        RouterModule,
-
-        MatDividerModule,
-        MatListModule
-    ],
-    exports     : [
-        FuseDemoContentComponent,
-        FuseDemoSidebarComponent
-    ]
-})
-export class FuseDemoModule
-{
-}
@@ -0,0 +1,3 @@
+<div class="fuse-drawer-content">
+    <ng-content></ng-content>
+</div>
@@ -0,0 +1,133 @@
+/* Variables */
+:root {
+    --fuse-drawer-width: 320px;
+}
+
+fuse-drawer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: var(--fuse-drawer-width);
+    min-width: var(--fuse-drawer-width);
+    max-width: var(--fuse-drawer-width);
+    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: calc(var(--fuse-drawer-width) * -1);
+
+            &.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: calc(var(--fuse-drawer-width) * -1);
+
+            &.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: 1;
+    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,429 @@
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
+import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+
+@Component({
+    selector     : 'fuse-drawer',
+    templateUrl  : './drawer.component.html',
+    styleUrls    : ['./drawer.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'fuseDrawer',
+    standalone   : true,
+})
+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 readonly _handleOverlayClick: any;
+    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,
+    )
+    {
+        this._handleOverlayClick = (): void =>
+        {
+            this.close();
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component classes
+     */
+    @HostBinding('class') get classList(): any
+    {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        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,
+        };
+        /* eslint-enable @typescript-eslint/naming-convention */
+    }
+
+    /**
+     * 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
+    {
+        // Finish the animation
+        if ( this._player )
+        {
+            this._player.finish();
+        }
+
+        // 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');
+
+        // 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 enter animation and attach it to the player
+        this._player = this._animationBuilder.build([
+            style({opacity: 0}),
+            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._handleOverlayClick);
+    }
+
+    /**
+     * 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 overlay still exists...
+            if ( this._overlay )
+            {
+                // Remove the event listener
+                this._overlay.removeEventListener('click', this._handleOverlayClick);
+
+                // Remove the overlay
+                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,50 @@
+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,3 @@
+export * from '@fuse/components/drawer/drawer.component';
+export * from '@fuse/components/drawer/drawer.service';
+export * from '@fuse/components/drawer/drawer.types';
@@ -0,0 +1,12 @@
+<!-- Button -->
+<button
+    mat-icon-button
+    [matTooltip]="tooltip || 'Toggle Fullscreen'"
+    (click)="toggleFullscreen()">
+    <ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
+</button>
+
+<!-- Default icon -->
+<ng-template #defaultIconTpl>
+    <mat-icon [svgIcon]="'heroicons_outline:arrows-pointing-out'"></mat-icon>
+</ng-template>
@@ -0,0 +1,171 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+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',
+    standalone     : true,
+    imports        : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
+})
+export class FuseFullscreenComponent implements OnInit
+{
+    @Input() iconTpl: TemplateRef<any>;
+    @Input() tooltip: string;
+    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,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,2 @@
+export * from '@fuse/components/fullscreen/fullscreen.component';
+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 -->
@@ -1,9 +1,3 @@
-:host {
-    display: block;
-    width: 100%;
-    padding: 8px;
-    background: #263238;
-    cursor: text;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
+textarea[fuse-highlight] {
+    display: none;
+}
@@ -1,45 +1,39 @@
-import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as Prism from 'prismjs/prism';
-import '@fuse/components/highlight/prism-languages';
+import { NgClass } from '@angular/common';
+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 : 'fuse-highlight',
-    template : '',
-    styleUrls: ['./highlight.component.scss']
+    selector       : 'textarea[fuse-highlight]',
+    templateUrl    : './highlight.component.html',
+    styleUrls      : ['./highlight.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    exportAs       : 'fuseHighlight',
+    standalone     : true,
+    imports        : [NgClass],
 })
-export class FuseHighlightComponent implements OnInit, OnDestroy
+export class FuseHighlightComponent implements OnChanges, AfterViewInit
 {
-    // Source
-    @ContentChild('source')
-    source: ElementRef;
+    @Input() code: string;
+    @Input() lang: string;
+    @ViewChild(TemplateRef) templateRef: TemplateRef<any>;

-    // Lang
-    @Input('lang')
-    lang: string;
-
-    // Path
-    @Input('path')
-    path: string;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
+    highlightedCode: string;
+    private _viewRef: EmbeddedViewRef<any>;

    /**
     * Constructor
-     *
-     * @param {ElementRef} _elementRef
-     * @param {HttpClient} _httpClient
     */
    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _domSanitizer: DomSanitizer,
        private _elementRef: ElementRef,
-        private _httpClient: HttpClient
+        private _renderer2: Renderer2,
+        private _fuseHighlightService: FuseHighlightService,
+        private _viewContainerRef: ViewContainerRef,
    )
    {
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
    }

    // -----------------------------------------------------------------------------------------------------
@@ -47,103 +41,95 @@ export class FuseHighlightComponent implements OnInit, OnDestroy
    // -----------------------------------------------------------------------------------------------------

    /**
-     * On init
+     * On changes
+     *
+     * @param changes
     */
-    ngOnInit(): void
+    ngOnChanges(changes: SimpleChanges): void
    {
-        // If there is no language defined, return...
+        // 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 the path is defined...
-        if ( this.path )
+        // If there is no code input, get the code from
+        // the textarea
+        if ( !this.code )
        {
-            // Get the source
-            this._httpClient.get(this.path, {responseType: 'text'})
-                .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((response) => {
-
-                    // Highlight it
-                    this.highlight(response);
-                });
+            // Get the code
+            this.code = this._elementRef.nativeElement.value;
        }

-        // If the path is not defined and the source element exists...
-        if ( !this.path && this.source )
-        {
-            // Highlight it
-            this.highlight(this.source.nativeElement.value);
-        }
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
+        // Highlight and insert
+        this._highlightAndInsert();
    }

    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
+    // @ Private methods
    // -----------------------------------------------------------------------------------------------------

    /**
-     * Highlight the given source code
+     * Highlight and insert the highlighted code
     *
-     * @param sourceCode
+     * @private
     */
-    highlight(sourceCode): void
+    private _highlightAndInsert(): void
    {
-        // Split the source into lines
-        const sourceLines = sourceCode.split('\n');
-
-        // Remove the first and the last line of the source
-        // code if they are blank lines. This way, the html
-        // can be formatted properly while using fuse-highlight
-        // component
-        if ( !sourceLines[0].trim() )
+        // Return if the template reference is not available
+        if ( !this.templateRef )
        {
-            sourceLines.shift();
+            return;
        }

-        if ( !sourceLines[sourceLines.length - 1].trim() )
+        // Return if the code or language is not defined
+        if ( !this.code || !this.lang )
        {
-            sourceLines.pop();
+            return;
        }

-        // Find the first non-whitespace char index in
-        // the first line of the source code
-        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
+        // Destroy the component if there is already one
+        if ( this._viewRef )
+        {
+            this._viewRef.destroy();
+            this._viewRef = null;
+        }

-        // Generate the trimmed source
-        let source = '';
+        // Highlight and sanitize the code just in case
+        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._fuseHighlightService.highlight(this.code, this.lang));

-        // Iterate through all the lines
-        sourceLines.forEach((line, index) => {
+        // Return if the highlighted code is null
+        if ( this.highlightedCode === null )
+        {
+            return;
+        }

-            // Trim the beginning white space depending on the index
-            // and concat the source code
-            source = source + line.substr(indexOfFirstChar, line.length);
-
-            // If it's not the last line...
-            if ( index !== sourceLines.length - 1 )
-            {
-                // Add a line break at the end
-                source = source + '\n';
-            }
+        // Render and insert the template
+        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
+            highlightedCode: this.highlightedCode,
+            lang           : this.lang,
        });

-        // Generate the highlighted code
-        const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
-
-        // Replace the innerHTML of the component with the highlighted code
-        this._elementRef.nativeElement.innerHTML =
-            '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
+        // Detect the changes
+        this._viewRef.detectChanges();
    }
 }
-
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
-
-@NgModule({
-    declarations: [
-        FuseHighlightComponent
-    ],
-    exports: [
-        FuseHighlightComponent
-    ],
-})
-export class FuseHighlightModule
-{
-}
@@ -0,0 +1,80 @@
+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';
@@ -1,18 +0,0 @@
-import 'prismjs/prism';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-cpp';
-import 'prismjs/components/prism-csharp';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-diff';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markup-templating';
-import 'prismjs/components/prism-java';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-perl';
-import 'prismjs/components/prism-php';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-sass';
-import 'prismjs/components/prism-scss';
-import 'prismjs/components/prism-typescript';
@@ -0,0 +1,2 @@
+export * from '@fuse/components/highlight/highlight.component';
+export * from '@fuse/components/highlight/highlight.service';
@@ -1,12 +0,0 @@
-export * from './confirm-dialog/confirm-dialog.module';
-export * from './countdown/countdown.module';
-export * from './demo/demo.module';
-export * from './highlight/highlight.module';
-export * from './material-color-picker/material-color-picker.module';
-export * from './navigation/navigation.module';
-export * from './progress-bar/progress-bar.module';
-export * from './search-bar/search-bar.module';
-export * from './shortcuts/shortcuts.module';
-export * from './sidebar/sidebar.module';
-export * from './theme-options/theme-options.module';
-export * from './widget/widget.module';
@@ -0,0 +1 @@
+export * from '@fuse/components/loading-bar/public-api';
@@ -0,0 +1,5 @@
+<ng-container *ngIf="show">
+    <mat-progress-bar
+        [mode]="mode"
+        [value]="progress"></mat-progress-bar>
+</ng-container>
@@ -0,0 +1,7 @@
+fuse-loading-bar {
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 6px;
+}
@@ -0,0 +1,89 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf } from '@angular/common';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { FuseLoadingService } from '@fuse/services/loading';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector     : 'fuse-loading-bar',
+    templateUrl  : './loading-bar.component.html',
+    styleUrls    : ['./loading-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    exportAs     : 'fuseLoadingBar',
+    standalone   : true,
+    imports      : [NgIf, MatProgressBarModule],
+})
+export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
+{
+    @Input() autoMode: boolean = true;
+    mode: 'determinate' | 'indeterminate';
+    progress: number = 0;
+    show: boolean = false;
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseLoadingService: FuseLoadingService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Auto mode
+        if ( 'autoMode' in changes )
+        {
+            // Set the auto mode in the service
+            this._fuseLoadingService.setAutoMode(coerceBooleanProperty(changes.autoMode.currentValue));
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the service
+        this._fuseLoadingService.mode$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) =>
+            {
+                this.mode = value;
+            });
+
+        this._fuseLoadingService.progress$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) =>
+            {
+                this.progress = value;
+            });
+
+        this._fuseLoadingService.show$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) =>
+            {
+                this.show = value;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next(null);
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1 @@
+export * from '@fuse/components/loading-bar/loading-bar.component';
@@ -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,89 @@
+import { NgTemplateOutlet } from '@angular/common';
+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',
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations,
+    exportAs     : 'fuseMasonry',
+    standalone   : true,
+    imports      : [NgTemplateOutlet],
+})
+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 @@
+export * from '@fuse/components/masonry/masonry.component';
@@ -1,65 +0,0 @@
-<button mat-icon-button
-        class="mat-elevation-z1"
-        [matMenuTriggerFor]="colorMenu"
-        (menuOpened)="onMenuOpen()"
-        [ngClass]="selectedPalette + '-' + selectedHue">
-    <mat-icon>palette</mat-icon>
-</button>
-
-<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu mat-elevation-z8">
-
-    <header [ngClass]="selectedColor?.class || 'accent'" class="mat-elevation-z4"
-            fxLayout="row" fxLayoutAlign="space-between center">
-
-        <button mat-icon-button
-                class="secondary-text"
-                [style.visibility]="view === 'hues' ? 'visible' : 'hidden'"
-                (click)="goToPalettesView($event)" aria-label="Palette">
-            <mat-icon class="s-20">arrow_back</mat-icon>
-        </button>
-
-        <span *ngIf="selectedColor?.palette">
-            {{selectedColor.palette}} {{selectedColor.hue}}
-        </span>
-
-        <span *ngIf="!selectedColor?.palette">
-            Select a Color
-        </span>
-
-        <button mat-icon-button
-                class="remove-color-button secondary-text"
-                (click)="removeColor($event)"
-                aria-label="Remove color"
-                matTooltip="Remove color">
-            <mat-icon class="s-20">delete</mat-icon>
-        </button>
-    </header>
-
-    <div [ngSwitch]="view" class="views">
-
-        <div class="view" *ngSwitchCase="'palettes'">
-
-            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color" fxLayout="row" fxLayoutAlign="center center"
-                     *ngFor="let color of (colors | keys)"
-                     [ngClass]="color.key"
-                     [class.selected]="selectedPalette === color.key"
-                     (click)="selectPalette($event, color.key)">
-                </div>
-            </div>
-        </div>
-
-        <div class="view" *ngSwitchCase="'hues'">
-            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color" fxLayout="row" fxLayoutAlign="center center"
-                     *ngFor="let hue of hues"
-                     [fxHide]="selectedPalette === 'fuse-white' && hue !== '500' || selectedPalette === 'fuse-black' && hue !== '500'"
-                     [ngClass]="selectedPalette + '-' + hue"
-                     [class.selected]="selectedHue === hue"
-                     (click)="selectHue($event, hue)">
-                </div>
-            </div>
-        </div>
-
-    </div>
-</mat-menu>
@@ -1,39 +0,0 @@
-.fuse-material-color-picker-menu {
-    width: 245px;
-
-    .mat-menu-content {
-        padding: 0;
-
-        .views {
-            display: flex;
-            flex-direction: column;
-            min-height: 165px;
-
-            .view {
-                overflow: hidden;
-
-                .colors {
-                    padding: 1px 0 0 0;
-                    margin-left: -1px;
-
-                    .color {
-                        width: 40px;
-                        height: 40px;
-                        margin: 0 0 1px 1px;
-                        border-radius: 0;
-                        cursor: pointer;
-                        transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
-
-                        &:hover {
-                            border-radius: 20%;
-                        }
-
-                        &.selected {
-                            border-radius: 50% !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
@@ -1,261 +0,0 @@
-import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
-
-import { fuseAnimations } from '@fuse/animations';
-import { MatColors } from '@fuse/mat-colors';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR: any = {
-    provide    : NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => FuseMaterialColorPickerComponent),
-    multi      : true
-};
-
-@Component({
-    selector     : 'fuse-material-color-picker',
-    templateUrl  : './material-color-picker.component.html',
-    styleUrls    : ['./material-color-picker.component.scss'],
-    animations   : fuseAnimations,
-    encapsulation: ViewEncapsulation.None,
-    providers    : [FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR]
-})
-export class FuseMaterialColorPickerComponent implements ControlValueAccessor
-{
-    colors: any;
-    hues: string[];
-    view: string;
-    selectedColor: any;
-    selectedPalette: string;
-    selectedHue: string;
-
-    // Color changed
-    @Output()
-    colorChanged: EventEmitter<any>;
-
-    // Private
-    private _color: string;
-    private _modelChange: (value: any) => void;
-    private _modelTouched: (value: any) => void;
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-        // Set the defaults
-        this.colorChanged = new EventEmitter();
-        this.colors = MatColors.all;
-        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
-        this.selectedHue = '500';
-        this.view = 'palettes';
-
-        // Set the private defaults
-        this._color = '';
-        this._modelChange = () => {
-        };
-        this._modelTouched = () => {
-        };
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Selected class
-     *
-     * @param value
-     */
-    @Input()
-    set color(value)
-    {
-        if ( !value || value === '' || this._color === value )
-        {
-            return;
-        }
-
-        // Split the color value (red-400, blue-500, fuse-navy-700 etc.)
-        const colorParts = value.split('-');
-
-        // Take the very last part as the selected hue value
-        this.selectedHue = colorParts[colorParts.length - 1];
-
-        // Remove the last part
-        colorParts.pop();
-
-        // Rejoin the remaining parts as the selected palette name
-        this.selectedPalette = colorParts.join('-');
-
-        // Store the color value
-        this._color = value;
-    }
-
-    get color(): string
-    {
-        return this._color;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Control Value Accessor implementation
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Register on change function
-     *
-     * @param fn
-     */
-    registerOnChange(fn: any): void
-    {
-        this._modelChange = fn;
-    }
-
-    /**
-     * Register on touched function
-     *
-     * @param fn
-     */
-    registerOnTouched(fn: any): void
-    {
-        this._modelTouched = fn;
-    }
-
-    /**
-     * Write value to the view from model
-     *
-     * @param color
-     */
-    writeValue(color: any): void
-    {
-        // Return if null
-        if ( !color )
-        {
-            return;
-        }
-
-        // Set the color
-        this.color = color;
-
-        // Update the selected color
-        this.updateSelectedColor();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Select palette
-     *
-     * @param event
-     * @param palette
-     */
-    selectPalette(event, palette): void
-    {
-        // Stop propagation
-        event.stopPropagation();
-
-        // Go to 'hues' view
-        this.view = 'hues';
-
-        // Update the selected palette
-        this.selectedPalette = palette;
-
-        // Update the selected color
-        this.updateSelectedColor();
-    }
-
-    /**
-     * Select hue
-     *
-     * @param event
-     * @param hue
-     */
-    selectHue(event, hue): void
-    {
-        // Stop propagation
-        event.stopPropagation();
-
-        // Update the selected huse
-        this.selectedHue = hue;
-
-        // Update the selected color
-        this.updateSelectedColor();
-    }
-
-    /**
-     * Remove color
-     *
-     * @param event
-     */
-    removeColor(event): void
-    {
-        // Stop propagation
-        event.stopPropagation();
-
-        // Return to the 'palettes' view
-        this.view = 'palettes';
-
-        // Clear the selected palette and hue
-        this.selectedPalette = '';
-        this.selectedHue = '';
-
-        // Update the selected color
-        this.updateSelectedColor();
-    }
-
-    /**
-     * Update selected color
-     */
-    updateSelectedColor(): void
-    {
-        if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
-        {
-            return;
-        }
-
-        // Set the selected color object
-        this.selectedColor = {
-            palette: this.selectedPalette,
-            hue    : this.selectedHue,
-            class  : this.selectedPalette + '-' + this.selectedHue,
-            bg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
-            fg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
-        };
-
-        // Emit the color changed event
-        this.colorChanged.emit(this.selectedColor);
-
-        // Mark the model as touched
-        this._modelTouched(this.selectedColor.class);
-
-        // Update the model
-        this._modelChange(this.selectedColor.class);
-    }
-
-    /**
-     * Go to palettes view
-     *
-     * @param event
-     */
-    goToPalettesView(event): void
-    {
-        // Stop propagation
-        event.stopPropagation();
-
-        this.view = 'palettes';
-    }
-
-    /**
-     * On menu open
-     */
-    onMenuOpen(): void
-    {
-        if ( this.selectedPalette === '' )
-        {
-            this.view = 'palettes';
-        }
-        else
-        {
-            this.view = 'hues';
-        }
-    }
-}
@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule } from '@angular/material';
-
-import { FusePipesModule } from '@fuse/pipes/pipes.module';
-
-import { FuseMaterialColorPickerComponent } from '@fuse/components/material-color-picker/material-color-picker.component';
-
-@NgModule({
-    declarations: [
-        FuseMaterialColorPickerComponent
-    ],
-    imports: [
-        CommonModule,
-
-        FlexLayoutModule,
-
-        MatButtonModule,
-        MatIconModule,
-        MatMenuModule,
-        MatTooltipModule,
-
-        FusePipesModule
-    ],
-    exports: [
-        FuseMaterialColorPickerComponent
-    ],
-})
-export class FuseMaterialColorPickerModule
-{
-}
@@ -1,14 +0,0 @@
-@mixin fuse-material-color-picker-theme($theme) {
-
-    $background: map-get($theme, background);
-
-    .fuse-material-color-picker-menu {
-
-        .mat-menu-content {
-
-            .views {
-                background: #303030;
-            }
-        }
-    }
-}
@@ -1,69 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <!-- normal collapse -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-    </a>
-
-    <!-- item.url -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'">
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-    </a>
-
-    <!-- item.externalUrl -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-    </a>
-
-    <!-- item.function -->
-    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
-          (click)="item.function()">
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-    </span>
-
-    <!-- item.url && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
-       (click)="item.function()"
-       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-    </a>
-
-    <!-- item.externalUrl && item.function -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
-       (click)="item.function()"
-       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
-    </a>
-
-    <ng-template #itemContent>
-        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
-        </span>
-        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
-    </ng-template>
-
-    <div class="children" [ngClass]="{'open': isOpen}">
-
-        <div class="{{fuseConfig.layout.navbar.primaryBackground}}">
-
-            <ng-container *ngFor="let item of item.children">
-                <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
-                <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
-                                                 [item]="item"></fuse-nav-horizontal-collapsable>
-                <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'"
-                                                 [item]="item"></fuse-nav-horizontal-collapsable>
-            </ng-container>
-
-        </div>
-
-    </div>
-
-</ng-container>
@@ -1,3 +0,0 @@
-:host {
-
-}
@@ -1,86 +0,0 @@
-import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfigService } from '@fuse/services/config.service';
-
-@Component({
-    selector   : 'fuse-nav-horizontal-collapsable',
-    templateUrl: './collapsable.component.html',
-    styleUrls  : ['./collapsable.component.scss'],
-    animations : fuseAnimations
-})
-export class FuseNavHorizontalCollapsableComponent implements OnInit, OnDestroy
-{
-    fuseConfig: any;
-    isOpen = false;
-
-    @HostBinding('class')
-    classes = 'nav-collapsable nav-item';
-
-    @Input()
-    item: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    constructor(
-        private _fuseConfigService: FuseConfigService
-    )
-    {
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Subscribe to config changes
-        this._fuseConfigService.config
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(
-                (config) => {
-                    this.fuseConfig = config;
-                }
-            );
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Open
-     */
-    @HostListener('mouseenter')
-    open(): void
-    {
-        this.isOpen = true;
-    }
-
-    /**
-     * Close
-     */
-    @HostListener('mouseleave')
-    close(): void
-    {
-        this.isOpen = false;
-    }
-}
@@ -0,0 +1,134 @@
+<!-- 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 -->
+    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
+        <div
+            class="fuse-horizontal-navigation-item"
+            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [routerLink]="[item.link]"
+            [fragment]="item.fragment ?? null"
+            [preserveFragment]="item.preserveFragment ?? false"
+            [queryParams]="item.queryParams ?? null"
+            [queryParamsHandling]="item.queryParamsHandling ?? null"
+            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
+            [routerLinkActiveOptions]="isActiveMatchOptions"
+            [matTooltip]="item.tooltip || ''">
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+    </ng-container>
+
+    <!-- Item with an external link -->
+    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
+        <a
+            class="fuse-horizontal-navigation-item"
+            [href]="item.link"
+            [target]="item.target || '_self'"
+            [matTooltip]="item.tooltip || ''">
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+    </ng-container>
+
+    <!-- Item with a function -->
+    <ng-container *ngIf="!item.link && item.function && !item.disabled">
+        <div
+            class="fuse-horizontal-navigation-item"
+            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [matTooltip]="item.tooltip || ''"
+            (click)="item.function(item)">
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+    </ng-container>
+
+    <!-- Item with an internal link and function -->
+    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
+        <div
+            class="fuse-horizontal-navigation-item"
+            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [routerLink]="[item.link]"
+            [fragment]="item.fragment ?? null"
+            [preserveFragment]="item.preserveFragment ?? false"
+            [queryParams]="item.queryParams ?? null"
+            [queryParamsHandling]="item.queryParamsHandling ?? null"
+            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
+            [routerLinkActiveOptions]="isActiveMatchOptions"
+            [matTooltip]="item.tooltip || ''"
+            (click)="item.function(item)">
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+    </ng-container>
+
+    <!-- Item with an external link and function -->
+    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
+        <a
+            class="fuse-horizontal-navigation-item"
+            [href]="item.link"
+            [target]="item.target || '_self'"
+            [matTooltip]="item.tooltip || ''"
+            (click)="item.function(item)"
+            mat-menu-item>
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+    </ng-container>
+
+    <!-- Item with a no link and no function -->
+    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
+        <div
+            class="fuse-horizontal-navigation-item"
+            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+            [matTooltip]="item.tooltip || ''">
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+    </ng-container>
+
+    <!-- Item is disabled -->
+    <ng-container *ngIf="item.disabled">
+        <div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
+            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+    </ng-container>
+
+</div>
+
+<!-- Item template -->
+<ng-template #itemTemplate>
+
+    <!-- Icon -->
+    <ng-container *ngIf="item.icon">
+        <mat-icon
+            class="fuse-horizontal-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            [svgIcon]="item.icon"></mat-icon>
+    </ng-container>
+
+    <!-- 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>
+        <ng-container *ngIf="item.subtitle">
+            <div class="fuse-horizontal-navigation-item-subtitle text-hint">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
+        </ng-container>
+    </div>
+
+    <!-- Badge -->
+    <ng-container *ngIf="item.badge">
+        <div class="fuse-horizontal-navigation-item-badge">
+            <div
+                class="fuse-horizontal-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
+            </div>
+        </div>
+    </ng-container>
+
+</ng-template>
@@ -0,0 +1,87 @@
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
+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';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-basic-item',
+    templateUrl    : './basic.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
+})
+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(null);
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,121 @@
+<ng-container *ngIf="!child">
+    <div
+        [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>
+</ng-container>
+
+<mat-menu
+    class="fuse-horizontal-navigation-menu-panel"
+    [overlapTrigger]="false"
+    #matMenu="matMenu">
+
+    <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 -->
+            <ng-container *ngIf="item.type === 'basic'">
+                <div
+                    class="fuse-horizontal-navigation-menu-item"
+                    [disabled]="item.disabled"
+                    mat-menu-item>
+                    <fuse-horizontal-navigation-basic-item
+                        [item]="item"
+                        [name]="name"></fuse-horizontal-navigation-basic-item>
+                </div>
+            </ng-container>
+
+            <!-- Branch: aside, collapsable, group -->
+            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
+                <div
+                    class="fuse-horizontal-navigation-menu-item"
+                    [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>
+            </ng-container>
+
+            <!-- Divider -->
+            <ng-container *ngIf="item.type === 'divider'">
+                <div
+                    class="fuse-horizontal-navigation-menu-item"
+                    mat-menu-item>
+                    <fuse-horizontal-navigation-divider-item
+                        [item]="item"
+                        [name]="name"></fuse-horizontal-navigation-divider-item>
+                </div>
+            </ng-container>
+
+        </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}"
+            [matTooltip]="item.tooltip || ''">
+
+            <!-- Icon -->
+            <ng-container *ngIf="item.icon">
+                <mat-icon
+                    class="fuse-horizontal-navigation-item-icon"
+                    [ngClass]="item.classes?.icon"
+                    [svgIcon]="item.icon"></mat-icon>
+            </ng-container>
+
+            <!-- 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>
+                <ng-container *ngIf="item.subtitle">
+                    <div class="fuse-horizontal-navigation-item-subtitle text-hint">
+                        <span [ngClass]="item.classes?.subtitle">
+                            {{item.subtitle}}
+                        </span>
+                    </div>
+                </ng-container>
+            </div>
+
+            <!-- Badge -->
+            <ng-container *ngIf="item.badge">
+                <div class="fuse-horizontal-navigation-item-badge">
+                    <div
+                        class="fuse-horizontal-navigation-item-badge-content"
+                        [ngClass]="item.badge.classes">
+                        {{item.badge.title}}
+                    </div>
+                </div>
+            </ng-container>
+        </div>
+    </div>
+
+</ng-template>
@@ -0,0 +1,100 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
+import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
+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 { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-branch-item',
+    templateUrl    : './branch.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
+})
+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(null);
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Trigger the change detection
+     */
+    triggerChangeDetection(): void
+    {
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+}
@@ -0,0 +1,4 @@
+<!-- Divider -->
+<div
+    class="fuse-horizontal-navigation-item-wrapper divider"
+    [ngClass]="item.classes?.wrapper"></div>
@@ -0,0 +1,64 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-divider-item',
+    templateUrl    : './divider.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
+})
+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(null);
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,4 @@
+<!-- Spacer -->
+<div
+    class="fuse-horizontal-navigation-item-wrapper"
+    [ngClass]="item.classes?.wrapper"></div>
@@ -0,0 +1,64 @@
+import { NgClass } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+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 { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector       : 'fuse-horizontal-navigation-spacer-item',
+    templateUrl    : './spacer.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
+})
+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(null);
+        this._unsubscribeAll.complete();
+    }
+}
@@ -0,0 +1,36 @@
+<div class="fuse-horizontal-navigation-wrapper">
+
+    <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
+
+        <!-- Skip the hidden items -->
+        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+
+            <!-- Basic -->
+            <ng-container *ngIf="item.type === 'basic'">
+                <fuse-horizontal-navigation-basic-item
+                    class="fuse-horizontal-navigation-menu-item"
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-basic-item>
+            </ng-container>
+
+            <!-- Branch: aside, collapsable, group -->
+            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
+                <fuse-horizontal-navigation-branch-item
+                    class="fuse-horizontal-navigation-menu-item"
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-branch-item>
+            </ng-container>
+
+            <!-- Spacer -->
+            <ng-container *ngIf="item.type === 'spacer'">
+                <fuse-horizontal-navigation-spacer-item
+                    class="fuse-horizontal-navigation-menu-item"
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-spacer-item>
+            </ng-container>
+
+        </ng-container>
+
+    </ng-container>
+
+</div>
--- a/Show More
+++ b/Show More
				`@@ -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/card/card.component';`
				`@@ -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/loading-bar/public-api';`
				`@@ -0,0 +1 @@`
				`export * from '@fuse/components/masonry/public-api';`