angular.json for skeleton

+ (Shortcuts) Icon colors in shortcuts menu

.editorconfig

@@ -1,16 +1,13 @@
-# Editor configuration, see https://editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.ts]
-quote_type = single
-
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

.eslintrc.json

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

.gitignore

@@ -4,15 +4,10 @@
 /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
@@ -28,10 +23,8 @@ chrome-profiler-events*.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-.history/*
 
 # misc
-/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.npmrc

@@ -0,0 +1 @@
+save-prefix=''

.nvmrc

@@ -1 +0,0 @@
-20

CREDITS

@@ -1,72 +0,0 @@
-// -----------------------------------------------------------------------------------------------------
-// @ 3rd party credits
-// -----------------------------------------------------------------------------------------------------
-
-// Flags
-https://github.com/Yummygum/flagpack-core
-
-// Icons
-Material - https://material.io/tools/icons
-Feather - https://feathericons.com/
-Heroicons - https://github.com/refactoringui/heroicons
-Iconsmind - https://iconsmind.com/
-
-// Avatars
-https://uifaces.co
-
-// 404, 500 & Maintenance
-https://undraw.co
-
-// Mail app
-Photo by Riccardo Chiarini on Unsplash - https://unsplash.com/photos/2VDa8bnLM8c
-Photo by Johannes Plenio on Unsplash - https://unsplash.com/photos/RwHv7LgeC7s
-Photo by Jamie Davies on Unsplash - https://unsplash.com/photos/Hao52Fu9-F8
-Photo by Christian Joudrey on Unsplash - https://unsplash.com/photos/mWRR1xj95hg
-
-// Profile page
-Photo by Alex Knight on Unsplash - https://unsplash.com/photos/DpPutJwgyW8
-
-// Cards
-Photo by Kym Ellis on Unsplash - https://unsplash.com/photos/RPT3AjdXlZc
-Photo by Patrick Hendry on Unsplash - https://unsplash.com/photos/Qgxk3PQsMiI
-Photo by Hailey Kean on Unsplash - https://unsplash.com/photos/QxjsOlFNr_4
-Photo by Nathan Anderson on Unsplash - https://unsplash.com/photos/mG8ShlWrMDI
-Photo by Adrian Infernus on Unsplash - https://unsplash.com/photos/5apewqWk978
-Photo by freestocks.org on Unsplash - https://unsplash.com/photos/c73TZ2sIU38
-Photo by Tim Marshall on Unsplash - https://unsplash.com/photos/PKSCrmZdvwA
-Photo by Daniel Koponyas on Unsplash - https://unsplash.com/photos/rbiLY6ZwvXQ
-Photo by John Westrock on Unsplash - https://unsplash.com/photos/LCesauDseu8
-Photo by Gabriel Sollmann on Unsplash - https://unsplash.com/photos/kFWj9y-tJB4
-Photo by Kevin Wolf on Unsplash - https://unsplash.com/photos/BJyjgEdNTPs
-Photo by Luca Bravo on Unsplash - https://unsplash.com/photos/hFzIoD0F_i8
-Photo by Ian Baldwin on Unsplash - https://unsplash.com/photos/Dlj-SxxTlQ0
-Photo by Ben Kolde on Unsplash - https://unsplash.com/photos/KRTFIBOfcFw
-Photo by Chad Peltola on Unsplash - https://unsplash.com/photos/BTvQ2ET_iKc
-Photo by rocknwool on Unsplash - https://unsplash.com/photos/r56oO1V5oms
-Photo by Vita Vilcina on Unsplash - https://unsplash.com/photos/KtOid0FLjqU
-Photo by Jia Ye on Unsplash - https://unsplash.com/photos/y8ZnQqgohLk
-Photo by Parker Whitson on Unsplash - https://unsplash.com/photos/OlTYIqTjmVM
-Photo by Dorian Hurst on Unsplash - https://unsplash.com/photos/a9uWPQlIbYc
-Photo by Everaldo Coelho on Unsplash - https://unsplash.com/photos/KPaSCpklCZw
-Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/fh2JefbNlII
-Photo by Orlova Maria on Unsplash - https://unsplash.com/photos/p8y4dWEMGMU
-Photo by Jake Blucker on Unsplash - https://unsplash.com/photos/tMzCrBkM99Y
-Photo by Jerry Zhang on Unsplash - https://unsplash.com/photos/oIBcow6n36s
-Photo by John Cobb on Unsplash - https://unsplash.com/photos/IE_sifhay7o
-Photo by Dan Gold on Unsplash - https://unsplash.com/photos/mDlhOIfGxNI
-Photo by Ana Toma on Unsplash - https://unsplash.com/photos/XsGwe6gYg0c
-Photo by Andrea on Unsplash - https://unsplash.com/photos/1AWY0N960Sk
-Photo by Aswin on Unsplash - https://unsplash.com/photos/_roUcFWstas
-Photo by Justin Kauffman on Unsplash - https://unsplash.com/photos/aWG_dqyhI0A
-Photo by Barna Bartis on Unsplash - https://unsplash.com/photos/VVoBQqWrvkc
-Photo by Kyle Hinkson on Unsplash - https://unsplash.com/photos/3439EnvnAGo
-Photo by Spencer Watson on Unsplash - https://unsplash.com/photos/5TBf16GnHKg
-Photo by adrian on Unsplash - https://unsplash.com/photos/1wrzvwoK8A4
-Photo by Christopher Rusev on Unsplash - https://unsplash.com/photos/7gKWgCRixf0
-Photo by Stephen Leonardi on Unsplash - https://unsplash.com/photos/MDmwQVgDHHM
-Photo by Dwinanda Nurhanif Mujito on Unsplash - https://unsplash.com/photos/pKT5Mg16w_w
-Photo by Humphrey Muleba on Unsplash - https://unsplash.com/photos/Zuvf5mxT5fs
-Photo by adrian on Unsplash - https://unsplash.com/photos/PNRxLFPMyJY
-Photo by Dahee Son on Unsplash - https://unsplash.com/photos/tV06QVJXVxU
-Photo by Zachary Kyra-Derksen on Unsplash - https://unsplash.com/photos/vkqS7vLQUtg
-Photo by Rodrigo Soares on Unsplash - https://unsplash.com/photos/8BFWBUkSqQo

LICENSE

@@ -0,0 +1 @@
+https://themeforest.net/licenses/terms/regular

LICENSE.md

@@ -1,6 +0,0 @@
-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)

README.md

@@ -1,10 +1,16 @@
-# Fuse - Admin template and Starter project for Angular
+# Fuse2
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli)
+Material Design Admin Template with Angular 6+ and Angular Material 2
+
+## The Community
+
+Share your ideas, discuss Fuse and help each other.
+
+[Click here](http://fusetheme.com/community) to see our Community page.
 
 ## Development server
 
-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.
+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.
 
 ## Code scaffolding
 
@@ -12,7 +18,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.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
 ## Running unit tests
 
@@ -20,8 +26,9 @@ 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 a platform of your choice.  To use this command, you need to first add a package that implements end-to-end testing capabilities.
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
 ## Further help
 
-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.
+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).
+

angular.json

@@ -4,127 +4,132 @@
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
-            "projectType": "application",
-            "schematics": {
-                "@schematics/angular:component": {
-                    "style": "scss"
-                }
-            },
             "root": "",
             "sourceRoot": "src",
+            "projectType": "application",
             "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "styleext": "scss"
+                }
+            },
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
-                        "outputPath": "dist/fuse",
+                        "outputPath": "dist",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "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-delta"
-                        ],
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
                         "assets": [
-                            "src/favicon-16x16.png",
-                            "src/favicon-32x32.png",
-                            "src/assets",
-                            {
-                                "glob": "_redirects",
-                                "input": "src",
-                                "output": "/"
-                            }
+                            "src/favicon.ico",
+                            "src/assets"
                         ],
-                        "stylePreprocessorOptions": {
-                            "includePaths": [
-                                "src/@fuse/styles"
-                            ]
-                        },
                         "styles": [
-                            "src/@fuse/styles/tailwind.scss",
-                            "src/@fuse/styles/themes.scss",
-                            "src/styles/vendors.scss",
-                            "src/@fuse/styles/main.scss",
-                            "src/styles/styles.scss",
-                            "src/styles/tailwind.scss"
+                            "src/styles.scss"
                         ],
                         "scripts": []
                     },
                     "configurations": {
                         "production": {
-                            "budgets": [
+                            "fileReplacements": [
                                 {
-                                    "type": "initial",
-                                    "maximumWarning": "3mb",
-                                    "maximumError": "5mb"
-                                },
-                                {
-                                    "type": "anyComponentStyle",
-                                    "maximumWarning": "75kb",
-                                    "maximumError": "90kb"
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
                                 }
                             ],
-                            "outputHashing": "all"
-                        },
-                        "development": {
-                            "buildOptimizer": false,
-                            "optimization": false,
-                            "vendorChunk": true,
-                            "extractLicenses": false,
-                            "sourceMap": true,
-                            "namedChunks": true
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
                         }
-                    },
-                    "defaultConfiguration": "production"
+                    }
                 },
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    },
                     "configurations": {
                         "production": {
-                          "buildTarget": "fuse:build:production"
+                            "browserTarget": "fuse:build:production"
                         },
-                        "development": {
-                          "buildTarget": "fuse:build:development"
+                        "hmr": {
+                            "hmr": true,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
                         }
-                    },
-                    "defaultConfiguration": "development"
+                    }
                 },
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n",
                     "options": {
-                      "buildTarget": "fuse:build"
+                        "browserTarget": "fuse:build"
                     }
                 },
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
-                        "polyfills": [
-                            "zone.js",
-                            "zone.js/testing"
-                        ],
-                        "tsConfig": "tsconfig.spec.json",
-                        "inlineStyleLanguage": "scss",
-                        "assets": [
-                            "src/favicon-16x16.png",
-                            "src/favicon-32x32.png",
-                            "src/assets"
-                        ],
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
                         "styles": [
-                            "src/styles/styles.scss"
+                            "styles.scss"
                         ],
-                        "scripts": []
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "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",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "fuse:serve"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
                     }
                 }
             }
         }
-    }
+    },
+    "defaultProject": "fuse"
 }

e2e/protractor.conf.js

@@ -0,0 +1,31 @@
+// 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}}));
+    }
+};

e2e/src/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { Fuse2Page } from './app.po';
+
+describe('Fuse2 App', () => {
+    let page: Fuse2Page;
+
+    beforeEach(() => {
+        page = new Fuse2Page();
+    });
+
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
+    });
+});

e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class Fuse2Page {
+    navigateTo() {
+        return browser.get('/');
+    }
+
+    getParagraphText() {
+        return element(by.css('app-root h1')).getText();
+    }
+}

e2e/tsconfig.e2e.json

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

package.json

@@ -1,65 +1,88 @@
 {
-    "name": "fuse-angular",
-    "version": "19.1.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": "17.2.4",
-        "@angular/cdk": "17.2.2",
-        "@angular/common": "17.2.4",
-        "@angular/compiler": "17.2.4",
-        "@angular/core": "17.2.4",
-        "@angular/forms": "17.2.4",
-        "@angular/material": "17.2.2",
-        "@angular/material-luxon-adapter": "17.2.2",
-        "@angular/platform-browser": "17.2.4",
-        "@angular/platform-browser-dynamic": "17.2.4",
-        "@angular/router": "17.2.4",
-        "@ngneat/transloco": "6.0.4",
-        "apexcharts": "3.47.0",
-        "crypto-js": "4.2.0",
-        "highlight.js": "11.9.0",
-        "lodash-es": "4.17.21",
-        "luxon": "3.4.4",
-        "ng-apexcharts": "1.9.0",
-        "ngx-quill": "25.1.1",
-        "perfect-scrollbar": "1.5.5",
-        "rxjs": "7.8.1",
-        "tslib": "2.6.2",
-        "zone.js": "0.14.4"
-    },
-    "devDependencies": {
-        "@angular-devkit/build-angular": "17.2.3",
-        "@angular/cli": "17.2.3",
-        "@angular/compiler-cli": "17.2.4",
-        "@tailwindcss/typography": "0.5.10",
-        "@types/chroma-js": "2.4.4",
-        "@types/crypto-js": "4.2.2",
-        "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "5.1.4",
-        "@types/lodash": "4.14.202",
-        "@types/lodash-es": "4.17.12",
-        "@types/luxon": "3.4.2",
-        "autoprefixer": "10.4.18",
-        "chroma-js": "2.4.2",
-        "jasmine-core": "5.1.2",
-        "karma": "6.4.3",
-        "karma-chrome-launcher": "3.2.0",
-        "karma-coverage": "2.2.1",
-        "karma-jasmine": "5.1.0",
-        "karma-jasmine-html-reporter": "2.1.0",
-        "lodash": "4.17.21",
-        "postcss": "8.4.35",
-        "tailwindcss": "3.4.1",
-        "typescript": "5.3.3"
-    }
+  "name": "fuse",
+  "version": "6.0.0",
+  "license": "https://themeforest.net/licenses/terms/regular",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --open",
+    "start-hmr": "ng serve --configuration hmr -sm=false",
+    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
+    "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.2",
+    "@angular/animations": "6.0.0",
+    "@angular/cdk": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/flex-layout": "6.0.0-beta.15",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/material": "6.0.0",
+    "@angular/material-moment-adapter": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/router": "6.0.0",
+    "@ngrx/effects": "5.2.0",
+    "@ngrx/router-store": "5.2.0",
+    "@ngrx/store": "5.2.0",
+    "@ngrx/store-devtools": "5.2.0",
+    "@ngx-translate/core": "10.0.1",
+    "@swimlane/ngx-charts": "7.3.0",
+    "@swimlane/ngx-datatable": "11.3.2",
+    "@swimlane/ngx-dnd": "3.2.0",
+    "@types/prismjs": "1.9.0",
+    "angular-calendar": "0.24.0",
+    "angular-in-memory-web-api": "0.6.0",
+    "chart.js": "2.7.2",
+    "classlist.js": "1.1.20150312",
+    "core-js": "2.5.5",
+    "d3": "5.1.0",
+    "hammerjs": "2.0.8",
+    "lodash": "4.17.10",
+    "moment": "2.22.1",
+    "ng2-charts": "1.6.0",
+    "ngrx-store-freeze": "0.2.2",
+    "ngx-color-picker": "5.3.8",
+    "ngx-cookie-service": "1.0.10",
+    "perfect-scrollbar": "1.3.0",
+    "prismjs": "1.14.0",
+    "rxjs": "6.1.0",
+    "rxjs-compat": "6.1.0",
+    "web-animations-js": "2.3.1",
+    "zone.js": "0.8.26"
+  },
+  "devDependencies": {
+    "@angular/cli": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "0.6.0",
+    "@angularclass/hmr": "2.1.3",
+    "@types/jasmine": "2.8.7",
+    "@types/jasminewd2": "2.0.3",
+    "@types/lodash": "4.14.108",
+    "@types/node": "8.9.5",
+    "codelyzer": "4.2.1",
+    "jasmine-core": "2.99.1",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-coverage-istanbul-reporter": "1.4.2",
+    "karma-jasmine": "1.1.2",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.3.1",
+    "ts-node": "5.0.1",
+    "tslint": "5.9.1",
+    "typescript": "2.7.2",
+    "webpack-bundle-analyzer": "2.11.1"
+  }
 }

src/@fuse/animations/defaults.ts

@@ -1,14 +0,0 @@
-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';
-}

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

@@ -1,34 +0,0 @@
-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 };

src/@fuse/animations/fade.ts

@@ -1,330 +0,0 @@
-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 };

src/@fuse/animations/index.ts

@@ -1 +1,413 @@
-export * from '@fuse/animations/public-api';
+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'))
+    ]),
+
+    trigger('routerTransitionLeft', [
+
+        transition('* => *', [
+            query('fuse-content > :enter, fuse-content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    transform: 'translateX(100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            sequence([
+                group([
+                    query('fuse-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('fuse-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('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
+            ])
+        ])
+    ]),
+
+    trigger('routerTransitionRight', [
+
+        transition('* => *', [
+            query('fuse-content > :enter, fuse-content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    transform: 'translateX(-100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            sequence([
+                group([
+                    query('fuse-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('fuse-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('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
+            ])
+        ])
+    ]),
+
+    trigger('routerTransitionUp', [
+
+        transition('* => *', [
+            query('fuse-content > :enter, fuse-content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    transform: 'translateY(100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            group([
+                query('fuse-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('fuse-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('fuse-content > :leave', animateChild(), {optional: true}),
+            query('fuse-content > :enter', animateChild(), {optional: true})
+        ])
+    ]),
+
+    trigger('routerTransitionDown', [
+
+        transition('* => *', [
+            query('fuse-content > :enter, fuse-content > :leave', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    transform: 'translateY(-100%)',
+                    opacity  : 0
+                })
+            ], {optional: true}),
+            sequence([
+                group([
+                    query('fuse-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('fuse-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('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
+            ])
+        ])
+    ]),
+
+    trigger('routerTransitionFade', [
+
+        transition('* => *', group([
+
+            query('fuse-content > :enter, fuse-content > :leave ', [
+                style({
+                    position: 'absolute',
+                    top     : 0,
+                    bottom  : 0,
+                    left    : 0,
+                    right   : 0
+                })
+            ], {optional: true}),
+
+            query('fuse-content > :enter', [
+                style({
+                    opacity: 0
+                })
+            ], {optional: true}),
+            query('fuse-content > :leave', [
+                style({
+                    opacity: 1
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    style({
+                        opacity: 0
+                    }))
+            ], {optional: true}),
+            query('fuse-content > :enter', [
+                style({
+                    opacity: 0
+                }),
+                animate('300ms cubic-bezier(0.0, 0.0, 0.2, 1)',
+                    style({
+                        opacity: 1
+                    }))
+            ], {optional: true}),
+            query('fuse-content > :enter', animateChild(), {optional: true}),
+            query('fuse-content > :leave', animateChild(), {optional: true})
+        ]))
+    ])
+];

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

@@ -1,15 +0,0 @@
-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,
-];

src/@fuse/animations/shake.ts

@@ -1,73 +0,0 @@
-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 };

src/@fuse/animations/slide.ts

@@ -1,252 +0,0 @@
-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 };

src/@fuse/animations/zoom.ts

@@ -1,73 +0,0 @@
-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 };
-

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

@@ -1,82 +0,0 @@
-<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>

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

@@ -1,219 +0,0 @@
-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();
-    }
-}

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

@@ -1,75 +0,0 @@
-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);
-    }
-
-}

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

@@ -1,15 +0,0 @@
-export type FuseAlertAppearance =
-    | 'border'
-    | 'fill'
-    | 'outline'
-    | 'soft';
-
-export type FuseAlertType =
-    | 'primary'
-    | 'accent'
-    | 'warn'
-    | 'basic'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'error';

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

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

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

@@ -1,3 +0,0 @@
-export * from '@fuse/components/alert/alert.component';
-export * from '@fuse/components/alert/alert.service';
-export * from '@fuse/components/alert/alert.types';

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

@@ -1,30 +0,0 @@
-<!-- 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>

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

@@ -1,63 +0,0 @@
-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;
-        }
-    }
-}

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

@@ -1,79 +0,0 @@
-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);
-        }
-    }
-}

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

@@ -1,3 +0,0 @@
-export type FuseCardFace =
-    | 'front'
-    | 'back';

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

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

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

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

src/@fuse/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,6 @@
+<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>

src/@fuse/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,17 @@
+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(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
+    {
+    }
+
+}

src/@fuse/components/confirm-dialog/confirm-dialog.module.ts

@@ -0,0 +1,20 @@
+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
+{
+}

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

@@ -0,0 +1,39 @@
+<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>

src/@fuse/components/countdown/countdown.component.scss

@@ -0,0 +1,30 @@
+:host {
+    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);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,55 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/interval';
+
+import * as moment from 'moment';
+
+@Component({
+    selector   : 'fuse-countdown',
+    templateUrl: './countdown.component.html',
+    styleUrls  : ['./countdown.component.scss']
+})
+export class FuseCountdownComponent implements OnInit
+{
+    @Input('eventDate') eventDate;
+    countdown: any;
+
+    constructor()
+    {
+        this.countdown = {
+            days   : '',
+            hours  : '',
+            minutes: '',
+            seconds: ''
+        };
+    }
+
+    ngOnInit()
+    {
+        const currDate = moment();
+        const eventDate = moment(this.eventDate);
+
+        let diff = eventDate.diff(currDate, 'seconds');
+
+        const countDown =
+                  Observable
+                      .interval(1000)
+                      .map(value => {
+                          return diff = diff - 1;
+                      })
+                      .map(value => {
+                          const timeLeft = moment.duration(value, 'seconds');
+
+                          return {
+                              days   : timeLeft.asDays().toFixed(0),
+                              hours  : timeLeft.hours(),
+                              minutes: timeLeft.minutes(),
+                              seconds: timeLeft.seconds()
+                          };
+                      });
+
+        countDown.subscribe(value => {
+            this.countdown = value;
+        });
+    }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
+
+@NgModule({
+    declarations: [
+        FuseCountdownComponent
+    ],
+    exports: [
+        FuseCountdownComponent
+    ],
+})
+export class FuseCountdownModule
+{
+}

src/@fuse/components/demo/demo-content/demo-content.component.html

@@ -0,0 +1,75 @@
+<!-- DEMO CONTENT -->
+<div class="demo-content">
+
+    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
+
+    <h1>Early Sunrise</h1>
+    <h4 class="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>
+        <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 adipiscing
+        elit. 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.
+    </p>
+
+    <p>
+        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>
+
+    <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. Donec viverra sed felis at venenatis. Mauris aliquam
+        fringilla nulla, sit amet congue felis dignissim at.
+    </p>
+
+    <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 -->

src/@fuse/components/demo/demo-content/demo-content.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-demo-content',
+    templateUrl: './demo-content.component.html',
+    styleUrls  : ['./demo-content.component.scss']
+})
+export class FuseDemoContentComponent
+{
+    constructor()
+    {
+    }
+}

src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.html

@@ -0,0 +1,100 @@
+<div class="demo-sidenav">
+    <mat-list>
+        <h3 matSubheader>Sidenav Demo</h3>
+
+        <mat-list-item>
+            <span>Sidenav Item 1</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 2</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 3</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 4</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 5</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 6</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 7</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 8</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 9</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 10</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 11</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 12</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 13</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 14</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 15</span>
+        </mat-list-item>
+
+        <mat-divider></mat-divider>
+
+        <mat-list-item>
+            <span>Sidenav Item 16</span>
+        </mat-list-item>
+
+    </mat-list>
+</div>

src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-demo-sidenav',
+    templateUrl: './demo-sidenav.component.html',
+    styleUrls  : ['./demo-sidenav.component.scss']
+})
+export class FuseDemoSidenavComponent
+{
+    constructor()
+    {
+    }
+}

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

@@ -0,0 +1,27 @@
+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 { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
+
+@NgModule({
+    declarations: [
+        FuseDemoContentComponent,
+        FuseDemoSidenavComponent
+    ],
+    imports     : [
+        RouterModule,
+
+        MatDividerModule,
+        MatListModule
+    ],
+    exports     : [
+        FuseDemoContentComponent,
+        FuseDemoSidenavComponent
+    ]
+})
+export class FuseDemoModule
+{
+}

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

@@ -1,3 +0,0 @@
-<div class="fuse-drawer-content">
-    <ng-content></ng-content>
-</div>

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

@@ -1,133 +0,0 @@
-/* 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;
-    }
-}

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

@@ -1,429 +0,0 @@
-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);
-    }
-}

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

@@ -1,50 +0,0 @@
-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);
-    }
-}

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

@@ -1,7 +0,0 @@
-export type FuseDrawerMode =
-    | 'over'
-    | 'side';
-
-export type FuseDrawerPosition =
-    | 'left'
-    | 'right';

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

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

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

@@ -1,3 +0,0 @@
-export * from '@fuse/components/drawer/drawer.component';
-export * from '@fuse/components/drawer/drawer.service';
-export * from '@fuse/components/drawer/drawer.types';

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

@@ -1,12 +0,0 @@
-<!-- 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>

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

@@ -1,58 +0,0 @@
-import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-@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
-{
-    @Input() iconTpl: TemplateRef<any>;
-    @Input() tooltip: string;
-
-    /**
-     * Constructor
-     */
-    constructor(@Inject(DOCUMENT) private _document: Document) { }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle the fullscreen mode
-     */
-    toggleFullscreen(): void
-    {
-        if (!this._document.fullscreenEnabled)
-        {
-            console.log('Fullscreen is not available in this browser.');
-            return;
-        }
-
-        // Check if the fullscreen is already open
-        const fullScreen = this._document.fullscreenElement;
-
-        // Toggle the fullscreen
-        if (fullScreen)
-        {
-            this._document.exitFullscreen();
-        }
-        else
-        {
-            this._document.documentElement.requestFullscreen()
-                .catch(() =>
-                {
-                    console.error('Entering fullscreen mode failed.');
-                });
-        }
-    }
-}

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

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

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

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

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

@@ -1,9 +0,0 @@
-<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 -->

src/@fuse/components/highlight/highlight.component.scss

@@ -1,3 +1,6 @@
-textarea[fuse-highlight] {
-    display: none;
-}
+:host {
+    display: block;
+    padding: 8px;
+    background: #263238;
+    cursor: text;
+}

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

@@ -1,135 +1,102 @@
-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';
+import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import * as Prism from 'prismjs/prism';
+import './prism-languages';
 
 @Component({
-    selector       : 'textarea[fuse-highlight]',
-    templateUrl    : './highlight.component.html',
-    styleUrls      : ['./highlight.component.scss'],
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHighlight',
-    standalone     : true,
-    imports        : [NgClass],
+    selector : 'fuse-highlight',
+    template : ' ',
+    styleUrls: ['./highlight.component.scss']
 })
-export class FuseHighlightComponent implements OnChanges, AfterViewInit
+export class FuseHighlightComponent implements OnInit
 {
-    @Input() code: string;
-    @Input() lang: string;
-    @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
+    @ContentChild('source') source: ElementRef;
+    @Input('lang') lang: string;
+    @Input('path') path: string;
 
-    highlightedCode: string;
-    private _viewRef: EmbeddedViewRef<any>;
-
-    /**
-     * Constructor
-     */
     constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _domSanitizer: DomSanitizer,
-        private _elementRef: ElementRef,
-        private _renderer2: Renderer2,
-        private _fuseHighlightService: FuseHighlightService,
-        private _viewContainerRef: ViewContainerRef,
+        private elementRef: ElementRef,
+        private http: HttpClient
     )
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On changes
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: SimpleChanges): void
+    ngOnInit()
     {
-        // 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 there is no language defined, return...
         if ( !this.lang )
         {
             return;
         }
 
-        // If there is no code input, get the code from
-        // the textarea
-        if ( !this.code )
+        // If the path is defined...
+        if ( this.path )
         {
-            // Get the code
-            this.code = this._elementRef.nativeElement.value;
+            // Get the source
+            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
+
+                // Highlight it
+                this.highlight(response);
+            });
         }
 
-        // Highlight and insert
-        this._highlightAndInsert();
+        // If the path is not defined and the source element exists...
+        if ( !this.path && this.source )
+        {
+            // Highlight it
+            this.highlight(this.source.nativeElement.value);
+        }
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Highlight and insert the highlighted code
-     *
-     * @private
-     */
-    private _highlightAndInsert(): void
+    highlight(sourceCode)
     {
-        // Return if the template reference is not available
-        if ( !this.templateRef )
+        // 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;
+            sourceLines.shift();
         }
 
-        // Return if the code or language is not defined
-        if ( !this.code || !this.lang )
+        if ( !sourceLines[sourceLines.length - 1].trim() )
         {
-            return;
+            sourceLines.pop();
         }
 
-        // Destroy the component if there is already one
-        if ( this._viewRef )
-        {
-            this._viewRef.destroy();
-            this._viewRef = null;
-        }
+        // Find the first non-whitespace char index in
+        // the first line of the source code
+        const indexOfFirstChar = sourceLines[0].search(/\S|$/);
 
-        // Highlight and sanitize the code just in case
-        this.highlightedCode = this._domSanitizer.sanitize(SecurityContext.HTML, this._fuseHighlightService.highlight(this.code, this.lang));
+        // Generate the trimmed source
+        let source = '';
 
-        // Return if the highlighted code is null
-        if ( this.highlightedCode === null )
-        {
-            return;
-        }
+        // Iterate through all the lines
+        sourceLines.forEach((line, index) => {
 
-        // Render and insert the template
-        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
-            highlightedCode: this.highlightedCode,
-            lang           : this.lang,
+            // 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';
+            }
         });
 
-        // Detect the changes
-        this._viewRef.detectChanges();
+        // 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>';
+
     }
 }
+

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
+
+@NgModule({
+    declarations: [
+        FuseHighlightComponent
+    ],
+    exports: [
+        FuseHighlightComponent
+    ],
+})
+export class FuseHighlightModule
+{
+}

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

@@ -1,80 +0,0 @@
-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');
-    }
-}

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

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

src/@fuse/components/highlight/prism-languages.ts

@@ -0,0 +1,17 @@
+import 'prismjs/prism';
+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';

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

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

src/@fuse/components/index.ts

@@ -0,0 +1,11 @@
+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 './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';

src/@fuse/components/loading-bar/index.ts

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

src/@fuse/components/loading-bar/loading-bar.component.html

@@ -1,5 +0,0 @@
-<ng-container *ngIf="show">
-    <mat-progress-bar
-        [mode]="mode"
-        [value]="progress"></mat-progress-bar>
-</ng-container>

src/@fuse/components/loading-bar/loading-bar.component.scss

@@ -1,7 +0,0 @@
-fuse-loading-bar {
-    position: fixed;
-    top: 0;
-    z-index: 999;
-    width: 100%;
-    height: 6px;
-}

src/@fuse/components/loading-bar/loading-bar.component.ts

@@ -1,89 +0,0 @@
-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();
-    }
-}

src/@fuse/components/loading-bar/public-api.ts

@@ -1 +0,0 @@
-export * from '@fuse/components/loading-bar/loading-bar.component';

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

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

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

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

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

@@ -1,89 +0,0 @@
-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]);
-        }
-    }
-}

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

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

src/@fuse/components/material-color-picker/material-color-picker.component.html

@@ -0,0 +1,70 @@
+<button mat-icon-button
+        type="button"
+        class="mat-elevation-z1"
+        [matMenuTriggerFor]="colorMenu"
+        (menuOpened)="onMenuOpen()"
+        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
+    <mat-icon>palette</mat-icon>
+</button>
+
+<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
+
+    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4"
+            fxLayout="row" fxLayoutAlign="space-between center">
+
+        <button mat-icon-button
+                [style.visibility]="view==='hues'?'visible':'hidden'"
+                (click)="$event.stopPropagation();backToPaletteSelection()" 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 Color
+        </span>
+
+        <button mat-icon-button
+                class="remove-color-button"
+                (click)="$event.stopPropagation();removeColor()"
+                aria-label="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"
+                     [ngClass]="'mat-'+color.key+'-bg'"
+                     *ngFor="let color of (colors | keys)"
+                     (click)="$event.stopPropagation();selectPalette(color.key)"
+                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
+                    <span class="label">
+                        {{color.key}}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="view" *ngSwitchCase="'hues'" >
+            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
+                <div class="color" *ngFor="let hue of hues"
+                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
+                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
+                     (click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
+                    <span class="label">
+                        {{hue}}
+                    </span>
+                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</mat-menu>

src/@fuse/components/material-color-picker/material-color-picker.component.scss

@@ -0,0 +1,54 @@
+.fuse-material-color-picker-menu {
+    width: 208px;
+
+    .mat-menu-content {
+        padding: 0;
+
+        .views {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+            min-height: 258px;
+            height: 308px;
+            background-color: #F7F7F7;
+
+            .view {
+                position: absolute;
+                width: 208px;
+                height: 100%;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                top: 0;
+
+                .colors {
+                    position: relative;
+                    padding: 4px;
+
+                    .color {
+                        position: relative;
+                        width: 46px;
+                        height: 46px;
+                        margin: 2px;
+                        border-radius: 0;
+                        cursor: pointer;
+
+                        .label {
+                            padding: 2px;
+                            font-size: 10px;
+                        }
+
+                        mat-icon {
+                            position: absolute;
+                            top: 2px;
+                            right: 2px;
+                            font-size: 16px;
+                            opacity: 0.7;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/@fuse/components/material-color-picker/material-color-picker.component.ts

@@ -0,0 +1,187 @@
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
+
+import { fuseAnimations } from '@fuse/animations';
+import { MatColors } from '@fuse/mat-colors';
+
+@Component({
+    selector     : 'fuse-material-color-picker',
+    templateUrl  : './material-color-picker.component.html',
+    styleUrls    : ['./material-color-picker.component.scss'],
+    animations   : fuseAnimations,
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseMaterialColorPickerComponent implements OnChanges
+{
+    colors: any;
+    selectedColor: any;
+    hues: string[];
+    view = 'palettes';
+
+    @Input() selectedPalette = '';
+    @Input() selectedHue = '';
+    @Input() selectedFg = '';
+    @Input() value: any;
+    @Output() onValueChange = new EventEmitter();
+    @Output() selectedPaletteChange = new EventEmitter();
+    @Output() selectedHueChange = new EventEmitter();
+    @Output() selectedClassChange = new EventEmitter();
+    @Output() selectedBgChange = new EventEmitter();
+    @Output() selectedFgChange = new EventEmitter();
+
+    _selectedClass = '';
+    @Input()
+    set selectedClass(value)
+    {
+        if ( value && value !== '' && this._selectedClass !== value )
+        {
+            const color = value.split('-');
+            if ( color.length >= 5 )
+            {
+                this.selectedPalette = color[1] + '-' + color[2];
+                this.selectedHue = color[3];
+            }
+            else
+            {
+                this.selectedPalette = color[1];
+                this.selectedHue = color[2];
+            }
+        }
+        this._selectedClass = value;
+    }
+
+    get selectedClass(): string
+    {
+        return this._selectedClass;
+    }
+
+    _selectedBg = '';
+    @Input()
+    set selectedBg(value)
+    {
+        if ( value && value !== '' && this._selectedBg !== value )
+        {
+            for ( const palette in this.colors )
+            {
+                if ( !this.colors.hasOwnProperty(palette) )
+                {
+                    continue;
+                }
+
+                for ( const hue of this.hues )
+                {
+                    if ( this.colors[palette][hue] === value )
+                    {
+                        this.selectedPalette = palette;
+                        this.selectedHue = hue;
+                        break;
+                    }
+                }
+            }
+        }
+        this._selectedBg = value;
+    }
+
+    get selectedBg(): string
+    {
+        return this._selectedBg;
+    }
+
+    constructor()
+    {
+        this.colors = MatColors.all;
+        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
+    }
+
+    ngOnChanges(changes: any)
+    {
+        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
+            changes.selectedClass && changes.selectedClass.currentValue === '' ||
+            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
+        {
+            this.removeColor();
+            return;
+        }
+        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+        {
+            this.updateSelectedColor();
+        }
+    }
+    
+    selectPalette(palette)
+    {
+        this.selectedPalette = palette;
+        this.updateSelectedColor();
+        this.view = 'hues';
+    }
+
+    selectHue(hue)
+    {
+        this.selectedHue = hue;
+        this.updateSelectedColor();
+    }
+
+    removeColor()
+    {
+        this.selectedPalette = '';
+        this.selectedHue = '';
+        this.updateSelectedColor();
+        this.view = 'palettes';
+    }
+
+    updateSelectedColor()
+    {
+        setTimeout(() => {
+
+            if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
+            {
+                return;
+            }
+
+            if ( this.selectedPalette !== '' && this.selectedHue !== '' )
+            {
+                this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
+                this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
+                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
+            }
+            else
+            {
+                this.selectedBg = '';
+                this.selectedFg = '';
+            }
+
+            this.selectedColor = {
+                palette: this.selectedPalette,
+                hue    : this.selectedHue,
+                class  : this.selectedClass,
+                bg     : this.selectedBg,
+                fg     : this.selectedFg
+            };
+
+            this.selectedPaletteChange.emit(this.selectedPalette);
+            this.selectedHueChange.emit(this.selectedHue);
+            this.selectedClassChange.emit(this.selectedClass);
+            this.selectedBgChange.emit(this.selectedBg);
+            this.selectedFgChange.emit(this.selectedFg);
+
+            this.value = this.selectedColor;
+            this.onValueChange.emit(this.selectedColor);
+        });
+    }
+
+    backToPaletteSelection()
+    {
+        this.view = 'palettes';
+    }
+
+    onMenuOpen()
+    {
+        if ( this.selectedPalette === '' )
+        {
+            this.view = 'palettes';
+        }
+        else
+        {
+            this.view = 'hues';
+        }
+    }
+}

src/@fuse/components/material-color-picker/material-color-picker.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } 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,
+        MatRippleModule,
+
+        FusePipesModule
+    ],
+    exports: [
+        FuseMaterialColorPickerComponent
+    ],
+})
+export class FuseMaterialColorPickerModule
+{
+}

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

@@ -1,134 +0,0 @@
-<!-- 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>

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

@@ -1,87 +0,0 @@
-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();
-    }
-}

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

@@ -1,121 +0,0 @@
-<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>

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

@@ -1,100 +0,0 @@
-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;
-    }
-}

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

@@ -1,4 +0,0 @@
-<!-- Divider -->
-<div
-    class="fuse-horizontal-navigation-item-wrapper divider"
-    [ngClass]="item.classes?.wrapper"></div>

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

@@ -1,64 +0,0 @@
-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();
-    }
-}

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

@@ -1,4 +0,0 @@
-<!-- Spacer -->
-<div
-    class="fuse-horizontal-navigation-item-wrapper"
-    [ngClass]="item.classes?.wrapper"></div>

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

@@ -1,64 +0,0 @@
-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();
-    }
-}

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

@@ -1,36 +0,0 @@
-<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>

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

@@ -1,180 +0,0 @@
-/* Root navigation specific */
-fuse-horizontal-navigation {
-
-    .fuse-horizontal-navigation-wrapper {
-        display: flex;
-        align-items: center;
-
-        /* Basic, Branch */
-        fuse-horizontal-navigation-basic-item,
-        fuse-horizontal-navigation-branch-item {
-
-            @screen sm {
-
-                &:hover {
-
-                    .fuse-horizontal-navigation-item-wrapper {
-                        @apply bg-hover;
-                    }
-                }
-            }
-
-            .fuse-horizontal-navigation-item-wrapper {
-                border-radius: 4px;
-                overflow: hidden;
-
-                .fuse-horizontal-navigation-item {
-                    padding: 0 16px;
-                    cursor: pointer;
-                    user-select: none;
-
-                    .fuse-horizontal-navigation-item-icon {
-                        margin-right: 12px;
-                    }
-                }
-            }
-        }
-
-        /* Basic - When item active (current link) */
-        fuse-horizontal-navigation-basic-item {
-
-            .fuse-horizontal-navigation-item-active,
-            .fuse-horizontal-navigation-item-active-forced {
-
-                .fuse-horizontal-navigation-item-title {
-                    @apply text-primary #{'!important'};
-                }
-
-                .fuse-horizontal-navigation-item-subtitle {
-                    @apply text-primary-400 #{'!important'};
-
-                    .dark & {
-                        @apply text-primary-600 #{'!important'};
-                    }
-                }
-
-                .fuse-horizontal-navigation-item-icon {
-                    @apply text-primary #{'!important'};
-                }
-            }
-        }
-
-        /* Branch - When menu open */
-        fuse-horizontal-navigation-branch-item {
-
-            .fuse-horizontal-navigation-menu-active,
-            .fuse-horizontal-navigation-menu-active-forced {
-
-                .fuse-horizontal-navigation-item-wrapper {
-                    @apply bg-hover;
-                }
-            }
-        }
-
-        /* Spacer */
-        fuse-horizontal-navigation-spacer-item {
-            margin: 12px 0;
-        }
-    }
-}
-
-/* Menu panel specific */
-.fuse-horizontal-navigation-menu-panel {
-
-    .fuse-horizontal-navigation-menu-item {
-        height: auto;
-        min-height: 0;
-        line-height: normal;
-        white-space: normal;
-
-        /* Basic, Branch */
-        fuse-horizontal-navigation-basic-item,
-        fuse-horizontal-navigation-branch-item,
-        fuse-horizontal-navigation-divider-item {
-            display: flex;
-            flex: 1 1 auto;
-        }
-
-        /* Divider */
-        fuse-horizontal-navigation-divider-item {
-            margin: 8px -16px;
-
-            .fuse-horizontal-navigation-item-wrapper {
-                height: 1px;
-                box-shadow: 0 1px 0 0;
-            }
-        }
-    }
-}
-
-/* Navigation menu item common */
-.fuse-horizontal-navigation-menu-item {
-
-    /* Basic - When item active (current link) */
-    fuse-horizontal-navigation-basic-item {
-
-        .fuse-horizontal-navigation-item-active,
-        .fuse-horizontal-navigation-item-active-forced {
-
-            .fuse-horizontal-navigation-item-title {
-                @apply text-primary #{'!important'};
-            }
-
-            .fuse-horizontal-navigation-item-subtitle {
-                @apply text-primary-400 #{'!important'};
-
-                .dark & {
-                    @apply text-primary-600 #{'!important'};
-                }
-            }
-
-            .fuse-horizontal-navigation-item-icon {
-                @apply text-primary #{'!important'};
-            }
-        }
-    }
-
-    .fuse-horizontal-navigation-item-wrapper {
-        width: 100%;
-
-        &.fuse-horizontal-navigation-item-has-subtitle {
-
-            .fuse-horizontal-navigation-item {
-                min-height: 56px;
-            }
-        }
-
-        .fuse-horizontal-navigation-item {
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            min-height: 48px;
-            width: 100%;
-            font-size: 13px;
-            font-weight: 500;
-            text-decoration: none;
-
-            .fuse-horizontal-navigation-item-title-wrapper {
-
-                .fuse-horizontal-navigation-item-subtitle {
-                    font-size: 12px;
-                }
-            }
-
-            .fuse-horizontal-navigation-item-badge {
-                margin-left: auto;
-
-                .fuse-horizontal-navigation-item-badge-content {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 10px;
-                    font-weight: 600;
-                    white-space: nowrap;
-                    height: 20px;
-                }
-            }
-        }
-    }
-}

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

@@ -1,115 +0,0 @@
-import { NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { fuseAnimations } from '@fuse/animations';
-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 { ReplaySubject, Subject } from 'rxjs';
-import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
-import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
-import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
-
-@Component({
-    selector       : 'fuse-horizontal-navigation',
-    templateUrl    : './horizontal.component.html',
-    styleUrls      : ['./horizontal.component.scss'],
-    animations     : fuseAnimations,
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHorizontalNavigation',
-    standalone     : true,
-    imports        : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
-})
-export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
-{
-    @Input() name: string = this._fuseUtilsService.randomId();
-    @Input() navigation: FuseNavigationItem[];
-
-    onRefreshed: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService,
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On changes
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: SimpleChanges): void
-    {
-        // Navigation
-        if ( 'navigation' in changes )
-        {
-            // Mark for check
-            this._changeDetectorRef.markForCheck();
-        }
-    }
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Make sure the name input is not an empty string
-        if ( this.name === '' )
-        {
-            this.name = this._fuseUtilsService.randomId();
-        }
-
-        // Register the navigation component
-        this._fuseNavigationService.registerComponent(this.name, this);
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Deregister the navigation component from the registry
-        this._fuseNavigationService.deregisterComponent(this.name);
-
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next(null);
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Refresh the component to apply the changes
-     */
-    refresh(): void
-    {
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-
-        // Execute the observable
-        this.onRefreshed.next(true);
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-}

src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html

@@ -0,0 +1,52 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <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="collapse-arrow">keyboard_arrow_right</mat-icon>
+    </ng-template>
+
+    <div class="children" [ngClass]="{'open': isOpen}">
+
+        <div class="{{fuseSettings.colorClasses.navbar}}">
+
+            <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-collapse *ngIf="item.type=='collapse'"
+                                              [item]="item"></fuse-nav-horizontal-collapse>
+                <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
+            </ng-container>
+
+        </div>
+
+    </div>
+
+</ng-container>

src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts

@@ -0,0 +1,50 @@
+import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
+import { fuseAnimations } from '../../../../animations/index';
+import { FuseConfigService } from '../../../../services/config.service';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+    selector   : 'fuse-nav-horizontal-collapse',
+    templateUrl: './nav-horizontal-collapse.component.html',
+    styleUrls  : ['./nav-horizontal-collapse.component.scss'],
+    animations : fuseAnimations
+})
+export class FuseNavHorizontalCollapseComponent implements OnDestroy
+{
+    onConfigChanged: Subscription;
+    fuseSettings: any;
+    isOpen = false;
+
+    @HostBinding('class') classes = 'nav-item nav-collapse';
+    @Input() item: any;
+
+    @HostListener('mouseenter')
+    open()
+    {
+        this.isOpen = true;
+    }
+
+    @HostListener('mouseleave')
+    close()
+    {
+        this.isOpen = false;
+    }
+
+    constructor(
+        private fuseConfig: FuseConfigService
+    )
+    {
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
+                .subscribe(
+                    (newSettings) => {
+                        this.fuseSettings = newSettings;
+                    }
+                );
+    }
+
+    ngOnDestroy()
+    {
+        this.onConfigChanged.unsubscribe();
+    }
+}

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

@@ -0,0 +1,30 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <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>
+    </ng-template>
+
+</ng-container>