Updated Heroicons icons

Finalized standalone components conversion
Second pass through for standalone components.
2025-12-22 20:47:08 +00:00 · 2023-05-30 11:58:30 +03:00 · 2023-05-30 09:26:50 +03:00 · 2023-05-15 14:36:38 +03:00 · 2023-05-04 13:29:53 +03:00 · 2023-01-22 22:49:25 +03:00
862 changed files with 25617 additions and 30629 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular

 ## Development server

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

 ## Code scaffolding

--- a/angular.json
+++ b/angular.json
@@ -1,11 +1,6 @@
 {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
-    "cli": {
-        "schematicCollections": [
-            "@angular-eslint/schematics"
-        ]
-    },
    "newProjectRoot": "projects",
    "projects": {
        "fuse": {
@@ -25,7 +20,9 @@
                        "outputPath": "dist/fuse",
                        "index": "src/index.html",
                        "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
                        "tsConfig": "tsconfig.app.json",
                        "inlineStyleLanguage": "scss",
                        "allowedCommonJsDependencies": [
@@ -35,7 +32,6 @@
                            "crypto-js/hmac-sha256",
                            "crypto-js/enc-base64",
                            "flat",
-                            "moment",
                            "quill"
                        ],
                        "assets": [
@@ -77,12 +73,6 @@
                                    "maximumError": "90kb"
                                }
                            ],
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.prod.ts"
-                                }
-                            ],
                            "outputHashing": "all"
                        },
                        "development": {
@@ -117,10 +107,11 @@
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
-                        "main": "src/test.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js",
+                            "zone.js/testing"
+                        ],
                        "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "karma.conf.js",
                        "inlineStyleLanguage": "scss",
                        "assets": [
                            "src/favicon-16x16.png",
@@ -132,15 +123,6 @@
                        ],
                        "scripts": []
                    }
-                },
-                "lint": {
-                    "builder": "@angular-eslint/builder:lint",
-                    "options": {
-                        "lintFilePatterns": [
-                            "src/**/*.ts",
-                            "src/**/*.html"
-                        ]
-                    }
                }
            }
        }
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,45 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config)
-{
-    config.set({
-        basePath           : '',
-        frameworks         : ['jasmine', '@angular-devkit/build-angular'],
-        plugins            : [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage'),
-            require('@angular-devkit/build-angular/plugins/karma')
-        ],
-        client             : {
-            jasmine     : {
-                // you can add configuration options for Jasmine here
-                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-                // for example, you can disable the random execution with `random: false`
-                // or set a specific seed with `seed: 4321`
-            },
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        jasmineHtmlReporter: {
-            suppressAll: true // removes the duplicated traces
-        },
-        coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/fuse'),
-            subdir   : '.',
-            reporters: [
-                {type: 'html'},
-                {type: 'text-summary'}
-            ]
-        },
-        reporters          : ['progress', 'kjhtml'],
-        port               : 9876,
-        colors             : true,
-        logLevel           : config.LOG_INFO,
-        autoWatch          : true,
-        browsers           : ['Chrome'],
-        singleRun          : false,
-        restartOnFileChange: true
-    });
-};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "fuse-angular",
-    "version": "15.1.0",
+    "version": "18.0.0",
    "description": "Fuse - Angular Admin Template and Starter Project",
    "author": "https://themeforest.net/user/srcn",
    "license": "https://themeforest.net/licenses/standard",
@@ -10,71 +10,57 @@
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
-        "test": "ng test",
-        "lint": "ng lint"
+        "test": "ng test"
    },
    "dependencies": {
-        "@angular/animations": "14.1.0",
-        "@angular/cdk": "14.1.0",
-        "@angular/common": "14.1.0",
-        "@angular/compiler": "14.1.0",
-        "@angular/core": "14.1.0",
-        "@angular/forms": "14.1.0",
-        "@angular/material": "14.1.0",
-        "@angular/material-moment-adapter": "14.1.0",
-        "@angular/platform-browser": "14.1.0",
-        "@angular/platform-browser-dynamic": "14.1.0",
-        "@angular/router": "14.1.0",
-        "@ngneat/transloco": "4.1.1",
-        "apexcharts": "3.35.3",
+        "@angular/animations": "16.0.3",
+        "@angular/cdk": "16.0.2",
+        "@angular/common": "16.0.3",
+        "@angular/compiler": "16.0.3",
+        "@angular/core": "16.0.3",
+        "@angular/forms": "16.0.3",
+        "@angular/material": "16.0.2",
+        "@angular/material-luxon-adapter": "16.0.2",
+        "@angular/platform-browser": "16.0.3",
+        "@angular/platform-browser-dynamic": "16.0.3",
+        "@angular/router": "16.0.3",
+        "@ngneat/transloco": "4.2.7",
+        "apexcharts": "3.40.0",
        "crypto-js": "3.3.0",
-        "highlight.js": "11.6.0",
+        "highlight.js": "11.8.0",
        "lodash-es": "4.17.21",
-        "moment": "2.29.4",
-        "ng-apexcharts": "1.7.1",
-        "ngx-markdown": "14.0.1",
-        "ngx-quill": "18.0.0",
+        "luxon": "3.3.0",
+        "ng-apexcharts": "1.7.6",
+        "ngx-quill": "22.0.0",
        "perfect-scrollbar": "1.5.5",
        "quill": "1.3.7",
-        "rxjs": "7.5.6",
-        "tslib": "2.4.0",
-        "zone.js": "0.11.6"
+        "rxjs": "7.8.1",
+        "tslib": "2.5.2",
+        "zone.js": "0.13.0"
    },
    "devDependencies": {
-        "@angular-devkit/build-angular": "14.1.0",
-        "@angular-eslint/builder": "14.0.2",
-        "@angular-eslint/eslint-plugin": "14.0.2",
-        "@angular-eslint/eslint-plugin-template": "14.0.2",
-        "@angular-eslint/schematics": "14.0.2",
-        "@angular-eslint/template-parser": "14.0.2",
-        "@angular/cli": "14.1.0",
-        "@angular/compiler-cli": "14.1.0",
-        "@tailwindcss/aspect-ratio": "0.4.0",
-        "@tailwindcss/line-clamp": "0.4.0",
-        "@tailwindcss/typography": "0.5.4",
-        "@types/chroma-js": "2.1.4",
+        "@angular-devkit/build-angular": "16.0.3",
+        "@angular/cli": "16.0.3",
+        "@angular/compiler-cli": "16.0.3",
+        "@tailwindcss/typography": "0.5.9",
+        "@types/chroma-js": "2.4.0",
        "@types/crypto-js": "3.1.47",
        "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.0.3",
-        "@types/lodash": "4.14.182",
-        "@types/lodash-es": "4.17.6",
-        "@typescript-eslint/eslint-plugin": "5.30.7",
-        "@typescript-eslint/parser": "5.30.7",
-        "autoprefixer": "10.4.7",
+        "@types/jasmine": "4.3.2",
+        "@types/lodash": "4.14.195",
+        "@types/lodash-es": "4.17.7",
+        "@types/luxon": "3.3.0",
+        "autoprefixer": "10.4.14",
        "chroma-js": "2.4.2",
-        "eslint": "8.20.0",
-        "eslint-plugin-import": "2.26.0",
-        "eslint-plugin-jsdoc": "39.3.3",
-        "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "4.2.0",
-        "karma": "6.4.0",
-        "karma-chrome-launcher": "3.1.1",
+        "jasmine-core": "5.0.0",
+        "karma": "6.4.2",
+        "karma-chrome-launcher": "3.2.0",
        "karma-coverage": "2.2.0",
        "karma-jasmine": "5.1.0",
        "karma-jasmine-html-reporter": "2.0.0",
        "lodash": "4.17.21",
-        "postcss": "8.4.14",
-        "tailwindcss": "3.1.6",
-        "typescript": "4.7.4"
+        "postcss": "8.4.24",
+        "tailwindcss": "3.3.2",
+        "typescript": "5.0.4"
    }
 }
--- a/src/@fuse/animations/expand-collapse.ts
+++ b/src/@fuse/animations/expand-collapse.ts
@@ -8,12 +8,12 @@ const expandCollapse = trigger('expandCollapse',
    [
        state('void, collapsed',
            style({
-                height: '0'
-            })
+                height: '0',
+            }),
        ),

        state('*, expanded',
-            style('*')
+            style('*'),
        ),

        // Prevent the transition if the state is false
@@ -24,11 +24,11 @@ const expandCollapse = trigger('expandCollapse',
            animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 export { expandCollapse };
--- a/src/@fuse/animations/fade.ts
+++ b/src/@fuse/animations/fade.ts
@@ -8,14 +8,14 @@ const fadeIn = trigger('fadeIn',
    [
        state('void',
            style({
-                opacity: 0
-            })
+                opacity: 0,
+            }),
        ),

        state('*',
            style({
-                opacity: 1
-            })
+                opacity: 1,
+            }),
        ),

        // Prevent the transition if the state is false
@@ -25,11 +25,11 @@ const fadeIn = trigger('fadeIn',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -40,15 +40,15 @@ const fadeInTop = trigger('fadeInTop',
        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(0, -100%, 0)'
-            })
+                transform: 'translate3d(0, -100%, 0)',
+            }),
        ),

        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -58,11 +58,11 @@ const fadeInTop = trigger('fadeInTop',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -73,15 +73,15 @@ const fadeInBottom = trigger('fadeInBottom',
        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(0, 100%, 0)'
-            })
+                transform: 'translate3d(0, 100%, 0)',
+            }),
        ),

        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -91,11 +91,11 @@ const fadeInBottom = trigger('fadeInBottom',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -106,15 +106,15 @@ const fadeInLeft = trigger('fadeInLeft',
        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(-100%, 0, 0)'
-            })
+                transform: 'translate3d(-100%, 0, 0)',
+            }),
        ),

        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -124,11 +124,11 @@ const fadeInLeft = trigger('fadeInLeft',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -139,15 +139,15 @@ const fadeInRight = trigger('fadeInRight',
        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(100%, 0, 0)'
-            })
+                transform: 'translate3d(100%, 0, 0)',
+            }),
        ),

        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -157,11 +157,11 @@ const fadeInRight = trigger('fadeInRight',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -171,14 +171,14 @@ const fadeOut = trigger('fadeOut',
    [
        state('*',
            style({
-                opacity: 1
-            })
+                opacity: 1,
+            }),
        ),

        state('void',
            style({
-                opacity: 0
-            })
+                opacity: 0,
+            }),
        ),

        // Prevent the transition if the state is false
@@ -188,11 +188,11 @@ const fadeOut = trigger('fadeOut',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -203,15 +203,15 @@ const fadeOutTop = trigger('fadeOutTop',
        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(0, -100%, 0)'
-            })
+                transform: 'translate3d(0, -100%, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -221,11 +221,11 @@ const fadeOutTop = trigger('fadeOutTop',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -236,15 +236,15 @@ const fadeOutBottom = trigger('fadeOutBottom',
        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(0, 100%, 0)'
-            })
+                transform: 'translate3d(0, 100%, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -254,11 +254,11 @@ const fadeOutBottom = trigger('fadeOutBottom',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -269,15 +269,15 @@ const fadeOutLeft = trigger('fadeOutLeft',
        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(-100%, 0, 0)'
-            })
+                transform: 'translate3d(-100%, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -287,11 +287,11 @@ const fadeOutLeft = trigger('fadeOutLeft',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -302,15 +302,15 @@ const fadeOutRight = trigger('fadeOutRight',
        state('*',
            style({
                opacity  : 1,
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
                opacity  : 0,
-                transform: 'translate3d(100%, 0, 0)'
-            })
+                transform: 'translate3d(100%, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -320,11 +320,11 @@ const fadeOutRight = trigger('fadeOutRight',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 export { fadeIn, fadeInTop, fadeInBottom, fadeInLeft, fadeInRight, fadeOut, fadeOutTop, fadeOutBottom, fadeOutLeft, fadeOutRight };
--- a/src/@fuse/animations/public-api.ts
+++ b/src/@fuse/animations/public-api.ts
@@ -11,5 +11,5 @@ export const fuseAnimations = [
    shake,
    slideInTop, slideInBottom, slideInLeft, slideInRight,
    slideOutTop, slideOutBottom, slideOutLeft, slideOutRight,
-    zoomIn, zoomOut
+    zoomIn, zoomOut,
 ];
--- a/src/@fuse/animations/shake.ts
+++ b/src/@fuse/animations/shake.ts
@@ -16,58 +16,58 @@ const shake = trigger('shake',
                    keyframes([
                        style({
                            transform: 'translate3d(0, 0, 0)',
-                            offset   : 0
+                            offset   : 0,
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.1
+                            offset   : 0.1,
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.2
+                            offset   : 0.2,
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.3
+                            offset   : 0.3,
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.4
+                            offset   : 0.4,
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.5
+                            offset   : 0.5,
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.6
+                            offset   : 0.6,
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.7
+                            offset   : 0.7,
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
-                            offset   : 0.8
+                            offset   : 0.8,
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
-                            offset   : 0.9
+                            offset   : 0.9,
                        }),
                        style({
                            transform: 'translate3d(0, 0, 0)',
-                            offset   : 1
-                        })
-                    ])
-                )
+                            offset   : 1,
+                        }),
+                    ]),
+                ),
            ],
            {
                params: {
-                    timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
-                }
-            }
-        )
-    ]
+                    timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+                },
+            },
+        ),
+    ],
 );

 export { shake };
--- a/src/@fuse/animations/slide.ts
+++ b/src/@fuse/animations/slide.ts
@@ -8,14 +8,14 @@ const slideInTop = trigger('slideInTop',
    [
        state('void',
            style({
-                transform: 'translate3d(0, -100%, 0)'
-            })
+                transform: 'translate3d(0, -100%, 0)',
+            }),
        ),

        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -25,11 +25,11 @@ const slideInTop = trigger('slideInTop',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -39,14 +39,14 @@ const slideInBottom = trigger('slideInBottom',
    [
        state('void',
            style({
-                transform: 'translate3d(0, 100%, 0)'
-            })
+                transform: 'translate3d(0, 100%, 0)',
+            }),
        ),

        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -56,11 +56,11 @@ const slideInBottom = trigger('slideInBottom',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -70,14 +70,14 @@ const slideInLeft = trigger('slideInLeft',
    [
        state('void',
            style({
-                transform: 'translate3d(-100%, 0, 0)'
-            })
+                transform: 'translate3d(-100%, 0, 0)',
+            }),
        ),

        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -87,11 +87,11 @@ const slideInLeft = trigger('slideInLeft',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -101,14 +101,14 @@ const slideInRight = trigger('slideInRight',
    [
        state('void',
            style({
-                transform: 'translate3d(100%, 0, 0)'
-            })
+                transform: 'translate3d(100%, 0, 0)',
+            }),
        ),

        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -118,11 +118,11 @@ const slideInRight = trigger('slideInRight',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -132,14 +132,14 @@ const slideOutTop = trigger('slideOutTop',
    [
        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
-                transform: 'translate3d(0, -100%, 0)'
-            })
+                transform: 'translate3d(0, -100%, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -149,11 +149,11 @@ const slideOutTop = trigger('slideOutTop',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -163,14 +163,14 @@ const slideOutBottom = trigger('slideOutBottom',
    [
        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
-                transform: 'translate3d(0, 100%, 0)'
-            })
+                transform: 'translate3d(0, 100%, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -180,11 +180,11 @@ const slideOutBottom = trigger('slideOutBottom',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -194,14 +194,14 @@ const slideOutLeft = trigger('slideOutLeft',
    [
        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
-                transform: 'translate3d(-100%, 0, 0)'
-            })
+                transform: 'translate3d(-100%, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -211,11 +211,11 @@ const slideOutLeft = trigger('slideOutLeft',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -225,14 +225,14 @@ const slideOutRight = trigger('slideOutRight',
    [
        state('*',
            style({
-                transform: 'translate3d(0, 0, 0)'
-            })
+                transform: 'translate3d(0, 0, 0)',
+            }),
        ),

        state('void',
            style({
-                transform: 'translate3d(100%, 0, 0)'
-            })
+                transform: 'translate3d(100%, 0, 0)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -242,11 +242,11 @@ const slideOutRight = trigger('slideOutRight',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 export { slideInTop, slideInBottom, slideInLeft, slideInRight, slideOutTop, slideOutBottom, slideOutLeft, slideOutRight };
--- a/src/@fuse/animations/zoom.ts
+++ b/src/@fuse/animations/zoom.ts
@@ -10,15 +10,15 @@ const zoomIn = trigger('zoomIn',
        state('void',
            style({
                opacity  : 0,
-                transform: 'scale(0.5)'
-            })
+                transform: 'scale(0.5)',
+            }),
        ),

        state('*',
            style({
                opacity  : 1,
-                transform: 'scale(1)'
-            })
+                transform: 'scale(1)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -28,11 +28,11 @@ const zoomIn = trigger('zoomIn',
        transition('void => *', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.entering} ${FuseAnimationCurves.deceleration}`,
+                },
+            },
+        ),
+    ],
 );

 // -----------------------------------------------------------------------------------------------------
@@ -44,15 +44,15 @@ const zoomOut = trigger('zoomOut',
        state('*',
            style({
                opacity  : 1,
-                transform: 'scale(1)'
-            })
+                transform: 'scale(1)',
+            }),
        ),

        state('void',
            style({
                opacity  : 0,
-                transform: 'scale(0.5)'
-            })
+                transform: 'scale(0.5)',
+            }),
        ),

        // Prevent the transition if the state is false
@@ -62,11 +62,11 @@ const zoomOut = trigger('zoomOut',
        transition('* => void', animate('{{timings}}'),
            {
                params: {
-                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`
-                }
-            }
-        )
-    ]
+                    timings: `${FuseAnimationDurations.exiting} ${FuseAnimationCurves.acceleration}`,
+                },
+            },
+        ),
+    ],
 );

 export { zoomIn, zoomOut };
--- a/src/@fuse/components/alert/alert.component.html
+++ b/src/@fuse/components/alert/alert.component.html
@@ -48,7 +48,7 @@

            <mat-icon
                *ngIf="type === 'warning'"
-                [svgIcon]="'heroicons_solid:exclamation'"></mat-icon>
+                [svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>

            <mat-icon
                *ngIf="type === 'error'"
@@ -76,7 +76,7 @@
        class="fuse-alert-dismiss-button"
        mat-icon-button
        (click)="dismiss()">
-        <mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
+        <mat-icon [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
    </button>

 </div>
--- a/src/@fuse/components/alert/alert.component.ts
+++ b/src/@fuse/components/alert/alert.component.ts
@@ -1,10 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { filter, Subject, takeUntil } from 'rxjs';
 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 { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
 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',
@@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
    encapsulation  : ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations     : fuseAnimations,
-    exportAs       : 'fuseAlert'
+    exportAs       : 'fuseAlert',
+    standalone     : true,
+    imports        : [NgIf, MatIconModule, MatButtonModule],
 })
 export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseAlertService: FuseAlertService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
    )
    {
    }
@@ -69,7 +74,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
            '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'
+            'fuse-alert-type-error'        : this.type === 'error',
        };
        /* eslint-enable @typescript-eslint/naming-convention */
    }
@@ -119,10 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
        this._fuseAlertService.onDismiss
            .pipe(
                filter(name => this.name === name),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
            )
-            .subscribe(() => {
-
+            .subscribe(() =>
+            {
                // Dismiss the alert
                this.dismiss();
            });
@@ -131,10 +136,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
        this._fuseAlertService.onShow
            .pipe(
                filter(name => this.name === name),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
            )
-            .subscribe(() => {
-
+            .subscribe(() =>
+            {
                // Show the alert
                this.show();
            });
--- a/src/@fuse/components/alert/alert.module.ts
+++ b/src/@fuse/components/alert/alert.module.ts
@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
-
-@NgModule({
-    declarations: [
-        FuseAlertComponent
-    ],
-    imports     : [
-        CommonModule,
-        MatButtonModule,
-        MatIconModule
-    ],
-    exports     : [
-        FuseAlertComponent
-    ]
-})
-export class FuseAlertModule
-{
-}
--- a/src/@fuse/components/alert/alert.service.ts
+++ b/src/@fuse/components/alert/alert.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseAlertService
 {
    private readonly _onDismiss: ReplaySubject<string> = new ReplaySubject<string>(1);
--- a/src/@fuse/components/alert/public-api.ts
+++ b/src/@fuse/components/alert/public-api.ts
@@ -1,4 +1,3 @@
 export * from '@fuse/components/alert/alert.component';
-export * from '@fuse/components/alert/alert.module';
 export * from '@fuse/components/alert/alert.service';
 export * from '@fuse/components/alert/alert.types';
--- a/src/@fuse/components/card/card.component.ts
+++ b/src/@fuse/components/card/card.component.ts
@@ -1,5 +1,6 @@
-import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 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';

@@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
    styleUrls    : ['./card.component.scss'],
    encapsulation: ViewEncapsulation.None,
    animations   : fuseAnimations,
-    exportAs     : 'fuseCard'
+    exportAs     : 'fuseCard',
+    standalone   : true,
+    imports      : [NgIf],
 })
 export class FuseCardComponent implements OnChanges
 {
@@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
            '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
+            'fuse-card-flippable' : this.flippable,
        };
        /* eslint-enable @typescript-eslint/naming-convention */
    }
--- a/src/@fuse/components/card/card.module.ts
+++ b/src/@fuse/components/card/card.module.ts
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FuseCardComponent } from '@fuse/components/card/card.component';
-
-@NgModule({
-    declarations: [
-        FuseCardComponent
-    ],
-    imports     : [
-        CommonModule
-    ],
-    exports     : [
-        FuseCardComponent
-    ]
-})
-export class FuseCardModule
-{
-}
--- a/src/@fuse/components/card/public-api.ts
+++ b/src/@fuse/components/card/public-api.ts
@@ -1,2 +1 @@
 export * from '@fuse/components/card/card.component';
-export * from '@fuse/components/card/card.module';
--- a/src/@fuse/components/drawer/drawer.component.ts
+++ b/src/@fuse/components/drawer/drawer.component.ts
@@ -1,16 +1,17 @@
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
-import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+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'
+    exportAs     : 'fuseDrawer',
+    standalone   : true,
 })
 export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
        private _elementRef: ElementRef,
        private _renderer2: Renderer2,
        private _fuseDrawerService: FuseDrawerService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
    )
    {
-        this._handleOverlayClick = (): void => {
+        this._handleOverlayClick = (): void =>
+        {
            this.close();
        };
    }
@@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
            'fuse-drawer-hover'                      : this._hovered,
            [`fuse-drawer-mode-${this.mode}`]        : true,
            'fuse-drawer-opened'                     : this.opened,
-            [`fuse-drawer-position-${this.position}`]: true
+            [`fuse-drawer-position-${this.position}`]: true,
        };
        /* eslint-enable @typescript-eslint/naming-convention */
    }
@@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
    @HostBinding('style') get styleList(): any
    {
        return {
-            'visibility': this.opened ? 'visible' : 'hidden'
+            'visibility': this.opened ? 'visible' : 'hidden',
        };
    }

@@ -173,7 +175,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
            // 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(() => {
+            setTimeout(() =>
+            {
                this._enableAnimations();
            }, 500);
        }
@@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
        // 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}))
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
        ]).create(this._overlay);

        // Play the animation
@@ -369,15 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy

        // 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}))
+            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(() => {
-
+        this._player.onDone(() =>
+        {
            // If the overlay still exists...
            if ( this._overlay )
            {
--- a/src/@fuse/components/drawer/drawer.module.ts
+++ b/src/@fuse/components/drawer/drawer.module.ts
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
-
-@NgModule({
-    declarations: [
-        FuseDrawerComponent
-    ],
-    imports     : [
-        CommonModule
-    ],
-    exports     : [
-        FuseDrawerComponent
-    ]
-})
-export class FuseDrawerModule
-{
-}
--- a/src/@fuse/components/drawer/drawer.service.ts
+++ b/src/@fuse/components/drawer/drawer.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseDrawerService
 {
    private _componentRegistry: Map<string, FuseDrawerComponent> = new Map<string, FuseDrawerComponent>();
--- a/src/@fuse/components/drawer/public-api.ts
+++ b/src/@fuse/components/drawer/public-api.ts
@@ -1,4 +1,3 @@
 export * from '@fuse/components/drawer/drawer.component';
-export * from '@fuse/components/drawer/drawer.module';
 export * from '@fuse/components/drawer/drawer.service';
 export * from '@fuse/components/drawer/drawer.types';
--- a/src/@fuse/components/fullscreen/fullscreen.component.html
+++ b/src/@fuse/components/fullscreen/fullscreen.component.html
@@ -8,5 +8,5 @@

 <!-- Default icon -->
 <ng-template #defaultIconTpl>
-    <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
+    <mat-icon [svgIcon]="'heroicons_outline:arrows-pointing-out'"></mat-icon>
 </ng-template>
--- a/src/@fuse/components/fullscreen/fullscreen.component.ts
+++ b/src/@fuse/components/fullscreen/fullscreen.component.ts
@@ -1,5 +1,8 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';

@Component({
@@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
    templateUrl    : './fullscreen.component.html',
    encapsulation  : ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseFullscreen'
+    exportAs       : 'fuseFullscreen',
+    standalone     : true,
+    imports        : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
 })
 export class FuseFullscreenComponent implements OnInit
 {
--- a/src/@fuse/components/fullscreen/fullscreen.module.ts
+++ b/src/@fuse/components/fullscreen/fullscreen.module.ts
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-    declarations: [
-        FuseFullscreenComponent
-    ],
-    imports     : [
-        MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
-        CommonModule
-    ],
-    exports     : [
-        FuseFullscreenComponent
-    ]
-})
-export class FuseFullscreenModule
-{
-}
--- a/src/@fuse/components/fullscreen/public-api.ts
+++ b/src/@fuse/components/fullscreen/public-api.ts
@@ -1,3 +1,2 @@
 export * from '@fuse/components/fullscreen/fullscreen.component';
-export * from '@fuse/components/fullscreen/fullscreen.module';
 export * from '@fuse/components/fullscreen/fullscreen.types';
--- a/src/@fuse/components/highlight/highlight.component.ts
+++ b/src/@fuse/components/highlight/highlight.component.ts
@@ -1,3 +1,4 @@
+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';
@@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
    styleUrls      : ['./highlight.component.scss'],
    encapsulation  : ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHighlight'
+    exportAs       : 'fuseHighlight',
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseHighlightComponent implements OnChanges, AfterViewInit
 {
@@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
        private _elementRef: ElementRef,
        private _renderer2: Renderer2,
        private _fuseHighlightService: FuseHighlightService,
-        private _viewContainerRef: ViewContainerRef
+        private _viewContainerRef: ViewContainerRef,
    )
    {
    }
@@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
        // Render and insert the template
        this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
            highlightedCode: this.highlightedCode,
-            lang           : this.lang
+            lang           : this.lang,
        });

        // Detect the changes
--- a/src/@fuse/components/highlight/highlight.module.ts
+++ b/src/@fuse/components/highlight/highlight.module.ts
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
-
-@NgModule({
-    declarations: [
-        FuseHighlightComponent
-    ],
-    imports     : [
-        CommonModule
-    ],
-    exports     : [
-        FuseHighlightComponent
-    ]
-})
-export class FuseHighlightModule
-{
-}
--- a/src/@fuse/components/highlight/highlight.service.ts
+++ b/src/@fuse/components/highlight/highlight.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import hljs from 'highlight.js';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseHighlightService
 {
    /**
@@ -61,8 +59,8 @@ export class FuseHighlightService

        // Iterate through the lines
        lines.filter(line => line.length)
-             .forEach((line, index) => {
-
+            .forEach((line, index) =>
+            {
                // Always get the indentation of the first line so we can
                // have something to compare with
                if ( index === 0 )
--- a/src/@fuse/components/highlight/public-api.ts
+++ b/src/@fuse/components/highlight/public-api.ts
@@ -1,3 +1,2 @@
 export * from '@fuse/components/highlight/highlight.component';
-export * from '@fuse/components/highlight/highlight.module';
 export * from '@fuse/components/highlight/highlight.service';
--- a/src/@fuse/components/loading-bar/loading-bar.component.ts
+++ b/src/@fuse/components/loading-bar/loading-bar.component.ts
@@ -1,14 +1,18 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Subject, takeUntil } from 'rxjs';
+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'
+    exportAs     : 'fuseLoadingBar',
+    standalone   : true,
+    imports      : [NgIf, MatProgressBarModule],
 })
 export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
        // Subscribe to the service
        this._fuseLoadingService.mode$
            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                this.mode = value;
            });

        this._fuseLoadingService.progress$
            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                this.progress = value;
            });

        this._fuseLoadingService.show$
            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                this.show = value;
            });

--- a/src/@fuse/components/loading-bar/loading-bar.module.ts
+++ b/src/@fuse/components/loading-bar/loading-bar.module.ts
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
-
-@NgModule({
-    declarations: [
-        FuseLoadingBarComponent
-    ],
-    imports     : [
-        CommonModule,
-        MatProgressBarModule
-    ],
-    exports     : [
-        FuseLoadingBarComponent
-    ]
-})
-export class FuseLoadingBarModule
-{
-}
--- a/src/@fuse/components/loading-bar/public-api.ts
+++ b/src/@fuse/components/loading-bar/public-api.ts
@@ -1,2 +1 @@
 export * from '@fuse/components/loading-bar/loading-bar.component';
-export * from '@fuse/components/loading-bar/loading-bar.module';
--- a/src/@fuse/components/masonry/masonry.component.ts
+++ b/src/@fuse/components/masonry/masonry.component.ts
@@ -1,3 +1,4 @@
+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';
@@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
    templateUrl  : './masonry.component.html',
    encapsulation: ViewEncapsulation.None,
    animations   : fuseAnimations,
-    exportAs     : 'fuseMasonry'
+    exportAs     : 'fuseMasonry',
+    standalone   : true,
+    imports      : [NgTemplateOutlet],
 })
 export class FuseMasonryComponent implements OnChanges, AfterViewInit
 {
--- a/src/@fuse/components/masonry/masonry.module.ts
+++ b/src/@fuse/components/masonry/masonry.module.ts
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
-
-@NgModule({
-    declarations: [
-        FuseMasonryComponent
-    ],
-    imports     : [
-        CommonModule
-    ],
-    exports     : [
-        FuseMasonryComponent
-    ]
-})
-export class FuseMasonryModule
-{
-}
--- a/src/@fuse/components/masonry/public-api.ts
+++ b/src/@fuse/components/masonry/public-api.ts
@@ -1,2 +1 @@
 export * from '@fuse/components/masonry/masonry.component';
-export * from '@fuse/components/masonry/masonry.module';
--- a/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts
@@ -1,15 +1,21 @@
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
-import { Subject, takeUntil } from 'rxjs';
+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
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
 })
 export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
 {
@@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
    )
    {
        // Set the equivalent of {exact: false} as default for active match options.
@@ -61,9 +67,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes

        // Subscribe to onRefreshed on the navigation component
        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts
@@ -1,15 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { MatMenu } from '@angular/material/menu';
-import { Subject, takeUntil } from 'rxjs';
+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
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
 })
 export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
 {
@@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -49,9 +56,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe

        // Subscribe to onRefreshed on the navigation component
        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts
@@ -1,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-horizontal-navigation-divider-item',
    templateUrl    : './divider.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -41,9 +44,9 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD

        // Subscribe to onRefreshed on the navigation component
        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
+++ b/src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts
@@ -1,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-horizontal-navigation-spacer-item',
    templateUrl    : './spacer.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -41,9 +44,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe

        // Subscribe to onRefreshed on the navigation component
        this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/horizontal/horizontal.component.ts
+++ b/src/@fuse/components/navigation/horizontal/horizontal.component.ts
@@ -1,9 +1,13 @@
+import { NgFor, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { ReplaySubject, Subject } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { 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',
@@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
    animations     : fuseAnimations,
    encapsulation  : ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHorizontalNavigation'
+    exportAs       : 'fuseHorizontalNavigation',
+    standalone     : true,
+    imports        : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
 })
 export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
    )
    {
    }
--- a/src/@fuse/components/navigation/navigation.module.ts
+++ b/src/@fuse/components/navigation/navigation.module.ts
@@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api';
-import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
-import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component';
-import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
-import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component';
-import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
-import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
-import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
-import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
-import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
-import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
-import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
-
-@NgModule({
-    declarations: [
-        FuseHorizontalNavigationBasicItemComponent,
-        FuseHorizontalNavigationBranchItemComponent,
-        FuseHorizontalNavigationDividerItemComponent,
-        FuseHorizontalNavigationSpacerItemComponent,
-        FuseHorizontalNavigationComponent,
-        FuseVerticalNavigationAsideItemComponent,
-        FuseVerticalNavigationBasicItemComponent,
-        FuseVerticalNavigationCollapsableItemComponent,
-        FuseVerticalNavigationDividerItemComponent,
-        FuseVerticalNavigationGroupItemComponent,
-        FuseVerticalNavigationSpacerItemComponent,
-        FuseVerticalNavigationComponent
-    ],
-    imports     : [
-        CommonModule,
-        RouterModule,
-        MatButtonModule,
-        MatDividerModule,
-        MatIconModule,
-        MatMenuModule,
-        MatTooltipModule,
-        FuseScrollbarModule
-    ],
-    exports     : [
-        FuseHorizontalNavigationComponent,
-        FuseVerticalNavigationComponent
-    ]
-})
-export class FuseNavigationModule
-{
-}
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseNavigationService
 {
    private _componentRegistry: Map<string, any> = new Map<string, any>();
@@ -160,7 +158,7 @@ export class FuseNavigationService
    getItemParent(
        id: string,
        navigation: FuseNavigationItem[],
-        parent: FuseNavigationItem[] | FuseNavigationItem
+        parent: FuseNavigationItem[] | FuseNavigationItem,
    ): FuseNavigationItem[] | FuseNavigationItem | null
    {
        for ( const item of navigation )
--- a/src/@fuse/components/navigation/public-api.ts
+++ b/src/@fuse/components/navigation/public-api.ts
@@ -1,5 +1,4 @@
 export * from '@fuse/components/navigation/horizontal/horizontal.component';
 export * from '@fuse/components/navigation/vertical/vertical.component';
-export * from '@fuse/components/navigation/navigation.module';
 export * from '@fuse/components/navigation/navigation.service';
 export * from '@fuse/components/navigation/navigation.types';
--- a/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/aside/aside.component.ts
@@ -1,15 +1,25 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { filter, Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { NgClass, NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Router } from '@angular/router';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { filter, Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation-aside-item',
    templateUrl    : './aside.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _router: Router,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -70,10 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
        this._router.events
            .pipe(
                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
            )
-            .subscribe((event: NavigationEnd) => {
-
+            .subscribe((event: NavigationEnd) =>
+            {
                // Mark if active
                this._markIfActive(event.urlAfterRedirects);
            });
@@ -83,9 +93,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn

        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/basic/basic.component.ts
@@ -1,15 +1,20 @@
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
-import { Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation-basic-item',
    templateUrl    : './basic.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
 })
 export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
 {
@@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
    )
    {
        // Set the equivalent of {exact: false} as default for active match options.
@@ -61,9 +66,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr

        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts
@@ -1,17 +1,26 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { filter, Subject, takeUntil } from 'rxjs';
+import { NgClass, NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { filter, Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation-collapsable-item',
    templateUrl    : './collapsable.component.html',
    animations     : fuseAnimations,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
 {
@@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
        private _router: Router,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -51,7 +60,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
        /* eslint-disable @typescript-eslint/naming-convention */
        return {
            'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
-            'fuse-vertical-navigation-item-expanded' : this.isExpanded
+            'fuse-vertical-navigation-item-expanded' : this.isExpanded,
        };
        /* eslint-enable @typescript-eslint/naming-convention */
    }
@@ -86,8 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
        // Listen for the onCollapsableItemCollapsed from the service
        this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((collapsedItem) => {
-
+            .subscribe((collapsedItem) =>
+            {
                // Check if the collapsed item is null
                if ( collapsedItem === null )
                {
@@ -106,8 +115,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
        {
            this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
                .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((expandedItem) => {
-
+                .subscribe((expandedItem) =>
+                {
                    // Check if the expanded item is null
                    if ( expandedItem === null )
                    {
@@ -141,10 +150,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
        this._router.events
            .pipe(
                filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
            )
-            .subscribe((event: NavigationEnd) => {
-
+            .subscribe((event: NavigationEnd) =>
+            {
                // If the item has a children that has a matching url with the current url, expand...
                if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
                {
@@ -163,9 +172,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O

        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/divider/divider.component.ts
@@ -1,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation-divider-item',
    templateUrl    : './divider.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -41,9 +44,9 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes

        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/vertical/components/group/group.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/group/group.component.ts
@@ -1,14 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { NgClass, NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation-group-item',
    templateUrl    : './group.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
 {
@@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -47,9 +55,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr

        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
+++ b/src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts
@@ -1,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { Subject, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation-spacer-item',
    templateUrl    : './spacer.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
     */
    constructor(
        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
    )
    {
    }
@@ -41,9 +44,9 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest

        // Subscribe to onRefreshed on the navigation component
        this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Mark for check
            this._changeDetectorRef.markForCheck();
        });
--- a/src/@fuse/components/navigation/vertical/vertical.component.ts
+++ b/src/@fuse/components/navigation/vertical/vertical.component.ts
@@ -1,14 +1,21 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { NavigationEnd, Router } from '@angular/router';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
+import { DOCUMENT, NgFor, NgIf } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
 import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';

@Component({
    selector       : 'fuse-vertical-navigation',
@@ -17,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
    animations     : fuseAnimations,
    encapsulation  : ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseVerticalNavigation'
+    exportAs       : 'fuseVerticalNavigation',
+    standalone     : true,
+    imports        : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
 {
@@ -51,6 +60,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
    private readonly _handleAsideOverlayClick: any;
    private readonly _handleOverlayClick: any;
    private _hovered: boolean = false;
+    private _mutationObserver: MutationObserver;
    private _overlay: HTMLElement;
    private _player: AnimationPlayer;
    private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
@@ -64,18 +74,21 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
    constructor(
        private _animationBuilder: AnimationBuilder,
        private _changeDetectorRef: ChangeDetectorRef,
+        @Inject(DOCUMENT) private _document: Document,
        private _elementRef: ElementRef,
        private _renderer2: Renderer2,
        private _router: Router,
        private _scrollStrategyOptions: ScrollStrategyOptions,
        private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
    )
    {
-        this._handleAsideOverlayClick = (): void => {
+        this._handleAsideOverlayClick = (): void =>
+        {
            this.closeAside();
        };
-        this._handleOverlayClick = (): void => {
+        this._handleOverlayClick = (): void =>
+        {
            this.close();
        };
    }
@@ -99,7 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
            'fuse-vertical-navigation-mode-side'                      : this.mode === 'side',
            'fuse-vertical-navigation-opened'                         : this.opened,
            'fuse-vertical-navigation-position-left'                  : this.position === 'left',
-            'fuse-vertical-navigation-position-right'                 : this.position === 'right'
+            'fuse-vertical-navigation-position-right'                 : this.position === 'right',
        };
        /* eslint-enable @typescript-eslint/naming-convention */
    }
@@ -110,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
    @HostBinding('style') get styleList(): any
    {
        return {
-            'visibility': this.opened ? 'visible' : 'hidden'
+            'visibility': this.opened ? 'visible' : 'hidden',
        };
    }

@@ -139,16 +152,17 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
        this._fuseScrollbarDirectivesSubscription =
            merge(
                this.onCollapsableItemCollapsed,
-                this.onCollapsableItemExpanded
+                this.onCollapsableItemExpanded,
            )
                .pipe(
                    takeUntil(this._unsubscribeAll),
-                    delay(250)
+                    delay(250),
                )
-                .subscribe(() => {
-
+                .subscribe(() =>
+                {
                    // Loop through the scrollbars and update them
-                    fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
+                    fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
+                    {
                        fuseScrollbarDirective.update();
                    });
                });
@@ -250,7 +264,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
            // 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 changing
-            setTimeout(() => {
+            setTimeout(() =>
+            {
                this._enableAnimations();
            }, 500);
        }
@@ -305,10 +320,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
        this._router.events
            .pipe(
                filter(event => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
            )
-            .subscribe(() => {
-
+            .subscribe(() =>
+            {
                // If the mode is 'over' and the navigation is opened...
                if ( this.mode === 'over' && this.opened )
                {
@@ -330,8 +345,38 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     */
    ngAfterViewInit(): void
    {
-        setTimeout(() => {
+        // Fix for Firefox.
+        //
+        // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
+        // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
+        // This fixes the problem by reading the 'top' value from the html element and adding it as a
+        // 'marginTop' to the navigation itself.
+        this._mutationObserver = new MutationObserver((mutations) =>
+        {
+            mutations.forEach((mutation) =>
+            {
+                const mutationTarget = mutation.target as HTMLElement;
+                if ( mutation.attributeName === 'class' )
+                {
+                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
+                    {
+                        const top = parseInt(mutationTarget.style.top, 10);
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
+                    }
+                    else
+                    {
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                    }
+                }
+            });
+        });
+        this._mutationObserver.observe(this._document.documentElement, {
+            attributes     : true,
+            attributeFilter: ['class'],
+        });

+        setTimeout(() =>
+        {
            // Return if 'navigation content' element does not exist
            if ( !this._navigationContentEl )
            {
@@ -355,8 +400,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
            else
            {
                // Go through all the scrollbar directives
-                this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) => {
-
+                this._fuseScrollbarDirectives.forEach((fuseScrollbarDirective) =>
+                {
                    // Skip if not enabled
                    if ( !fuseScrollbarDirective.isEnabled() )
                    {
@@ -375,6 +420,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     */
    ngOnDestroy(): void
    {
+        // Disconnect the mutation observer
+        this._mutationObserver.disconnect();
+
        // Forcefully close the navigation and aside in case they are opened
        this.close();
        this.closeAside();
@@ -590,7 +638,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After

        // Create the enter animation and attach it to the player
        this._player = this._animationBuilder.build([
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
        ]).create(this._overlay);

        // Play the animation
@@ -614,15 +662,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After

        // 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}))
+            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(() => {
-
+        this._player.onDone(() =>
+        {
            // If the overlay still exists...
            if ( this._overlay )
            {
@@ -665,7 +713,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
        this._player =
            this._animationBuilder
                .build([
-                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
+                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
                ]).create(this._asideOverlay);

        // Play the animation
@@ -691,15 +739,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
        this._player =
            this._animationBuilder
                .build([
-                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
+                    animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
                ]).create(this._asideOverlay);

        // Play the animation
        this._player.play();

        // Once the animation is done...
-        this._player.onDone(() => {
-
+        this._player.onDone(() =>
+        {
            // If the aside overlay still exists...
            if ( this._asideOverlay )
            {
--- a/src/@fuse/directives/scroll-reset/public-api.ts
+++ b/src/@fuse/directives/scroll-reset/public-api.ts
@@ -1,2 +1 @@
 export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
-export * from '@fuse/directives/scroll-reset/scroll-reset.module';
--- a/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
+++ b/src/@fuse/directives/scroll-reset/scroll-reset.directive.ts
@@ -3,8 +3,9 @@ import { NavigationEnd, Router } from '@angular/router';
 import { filter, Subject, takeUntil } from 'rxjs';

@Directive({
-    selector: '[fuseScrollReset]',
-    exportAs: 'fuseScrollReset'
+    selector  : '[fuseScrollReset]',
+    exportAs  : 'fuseScrollReset',
+    standalone: true,
 })
 export class FuseScrollResetDirective implements OnInit, OnDestroy
 {
@@ -15,7 +16,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
     */
    constructor(
        private _elementRef: ElementRef,
-        private _router: Router
+        private _router: Router,
    )
    {
    }
@@ -32,9 +33,9 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
        // Subscribe to NavigationEnd event
        this._router.events.pipe(
            filter(event => event instanceof NavigationEnd),
-            takeUntil(this._unsubscribeAll)
-        ).subscribe(() => {
-
+            takeUntil(this._unsubscribeAll),
+        ).subscribe(() =>
+        {
            // Reset the element's scroll position to the top
            this._elementRef.nativeElement.scrollTop = 0;
        });
--- a/src/@fuse/directives/scroll-reset/scroll-reset.module.ts
+++ b/src/@fuse/directives/scroll-reset/scroll-reset.module.ts
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive';
-
-@NgModule({
-    declarations: [
-        FuseScrollResetDirective
-    ],
-    exports     : [
-        FuseScrollResetDirective
-    ]
-})
-export class FuseScrollResetModule
-{
-}
--- a/src/@fuse/directives/scrollbar/public-api.ts
+++ b/src/@fuse/directives/scrollbar/public-api.ts
@@ -1,2 +1 @@
 export * from '@fuse/directives/scrollbar/scrollbar.directive';
-export * from '@fuse/directives/scrollbar/scrollbar.module';
--- a/src/@fuse/directives/scrollbar/scrollbar.directive.ts
+++ b/src/@fuse/directives/scrollbar/scrollbar.directive.ts
@@ -1,18 +1,19 @@
-import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Router } from '@angular/router';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
-import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
-import PerfectScrollbar from 'perfect-scrollbar';
-import { merge } from 'lodash-es';
+import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
 import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
+import { merge } from 'lodash-es';
+import PerfectScrollbar from 'perfect-scrollbar';
+import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';

 /**
 * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
 */
@Directive({
-    selector: '[fuseScrollbar]',
-    exportAs: 'fuseScrollbar'
+    selector  : '[fuseScrollbar]',
+    exportAs  : 'fuseScrollbar',
+    standalone: true,
 })
 export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 {
@@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
    constructor(
        private _elementRef: ElementRef,
        private _platform: Platform,
-        private _router: Router
+        private _router: Router,
    )
    {
    }
@@ -101,11 +102,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
            }

            // Destroy and re-init the PerfectScrollbar to update its options
-            setTimeout(() => {
+            setTimeout(() =>
+            {
                this._destroy();
            });

-            setTimeout(() => {
+            setTimeout(() =>
+            {
                this._init();
            });
        }
@@ -120,10 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
        fromEvent(window, 'resize')
            .pipe(
                takeUntil(this._unsubscribeAll),
-                debounceTime(150)
+                debounceTime(150),
            )
-            .subscribe(() => {
-
+            .subscribe(() =>
+            {
                // Update the PerfectScrollbar
                this.update();
            });
@@ -203,14 +206,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
        {
            scrollbarPosition = new ScrollbarPosition(
                this._ps.reach.x || 0,
-                this._ps.reach.y || 0
+                this._ps.reach.y || 0,
            );
        }
        else
        {
            scrollbarPosition = new ScrollbarPosition(
                this._elementRef.nativeElement.scrollLeft,
-                this._elementRef.nativeElement.scrollTop
+                this._elementRef.nativeElement.scrollTop,
            );
        }

@@ -388,7 +391,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy

            const cosParameter = (oldValue - value) / 2;

-            const step = (newTimestamp: number): void => {
+            const step = (newTimestamp: number): void =>
+            {
                scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));

--- a/src/@fuse/directives/scrollbar/scrollbar.module.ts
+++ b/src/@fuse/directives/scrollbar/scrollbar.module.ts
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
-
-@NgModule({
-    declarations: [
-        FuseScrollbarDirective
-    ],
-    exports     : [
-        FuseScrollbarDirective
-    ]
-})
-export class FuseScrollbarModule
-{
-}
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@@ -1,51 +0,0 @@
-import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
-import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { FuseConfirmationModule } from '@fuse/services/confirmation';
-import { FuseLoadingModule } from '@fuse/services/loading';
-import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
-import { FusePlatformModule } from '@fuse/services/platform/platform.module';
-import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
-import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
-
-@NgModule({
-    imports  : [
-        FuseConfirmationModule,
-        FuseLoadingModule,
-        FuseMediaWatcherModule,
-        FusePlatformModule,
-        FuseSplashScreenModule,
-        FuseUtilsModule
-    ],
-    providers: [
-        {
-            // Disable 'theme' sanity check
-            provide : MATERIAL_SANITY_CHECKS,
-            useValue: {
-                doctype: true,
-                theme  : false,
-                version: true
-            }
-        },
-        {
-            // Use the 'fill' appearance on Angular Material form fields by default
-            provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
-            useValue: {
-                appearance: 'fill'
-            }
-        }
-    ]
-})
-export class FuseModule
-{
-    /**
-     * Constructor
-     */
-    constructor(@Optional() @SkipSelf() parentModule?: FuseModule)
-    {
-        if ( parentModule )
-        {
-            throw new Error('FuseModule has already been loaded. Import this module in the AppModule only!');
-        }
-    }
-}
--- a/src/@fuse/fuse.provider.ts
+++ b/src/@fuse/fuse.provider.ts
@@ -0,0 +1,108 @@
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { APP_INITIALIZER, ENVIRONMENT_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
+import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { FUSE_MOCK_API_DEFAULT_DELAY, mockApiInterceptor } from '@fuse/lib/mock-api';
+import { FuseConfig } from '@fuse/services/config';
+import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+import { fuseLoadingInterceptor, FuseLoadingService } from '@fuse/services/loading';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { FusePlatformService } from '@fuse/services/platform';
+import { FuseSplashScreenService } from '@fuse/services/splash-screen';
+import { FuseUtilsService } from '@fuse/services/utils';
+
+export type FuseProviderConfig = {
+    mockApi?: {
+        delay?: number;
+        services?: any[];
+    },
+    fuse?: FuseConfig
+}
+
+/**
+ * Fuse provider
+ */
+export const provideFuse = (config: FuseProviderConfig): Array<Provider | EnvironmentProviders> =>
+{
+    // Base providers
+    const providers: Array<Provider | EnvironmentProviders> = [
+        {
+            // Disable 'theme' sanity check
+            provide : MATERIAL_SANITY_CHECKS,
+            useValue: {
+                doctype: true,
+                theme  : false,
+                version: true,
+            },
+        },
+        {
+            // Use the 'fill' appearance on Angular Material form fields by default
+            provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
+            useValue: {
+                appearance: 'fill',
+            },
+        },
+        {
+            provide : FUSE_MOCK_API_DEFAULT_DELAY,
+            useValue: config?.mockApi?.delay ?? 0,
+        },
+        {
+            provide : FUSE_CONFIG,
+            useValue: config?.fuse ?? {},
+        },
+
+        importProvidersFrom(MatDialogModule),
+        {
+            provide : ENVIRONMENT_INITIALIZER,
+            useValue: () => inject(FuseConfirmationService),
+            multi   : true,
+        },
+
+        provideHttpClient(withInterceptors([fuseLoadingInterceptor])),
+        {
+            provide : ENVIRONMENT_INITIALIZER,
+            useValue: () => inject(FuseLoadingService),
+            multi   : true,
+        },
+
+        {
+            provide : ENVIRONMENT_INITIALIZER,
+            useValue: () => inject(FuseMediaWatcherService),
+            multi   : true,
+        },
+        {
+            provide : ENVIRONMENT_INITIALIZER,
+            useValue: () => inject(FusePlatformService),
+            multi   : true,
+        },
+        {
+            provide : ENVIRONMENT_INITIALIZER,
+            useValue: () => inject(FuseSplashScreenService),
+            multi   : true,
+        },
+        {
+            provide : ENVIRONMENT_INITIALIZER,
+            useValue: () => inject(FuseUtilsService),
+            multi   : true,
+        },
+    ];
+
+    // Mock Api services
+    if ( config?.mockApi?.services )
+    {
+        providers.push(
+            provideHttpClient(withInterceptors([mockApiInterceptor])),
+            {
+                provide   : APP_INITIALIZER,
+                deps      : [...config.mockApi.services],
+                useFactory: () => (): any => null,
+                multi     : true,
+            },
+        );
+    }
+
+    // Return the providers
+    return providers;
+};
--- a/src/@fuse/index.ts
+++ b/src/@fuse/index.ts
@@ -1 +1 @@
-export * from './fuse.module';
+export * from './fuse.provider';
--- a/src/@fuse/lib/mock-api/mock-api.interceptor.ts
+++ b/src/@fuse/lib/mock-api/mock-api.interceptor.ts
@@ -1,42 +1,24 @@
-import { Inject, Injectable } from '@angular/core';
-import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
-import { delay, Observable, of, switchMap, throwError } from 'rxjs';
+import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http';
+import { inject } from '@angular/core';
 import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
+import { delay, Observable, of, switchMap, throwError } from 'rxjs';

-@Injectable({
-    providedIn: 'root'
-})
-export class FuseMockApiInterceptor implements HttpInterceptor
+export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
 {
-    /**
-     * Constructor
-     */
-    constructor(
-        @Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
-        private _fuseMockApiService: FuseMockApiService
-    )
-    {
-    }
+    const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY);
+    const fuseMockApiService = inject(FuseMockApiService);

-    /**
-     * Intercept
-     *
-     * @param request
-     * @param next
-     */
-    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
-    {
    // Try to get the request handler
    const {
        handler,
-                  urlParams
-              } = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
+        urlParams,
+    } = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);

    // Pass through if the request handler does not exist
    if ( !handler )
    {
-            return next.handle(request);
+        return next(request);
    }

    // Set the intercepted request on the handler
@@ -47,9 +29,9 @@ export class FuseMockApiInterceptor implements HttpInterceptor

    // Subscribe to the response function observable
    return handler.response.pipe(
-            delay(handler.delay ?? this._defaultDelay ?? 0),
-            switchMap((response) => {
-
+        delay(handler.delay ?? defaultDelay ?? 0),
+        switchMap((response) =>
+        {
            // If there is no response data,
            // throw an error response
            if ( !response )
@@ -57,7 +39,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                response = new HttpErrorResponse({
                    error     : 'NOT FOUND',
                    status    : 404,
-                        statusText: 'NOT FOUND'
+                    statusText: 'NOT FOUND',
                });

                return throwError(response);
@@ -66,7 +48,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
            // Parse the response data
            const data = {
                status: response[0],
-                    body  : response[1]
+                body  : response[1],
            };

            // If the status code is in between 200 and 300,
@@ -76,7 +58,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                response = new HttpResponse({
                    body      : data.body,
                    status    : data.status,
-                        statusText: 'OK'
+                    statusText: 'OK',
                });

                return of(response);
@@ -87,10 +69,9 @@ export class FuseMockApiInterceptor implements HttpInterceptor
            response = new HttpErrorResponse({
                error     : data.body.error,
                status    : data.status,
-                    statusText: 'ERROR'
+                statusText: 'ERROR',
            });

            return throwError(response);
        }));
-    }
-}
+};
--- a/src/@fuse/lib/mock-api/mock-api.module.ts
+++ b/src/@fuse/lib/mock-api/mock-api.module.ts
@@ -1,42 +0,0 @@
-import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
-import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
-
-@NgModule({
-    providers: [
-        {
-            provide : HTTP_INTERCEPTORS,
-            useClass: FuseMockApiInterceptor,
-            multi   : true
-        }
-    ]
-})
-export class FuseMockApiModule
-{
-    /**
-     * FuseMockApi module default configuration.
-     *
-     * @param mockApiServices - Array of services that register mock API handlers
-     * @param config - Configuration options
-     * @param config.delay - Default delay value in milliseconds to apply all responses
-     */
-    static forRoot(mockApiServices: any[], config?: { delay?: number }): ModuleWithProviders<FuseMockApiModule>
-    {
-        return {
-            ngModule : FuseMockApiModule,
-            providers: [
-                {
-                    provide   : APP_INITIALIZER,
-                    deps      : [...mockApiServices],
-                    useFactory: () => (): any => null,
-                    multi     : true
-                },
-                {
-                    provide : FUSE_MOCK_API_DEFAULT_DELAY,
-                    useValue: config?.delay ?? 0
-                }
-            ]
-        };
-    }
-}
--- a/src/@fuse/lib/mock-api/mock-api.request-handler.ts
+++ b/src/@fuse/lib/mock-api/mock-api.request-handler.ts
@@ -1,6 +1,6 @@
 import { HttpRequest } from '@angular/common/http';
-import { Observable, of, take, throwError } from 'rxjs';
 import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
+import { Observable, of, take, throwError } from 'rxjs';

 export class FuseMockApiHandler
 {
@@ -17,7 +17,7 @@ export class FuseMockApiHandler
     */
    constructor(
        public url: string,
-        public delay?: number
+        public delay?: number,
    )
    {
    }
@@ -55,7 +55,7 @@ export class FuseMockApiHandler
        // Execute the reply callback
        const replyResult = this._reply({
            request  : this.request,
-            urlParams: this.urlParams
+            urlParams: this.urlParams,
        });

        // If the result of the reply callback is an observable...
--- a/src/@fuse/lib/mock-api/mock-api.service.ts
+++ b/src/@fuse/lib/mock-api/mock-api.service.ts
@@ -1,11 +1,9 @@
 import { Injectable } from '@angular/core';
-import { compact, fromPairs } from 'lodash-es';
 import { FuseMockApiHandler } from '@fuse/lib/mock-api/mock-api.request-handler';
 import { FuseMockApiMethods } from '@fuse/lib/mock-api/mock-api.types';
+import { compact, fromPairs } from 'lodash-es';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseMockApiService
 {
    private _handlers: { [key: string]: Map<string, FuseMockApiHandler> } = {
@@ -16,7 +14,7 @@ export class FuseMockApiService
        'put'    : new Map<string, FuseMockApiHandler>(),
        'head'   : new Map<string, FuseMockApiHandler>(),
        'jsonp'  : new Map<string, FuseMockApiHandler>(),
-        'options': new Map<string, FuseMockApiHandler>()
+        'options': new Map<string, FuseMockApiHandler>(),
    };

    /**
@@ -42,7 +40,7 @@ export class FuseMockApiService
        // Prepare the return object
        const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
            handler  : undefined,
-            urlParams: {}
+            urlParams: {},
        };

        // Split the url
@@ -52,8 +50,8 @@ export class FuseMockApiService
        const handlers = this._handlers[method.toLowerCase()];

        // Iterate through the handlers
-        handlers.forEach((handler, handlerUrl) => {
-
+        handlers.forEach((handler, handlerUrl) =>
+        {
            // Skip if there is already a matching handler
            if ( matchingHandler.handler )
            {
@@ -80,7 +78,7 @@ export class FuseMockApiService

                // Extract and assign the parameters
                matchingHandler.urlParams = fromPairs(compact(handlerUrlParts.map((handlerUrlPart, index) =>
-                    handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined
+                    handlerUrlPart.startsWith(':') ? [handlerUrlPart.substring(1), urlParts[index]] : undefined,
                )));
            }
        });
--- a/src/@fuse/lib/mock-api/mock-api.utils.ts
+++ b/src/@fuse/lib/mock-api/mock-api.utils.ts
@@ -26,7 +26,8 @@ export class FuseMockApiUtils
            d += performance.now();
        }

-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
+        {
            const r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
--- a/src/@fuse/lib/mock-api/public-api.ts
+++ b/src/@fuse/lib/mock-api/public-api.ts
@@ -1,5 +1,5 @@
 export * from '@fuse/lib/mock-api/mock-api.constants';
-export * from '@fuse/lib/mock-api/mock-api.module';
+export * from '@fuse/lib/mock-api/mock-api.interceptor';
 export * from '@fuse/lib/mock-api/mock-api.service';
 export * from '@fuse/lib/mock-api/mock-api.types';
 export * from '@fuse/lib/mock-api/mock-api.utils';
--- a/src/@fuse/pipes/find-by-key/find-by-key.module.ts
+++ b/src/@fuse/pipes/find-by-key/find-by-key.module.ts
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
-
-@NgModule({
-    declarations: [
-        FuseFindByKeyPipe
-    ],
-    exports     : [
-        FuseFindByKeyPipe
-    ]
-})
-export class FuseFindByKeyPipeModule
-{
-}
--- a/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
+++ b/src/@fuse/pipes/find-by-key/find-by-key.pipe.ts
@@ -4,8 +4,9 @@ import { Pipe, PipeTransform } from '@angular/core';
 * Finds an object from given source using the given key - value pairs
 */
@Pipe({
-    name: 'fuseFindByKey',
-    pure: false
+    name      : 'fuseFindByKey',
+    pure      : false,
+    standalone: true,
 })
 export class FuseFindByKeyPipe implements PipeTransform
 {
--- a/src/@fuse/services/config/config.constants.ts
+++ b/src/@fuse/services/config/config.constants.ts
@@ -1,3 +1,3 @@
 import { InjectionToken } from '@angular/core';

-export const FUSE_APP_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
+export const FUSE_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
--- a/src/@fuse/services/config/config.module.ts
+++ b/src/@fuse/services/config/config.module.ts
@@ -1,32 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { FuseConfigService } from '@fuse/services/config/config.service';
-import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
-
-@NgModule()
-export class FuseConfigModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseConfigService: FuseConfigService)
-    {
-    }
-
-    /**
-     * forRoot method for setting user configuration
-     *
-     * @param config
-     */
-    static forRoot(config: any): ModuleWithProviders<FuseConfigModule>
-    {
-        return {
-            ngModule : FuseConfigModule,
-            providers: [
-                {
-                    provide : FUSE_APP_CONFIG,
-                    useValue: config
-                }
-            ]
-        };
-    }
-}
--- a/src/@fuse/services/config/config.service.ts
+++ b/src/@fuse/services/config/config.service.ts
@@ -1,11 +1,9 @@
 import { Inject, Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
 import { merge } from 'lodash-es';
-import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
+import { BehaviorSubject, Observable } from 'rxjs';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseConfigService
 {
    private _config: BehaviorSubject<any>;
@@ -13,7 +11,7 @@ export class FuseConfigService
    /**
     * Constructor
     */
-    constructor(@Inject(FUSE_APP_CONFIG) config: any)
+    constructor(@Inject(FUSE_CONFIG) config: any)
    {
        // Private
        this._config = new BehaviorSubject(config);
--- a/src/@fuse/services/config/config.types.ts
+++ b/src/@fuse/services/config/config.types.ts
@@ -0,0 +1,18 @@
+// Types
+export type Scheme = 'auto' | 'dark' | 'light';
+export type Screens = { [key: string]: string };
+export type Theme = 'theme-default' | string;
+export type Themes = { id: string; name: string }[];
+
+/**
+ * AppConfig interface. Update this interface to strictly type your config
+ * object.
+ */
+export interface FuseConfig
+{
+    layout: string;
+    scheme: Scheme;
+    screens: Screens;
+    theme: Theme;
+    themes: Themes;
+}
--- a/src/@fuse/services/config/public-api.ts
+++ b/src/@fuse/services/config/public-api.ts
@@ -1,2 +1,2 @@
-export * from '@fuse/services/config/config.module';
 export * from '@fuse/services/config/config.service';
+export * from '@fuse/services/config/config.types';
--- a/src/@fuse/services/confirmation/confirmation.module.ts
+++ b/src/@fuse/services/confirmation/confirmation.module.ts
@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
-import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-    declarations: [
-        FuseConfirmationDialogComponent
-    ],
-    imports     : [
-        MatButtonModule,
-        MatDialogModule,
-        MatIconModule,
-        CommonModule
-    ],
-    providers   : [
-        FuseConfirmationService
-    ]
-})
-export class FuseConfirmationModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseConfirmationService: FuseConfirmationService)
-    {
-    }
-}
--- a/src/@fuse/services/confirmation/confirmation.service.ts
+++ b/src/@fuse/services/confirmation/confirmation.service.ts
@@ -1,40 +1,39 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { merge } from 'lodash-es';
-import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { merge } from 'lodash-es';

-@Injectable()
+@Injectable({providedIn: 'root'})
 export class FuseConfirmationService
 {
+    private _matDialog: MatDialog = inject(MatDialog);
    private _defaultConfig: FuseConfirmationConfig = {
        title      : 'Confirm action',
        message    : 'Are you sure you want to confirm this action?',
        icon       : {
            show : true,
-            name : 'heroicons_outline:exclamation',
-            color: 'warn'
+            name : 'heroicons_outline:exclamation-triangle',
+            color: 'warn',
        },
        actions    : {
            confirm: {
                show : true,
                label: 'Confirm',
-                color: 'warn'
+                color: 'warn',
            },
            cancel : {
                show : true,
-                label: 'Cancel'
-            }
+                label: 'Cancel',
            },
-        dismissible: false
+        },
+        dismissible: false,
    };

    /**
     * Constructor
     */
-    constructor(
-        private _matDialog: MatDialog
-    )
+    constructor()
    {
    }

@@ -52,7 +51,7 @@ export class FuseConfirmationService
            autoFocus   : false,
            disableClose: !userConfig.dismissible,
            data        : userConfig,
-            panelClass  : 'fuse-confirmation-dialog-panel'
+            panelClass  : 'fuse-confirmation-dialog-panel',
        });
    }
 }
--- a/src/@fuse/services/confirmation/dialog/dialog.component.html
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.html
@@ -8,7 +8,7 @@
                [matDialogClose]="undefined">
                <mat-icon
                    class="text-secondary"
-                    [svgIcon]="'heroicons_outline:x'"></mat-icon>
+                    [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
            </button>
        </div>
    </ng-container>
--- a/src/@fuse/services/confirmation/dialog/dialog.component.ts
+++ b/src/@fuse/services/confirmation/dialog/dialog.component.ts
@@ -1,5 +1,8 @@
+import { NgClass, NgIf } from '@angular/common';
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';

@Component({
@@ -8,17 +11,23 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
    styles       : [
        `
            .fuse-confirmation-dialog-panel {
+
                @screen md {
                    @apply w-128;
                }

-                .mat-dialog-container {
+                .mat-mdc-dialog-container {
+
+                    .mat-mdc-dialog-surface {
                        padding: 0 !important;
                    }
                }
-        `
+            }
+        `,
    ],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone   : true,
+    imports      : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
 })
 export class FuseConfirmationDialogComponent
 {
--- a/src/@fuse/services/confirmation/public-api.ts
+++ b/src/@fuse/services/confirmation/public-api.ts
@@ -1,3 +1,2 @@
-export * from '@fuse/services/confirmation/confirmation.module';
 export * from '@fuse/services/confirmation/confirmation.service';
 export * from '@fuse/services/confirmation/confirmation.types';
--- a/src/@fuse/services/loading/loading.interceptor.ts
+++ b/src/@fuse/services/loading/loading.interceptor.ts
@@ -1,48 +1,33 @@
-import { Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { finalize, Observable } from 'rxjs';
+import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import { inject } from '@angular/core';
 import { FuseLoadingService } from '@fuse/services/loading/loading.service';
+import { finalize, Observable, take } from 'rxjs';

-@Injectable()
-export class FuseLoadingInterceptor implements HttpInterceptor
+export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
 {
-    handleRequestsAutomatically: boolean;
+    const fuseLoadingService = inject(FuseLoadingService);
+    let handleRequestsAutomatically = false;

-    /**
-     * Constructor
-     */
-    constructor(
-        private _fuseLoadingService: FuseLoadingService
-    )
+    fuseLoadingService.auto$
+        .pipe(take(1))
+        .subscribe((value) =>
        {
-        // Subscribe to the auto
-        this._fuseLoadingService.auto$
-            .subscribe((value) => {
-                this.handleRequestsAutomatically = value;
+            handleRequestsAutomatically = value;
        });
-    }

-    /**
-     * Intercept
-     *
-     * @param req
-     * @param next
-     */
-    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
-    {
    // If the Auto mode is turned off, do nothing
-        if ( !this.handleRequestsAutomatically )
+    if ( !handleRequestsAutomatically )
    {
-            return next.handle(req);
+        return next(req);
    }

    // Set the loading status to true
-        this._fuseLoadingService._setLoadingStatus(true, req.url);
+    fuseLoadingService._setLoadingStatus(true, req.url);

-        return next.handle(req).pipe(
-            finalize(() => {
+    return next(req).pipe(
+        finalize(() =>
+        {
            // Set the status to false if there are any errors or the request is completed
-                this._fuseLoadingService._setLoadingStatus(false, req.url);
+            fuseLoadingService._setLoadingStatus(false, req.url);
        }));
-    }
-}
+};
--- a/src/@fuse/services/loading/loading.module.ts
+++ b/src/@fuse/services/loading/loading.module.ts
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
-
-@NgModule({
-    providers: [
-        {
-            provide : HTTP_INTERCEPTORS,
-            useClass: FuseLoadingInterceptor,
-            multi   : true
-        }
-    ]
-})
-export class FuseLoadingModule
-{
-}
--- a/src/@fuse/services/loading/loading.service.ts
+++ b/src/@fuse/services/loading/loading.service.ts
@@ -1,10 +1,8 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseLoadingService
 {
    private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
--- a/src/@fuse/services/loading/public-api.ts
+++ b/src/@fuse/services/loading/public-api.ts
@@ -1,2 +1,2 @@
 export * from '@fuse/services/loading/loading.service';
-export * from '@fuse/services/loading/loading.module';
+export * from '@fuse/services/loading/loading.interceptor';
--- a/src/@fuse/services/media-watcher/media-watcher.module.ts
+++ b/src/@fuse/services/media-watcher/media-watcher.module.ts
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watcher.service';
-
-@NgModule({
-    providers: [
-        FuseMediaWatcherService
-    ]
-})
-export class FuseMediaWatcherModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseMediaWatcherService: FuseMediaWatcherService)
-    {
-    }
-}
--- a/src/@fuse/services/media-watcher/media-watcher.service.ts
+++ b/src/@fuse/services/media-watcher/media-watcher.service.ts
@@ -1,10 +1,10 @@
-import { Injectable } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
-import { fromPairs } from 'lodash-es';
+import { Injectable } from '@angular/core';
 import { FuseConfigService } from '@fuse/services/config';
+import { fromPairs } from 'lodash-es';
+import { map, Observable, ReplaySubject, switchMap } from 'rxjs';

-@Injectable()
+@Injectable({providedIn: 'root'})
 export class FuseMediaWatcherService
 {
    private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1);
@@ -14,14 +14,14 @@ export class FuseMediaWatcherService
     */
    constructor(
        private _breakpointObserver: BreakpointObserver,
-        private _fuseConfigService: FuseConfigService
+        private _fuseConfigService: FuseConfigService,
    )
    {
        this._fuseConfigService.config$.pipe(
            map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
            switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
-                map((state) => {
-
+                map((state) =>
+                {
                    // Prepare the observable values and set their defaults
                    const matchingAliases: string[] = [];
                    const matchingQueries: any = {};
@@ -44,10 +44,10 @@ export class FuseMediaWatcherService
                    // Execute the observable
                    this._onMediaChange.next({
                        matchingAliases,
-                        matchingQueries
+                        matchingQueries,
                    });
-                })
-            ))
+                }),
+            )),
        ).subscribe();
    }

--- a/src/@fuse/services/media-watcher/public-api.ts
+++ b/src/@fuse/services/media-watcher/public-api.ts
@@ -1,2 +1 @@
-export * from '@fuse/services/media-watcher/media-watcher.module';
 export * from '@fuse/services/media-watcher/media-watcher.service';
--- a/src/@fuse/services/platform/platform.module.ts
+++ b/src/@fuse/services/platform/platform.module.ts
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FusePlatformService } from '@fuse/services/platform/platform.service';
-
-@NgModule({
-    providers: [
-        FusePlatformService
-    ]
-})
-export class FusePlatformModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fusePlatformService: FusePlatformService)
-    {
-    }
-}
--- a/src/@fuse/services/platform/platform.service.ts
+++ b/src/@fuse/services/platform/platform.service.ts
@@ -1,9 +1,7 @@
-import { Injectable } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { Injectable } from '@angular/core';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FusePlatformService
 {
    osName = 'os-unknown';
--- a/src/@fuse/services/splash-screen/public-api.ts
+++ b/src/@fuse/services/splash-screen/public-api.ts
@@ -1,2 +1 @@
-export * from '@fuse/services/splash-screen/splash-screen.module';
 export * from '@fuse/services/splash-screen/splash-screen.service';
--- a/src/@fuse/services/splash-screen/splash-screen.module.ts
+++ b/src/@fuse/services/splash-screen/splash-screen.module.ts
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-screen.service';
-
-@NgModule({
-    providers: [
-        FuseSplashScreenService
-    ]
-})
-export class FuseSplashScreenModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseSplashScreenService: FuseSplashScreenService)
-    {
-    }
-}
--- a/src/@fuse/services/splash-screen/splash-screen.service.ts
+++ b/src/@fuse/services/splash-screen/splash-screen.service.ts
@@ -1,9 +1,9 @@
-import { Inject, Injectable } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, take } from 'rxjs';

-@Injectable()
+@Injectable({providedIn: 'root'})
 export class FuseSplashScreenService
 {
    /**
@@ -11,16 +11,17 @@ export class FuseSplashScreenService
     */
    constructor(
        @Inject(DOCUMENT) private _document: any,
-        private _router: Router
+        private _router: Router,
    )
    {
        // Hide it on the first NavigationEnd event
        this._router.events
            .pipe(
                filter(event => event instanceof NavigationEnd),
-                take(1)
+                take(1),
            )
-            .subscribe(() => {
+            .subscribe(() =>
+            {
                this.hide();
            });
    }
--- a/src/@fuse/services/utils/public-api.ts
+++ b/src/@fuse/services/utils/public-api.ts
@@ -1,2 +1 @@
-export * from '@fuse/services/utils/utils.module';
 export * from '@fuse/services/utils/utils.service';
--- a/src/@fuse/services/utils/utils.module.ts
+++ b/src/@fuse/services/utils/utils.module.ts
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
-
-@NgModule({
-    providers: [
-        FuseUtilsService
-    ]
-})
-export class FuseUtilsModule
-{
-    /**
-     * Constructor
-     */
-    constructor(private _fuseUtilsService: FuseUtilsService)
-    {
-    }
-}
--- a/src/@fuse/services/utils/utils.service.ts
+++ b/src/@fuse/services/utils/utils.service.ts
@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';

-@Injectable({
-    providedIn: 'root'
-})
+@Injectable({providedIn: 'root'})
 export class FuseUtilsService
 {
    /**
@@ -26,7 +24,7 @@ export class FuseUtilsService
            paths       : 'exact',
            fragment    : 'ignored',
            matrixParams: 'ignored',
-            queryParams : 'exact'
+            queryParams : 'exact',
        };
    }

@@ -39,7 +37,7 @@ export class FuseUtilsService
            paths       : 'subset',
            fragment    : 'ignored',
            matrixParams: 'ignored',
-            queryParams : 'subset'
+            queryParams : 'subset',
        };
    }

--- a/src/@fuse/styles/components/input.scss
+++ b/src/@fuse/styles/components/input.scss
@@ -20,22 +20,22 @@ textarea {
    }

    &:-webkit-autofill {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
    }

    &:-webkit-autofill:hover {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
    }

    &:-webkit-autofill:focus {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
    }

    &:-webkit-autofill:active {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
+    }
+
+    [data-autocompleted] {
+        background-color: transparent !important;
    }
 }
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
--- a/src/@fuse/styles/tailwind.scss
+++ b/src/@fuse/styles/tailwind.scss
@@ -63,11 +63,15 @@
        -webkit-text-fill-color: currentColor;
    }

+    /* Set the background and foreground colors */
    body, .dark, .light {
        @apply text-default bg-default #{'!important'};
    }

-    *, *::before, *::after {
+    /* Set the border color */
+    *,
+    ::before,
+    ::after {
        --tw-border-opacity: 1 !important;
        border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));

@@ -116,6 +120,7 @@
        }
    }

+    /* Set the foreground color for disabled elements */
    [disabled] * {
        @apply text-disabled #{'!important'};
    }
--- a/src/@fuse/styles/themes.scss
+++ b/src/@fuse/styles/themes.scss
@@ -1,75 +1,9 @@
-@use '@angular/material' as mat;
@use "sass:map";
+@use '@angular/material' as mat;
+@use "user-themes" as userThemes;

-/* Include the core Angular Material styles */
-@include mat.core();
-
-/* Create a base theme without color.
-    This will globally set the density and typography for all future color themes. */
-@include mat.all-component-themes((
-    color: null,
-    density: -2,
-    typography: mat.define-typography-config(
-        $font-family: theme('fontFamily.sans'),
-        $title: mat.define-typography-level(1.25rem, 2rem, 600),
-        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-        $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-        $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
-    )
-));
-
-/* Generate Primary, Accent and Warn palettes */
-$palettes: ();
-@each $name in (primary, accent, warn) {
-    $palettes: map.merge($palettes, (#{$name}: (
-        50: var(--fuse-#{$name}-50),
-        100: var(--fuse-#{$name}-100),
-        200: var(--fuse-#{$name}-200),
-        300: var(--fuse-#{$name}-300),
-        400: var(--fuse-#{$name}-400),
-        500: var(--fuse-#{$name}-500),
-        600: var(--fuse-#{$name}-600),
-        700: var(--fuse-#{$name}-700),
-        800: var(--fuse-#{$name}-800),
-        900: var(--fuse-#{$name}-900),
-        contrast: (
-            50: var(--fuse-on-#{$name}-50),
-            100: var(--fuse-on-#{$name}-100),
-            200: var(--fuse-on-#{$name}-200),
-            300: var(--fuse-on-#{$name}-300),
-            400: var(--fuse-on-#{$name}-400),
-            500: var(--fuse-on-#{$name}-500),
-            600: var(--fuse-on-#{$name}-600),
-            700: var(--fuse-on-#{$name}-700),
-            800: var(--fuse-on-#{$name}-800),
-            900: var(--fuse-on-#{$name}-900)
-        ),
-        default: var(--fuse-#{$name}),
-        lighter: var(--fuse-#{$name}-100),
-        darker: var(--fuse-#{$name}-700),
-        text: var(--fuse-#{$name}),
-        default-contrast: var(--fuse-on-#{$name}),
-        lighter-contrast: var(--fuse-on-#{$name}-100),
-        darker-contrast: var(--fuse-on-#{$name}-700)
-    )));
-}
-
-/* Generate Angular Material themes. Since we are using CSS Custom Properties,
-    we don't have to generate a separate Angular Material theme for each color
-    set. We can just create one light and one dark theme and then switch the
-    CSS Custom Properties to dynamically switch the colors. */
-body.light,
-body .light {
-    $base-light-theme: mat.define-light-theme((
-        color: ($palettes)
-    ));
-
-    $light-theme: (
-        color: (
-            primary: map.get(map.get($base-light-theme, color), primary),
-            accent: map.get(map.get($base-light-theme, color), accent),
-            warn: map.get(map.get($base-light-theme, color), warn),
-            is-dark: map.get(map.get($base-light-theme, color), is-dark),
+/* Set the base colors for light themes */
+$light-base: (
    foreground: (
        base: #000000,
        divider: #E2E8F0, /* slate.200 */
@@ -105,25 +39,10 @@ body .light {
        disabled-list-option: #CBD5E1, /* slate.300 */
        tooltip: #1E293B /* slate.800 */
    )
-        )
-    );
+);

-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($light-theme);
-}
-
-body.dark,
-body .dark {
-    $base-dark-theme: mat.define-dark-theme((
-        color: ($palettes)
-    ));
-
-    $dark-theme: (
-        color: (
-            primary: map.get(map.get($base-dark-theme, color), primary),
-            accent: map.get(map.get($base-dark-theme, color), accent),
-            warn: map.get(map.get($base-dark-theme, color), warn),
-            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
+/* Set the base colors for dark themes */
+$dark-base: (
    foreground: (
        base: #FFFFFF,
        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
@@ -159,9 +78,87 @@ body .dark {
        disabled-list-option: #E2E8F0, /* slate.200 */
        tooltip: #64748B /* slate.500 */
    )
+);
+
+/* Include the core Angular Material styles */
+@include mat.core();
+
+/* Create a base theme without any color to set the density and typography */
+@include mat.all-component-themes((
+    color: null,
+    density: 0,
+    typography: mat.define-typography-config(
+        $font-family: theme('fontFamily.sans'),
+        $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+        $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+        $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+        $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+        $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+        $button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+        $overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
    )
+));
+
+/* Loop through user themes and generate Angular Material themes */
+@each $name, $theme in userThemes.$user-themes {
+
+    /* Generate the palettes */
+    $palettes: ();
+    @each $name in (primary, accent, warn) {
+
+        /* Define the Angular Material theme */
+        $palette: mat.define-palette(map.get($theme, $name));
+
+        /* Replace the default colors on the defined Material palette */
+        $palette: map.merge($palette, (
+            default: map.get(map.get($theme, $name), DEFAULT),
+            lighter: map.get(map.get($theme, $name), 100),
+            darker: map.get(map.get($theme, $name), 700),
+            text: map.get(map.get($theme, $name), DEFAULT),
+            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
+            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
+            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
+        ));
+
+        $palettes: map.merge($palettes, (#{$name}: $palette));
+    }
+
+    /* Define a light & dark Angular Material theme with the generated palettes */
+    $light-theme: mat.define-light-theme((
+        color: $palettes
+    ));
+
+    $dark-theme: mat.define-dark-theme((
+        color: $palettes
+    ));
+
+    /* Merge the custom base colors with the generated themes */
+    $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
+    $light-theme: map.merge(
+            (color: $light-theme-colors),
+            $light-theme-colors
    );

-    /* Use all-component-colors to only generate the colors */
+    $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
+    $dark-theme: map.merge(
+            (color: $dark-theme-colors),
+            $dark-theme-colors
+    );
+
+    /* Generate and encapsulate Angular Material themes */
+    #{map.get($theme, selector)} .light,
+    #{map.get($theme, selector)}.light {
+        @include mat.all-component-colors($light-theme);
+    }
+
+    #{map.get($theme, selector)} .dark,
+    #{map.get($theme, selector)}.dark {
        @include mat.all-component-colors($dark-theme);
+    }
 }
--- a/src/@fuse/styles/user-themes.scss
+++ b/src/@fuse/styles/user-themes.scss
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	3175a2faae	Updated Heroicons icons	2023-05-30 11:58:30 +03:00
Sercan Yemen	e23a21eedf	Finalized standalone components conversion	2023-05-30 09:26:50 +03:00
Sercan Yemen	5d42763f1b	Second pass through for standalone components.	2023-05-15 14:36:38 +03:00
Sercan Yemen	b2cb20634e	First pass through updating standalone components.	2023-05-04 13:29:53 +03:00
Sercan Yemen	715ab6a3aa	Reverted back to "canActivate" & "canActivateChild" Converted guards to functional guards	2023-01-22 22:49:25 +03:00
Sercan Yemen	1e8c284c93	Added release date to the changelog	2023-01-19 11:20:22 +03:00
Sercan Yemen	7efe9d5950	Fixed: Tooltip background color	2023-01-19 11:10:04 +03:00
Sercan Yemen	e380f754d7	Updated Angular & Angular Material	2023-01-19 11:09:20 +03:00
Sercan Yemen	e39ec222d0	Updated Angular & Angular Material versions Updated various other packages Updated changelog and the version number	2022-12-12 14:50:08 +03:00
Sercan Yemen	685e981438	(@fuse/overrides/angular-material) Fixed: Tailwind breaks the disabled mat-checkbox styling	2022-12-07 19:38:51 +03:00
Sercan Yemen	ba8689ed0c	(core) Use the new "CanMatch" rather than "CanLoad" and "CanActivate" for routes	2022-12-02 14:17:05 +03:00
Sercan Yemen	41a1692e01	(@fuse) Fixed: Autocompleted input background color is not correct	2022-11-25 15:06:42 +03:00
Sercan Yemen	d4736e2c02	(@fuse) Removed the unnecessary map wrap	2022-11-25 11:49:21 +03:00
Sercan Yemen	1968227e19	Updated the version number and the changelog	2022-11-21 09:06:42 +03:00
Sercan Yemen	28180c7491	(@fuse/confirmation-dialog) Fixed: Dialog padding is broken because of MDC component class names	2022-11-20 14:11:00 +03:00
Sercan Yemen	de7a598c07	Updated the meta tags for the Demo	2022-11-18 11:14:00 +03:00
Sercan Yemen	8ae3cdfbea	Updated the changelog	2022-11-18 11:07:04 +03:00
Sercan Yemen	533e39261b	(Dependencies) Removed ngx-markdown package, you can keep using it if you need, we will remove anything that slow us down in terms of updates	2022-11-18 09:38:54 +03:00
Sercan Yemen	7870e312b9	(Dependencies) Updated various other dependencies	2022-11-17 13:11:55 +03:00
Sercan Yemen	1662042e35	(Dependencies) Updated the Angular & Angular Material to v15 stable	2022-11-17 13:10:53 +03:00
Sercan Yemen	08266c3e51	Updated the application to reflect the changes	2022-11-11 15:30:12 +03:00
Sercan Yemen	8000e53bae	(overrides/angular-material) Tweaks and improvements	2022-11-11 15:29:56 +03:00
Sercan Yemen	8fbef029c0	Updated the Fuse version number and the changelog	2022-11-11 13:25:34 +03:00
Sercan Yemen	b7b849ee60	Second step of upgrading to Angular Material v15 (MDC). Almost re-wrote the entire override styles to make sure MDC components will look correct.	2022-11-11 13:21:04 +03:00
Sercan Yemen	872dffe42b	Updated Angular to v15-rc.3 and Angular Material to v15-rc.2	2022-11-10 14:16:05 +03:00
Sercan Yemen	646b084a12	Only write the user themes file if the map has been changed. This fixes the issue where watcher being triple triggered on cold starts.	2022-11-08 12:47:38 +03:00
Sercan Yemen	c88d30a4f4	Removed the linter from the default project since linting mostly done using Editors and IDEs	2022-11-07 11:04:27 +03:00
Sercan Yemen	f2d5bf3041	Matched the files and folders to be the same with a newly generated Angular v15 project	2022-11-07 11:01:23 +03:00
Sercan Yemen	388456b937	First step for upgrading to Angular & Angular Material v15	2022-11-07 10:07:27 +03:00
Sercan Yemen	127280c040	Updated version number, packages and the changelog	2022-10-04 10:27:41 +03:00
Sercan Yemen	cad7cd43f0	(ui/forms/fields) Added examples of number fields	2022-10-03 11:12:56 +03:00
Sercan Yemen	41756200ca	(apps/mailbox) Fixed: Back button on details view is not working	2022-10-02 21:13:30 +03:00
Sercan Yemen	4a5f641c1c	(layout/common/quick-chat) Fixed: Firefox doesn't like having sticky positioned elements inside a fixed positioned parent. This fix implements a mutation observer for '.cdk-global-scrollblock'.	2022-09-06 11:49:16 +03:00
Sercan Yemen	39ad558455	(FuseVerticalNavigation) Fixed: Firefox doesn't like having sticky positioned elements inside a fixed positioned parent. This fix implements a mutation observer for '.cdk-global-scrollblock'.	2022-09-06 11:49:05 +03:00
Sercan Yemen	404c4f5c07	Replace Moment with Luxon, closes #183 Big thanks to @steveschmitt for the majority of the work.	2022-08-24 13:15:38 +03:00
Sercan Yemen	51ee16ed93	(app.resolvers) Removed the extra user getter call since the user data already comes with the sign-in process to prevent confusion for the newcomers	2022-08-24 11:06:58 +03:00
Steve Schmitt	607f2afa90	Merge branch 'demo' into luxon	2022-08-22 08:11:29 -07:00
Sercan Yemen	baf35619bd	Merge branch 'dev' into dev-starter	2022-08-22 11:19:48 +03:00
Sercan Yemen	6599587e31	(dependencies) Updated Angular & Angular Material & various other packages Updated the version number and changelog	2022-08-22 11:06:45 +03:00
Sercan Yemen	3fa878b3f2	(apps/mailbox) Better label toggle behavior (apps/tasks) Better tag toggle behavior	2022-08-22 10:53:19 +03:00
Sercan Yemen	a24bc3fc95	(tailwind) Removed the "aspect-ratio" plugin in favor of included "aspect" utility	2022-08-10 13:08:52 +03:00
Sercan Yemen	9b1c0f2541	(dashboards/project) Removed unnecessary classes from the buttons	2022-08-05 13:36:00 +03:00
Sercan Yemen	3ba64abf6e	(tailwind.config) Fixed: typo on comment	2022-07-26 10:50:14 +03:00
Sercan Yemen	82ed80e35d	(@fuse/tailwind/plugins/theming) Simplified the plugin and added more detailed comments	2022-07-25 15:17:55 +03:00
Sercan Yemen	72a63b30ca	(docs) Fixed: Typos	2022-07-24 12:49:29 +03:00
Sercan Yemen	d2b37efed4	(layout/common/messages) Fixed: Wrong color classes on "No Messages" icon (layout/common/notifications) Fixed: Wrong color classes on "No Notifications" icon (layout/common/shortcuts) Fixed: Wrong color classes on "No Shortcuts" icon	2022-07-24 11:29:02 +03:00
Steve Schmitt	3adf9bee6e	Replace moment with luxon	2022-07-13 18:37:31 -07:00