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

# Conflicts:
#	src/app/app.routing.ts
#	src/app/mock-api/common/navigation/data.ts
#	src/app/modules/admin/apps/academy/academy.service.ts
#	src/app/modules/admin/apps/academy/details/details.component.html
#	src/app/modules/admin/apps/academy/list/list.component.html
#	src/app/modules/admin/apps/mailbox/list/list.component.ts
#	src/app/modules/admin/docs/changelog/changelog.ts
#	src/app/modules/admin/pages/pricing/modern/modern.component.html
#	src/app/modules/admin/pages/pricing/simple/simple.component.html
#	src/app/modules/admin/pages/pricing/single/single.component.html
#	src/app/modules/admin/pages/pricing/table/table.component.html

.browserslistrc

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

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 application will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

angular.json

@@ -20,9 +20,7 @@
                         "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "polyfills": [
+                        "polyfills": "src/polyfills.ts",
-                            "zone.js"
-                        ],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "allowedCommonJsDependencies": [
@@ -30,9 +28,7 @@
                             "highlight.js",
                             "crypto-js/enc-utf8",
                             "crypto-js/hmac-sha256",
-                            "crypto-js/enc-base64",
+                            "crypto-js/enc-base64"
-                            "flat",
-                            "quill"
                         ],
                         "assets": [
                             "src/favicon-16x16.png",
@@ -73,6 +69,12 @@
                                     "maximumError": "90kb"
                                 }
                             ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
                             "outputHashing": "all"
                         },
                         "development": {
@@ -107,11 +109,10 @@
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
-                        "polyfills": [
+                        "main": "src/test.ts",
-                            "zone.js",
+                        "polyfills": "src/polyfills.ts",
-                            "zone.js/testing"
-                        ],
                         "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
                         "inlineStyleLanguage": "scss",
                         "assets": [
                             "src/favicon-16x16.png",
@@ -123,8 +124,21 @@
                         ],
                         "scripts": []
                     }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": [
+                            "src/**/*.ts",
+                            "src/**/*.html"
+                        ]
+                    }
                 }
             }
         }
+    },
+    "defaultProject": "fuse",
+    "cli": {
+        "defaultCollection": "@angular-eslint/schematics"
     }
 }

karma.conf.js

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

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "fuse-angular",
+    "name": "@fuse/starter",
-    "version": "18.0.0",
+    "version": "14.0.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -10,57 +10,72 @@
         "start": "ng serve",
         "build": "ng build",
         "watch": "ng build --watch --configuration development",
-        "test": "ng test"
+        "test": "ng test",
+        "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "16.0.3",
+        "@angular/animations": "13.0.1",
-        "@angular/cdk": "16.0.2",
+        "@angular/cdk": "13.0.0",
-        "@angular/common": "16.0.3",
+        "@angular/common": "13.0.1",
-        "@angular/compiler": "16.0.3",
+        "@angular/compiler": "13.0.1",
-        "@angular/core": "16.0.3",
+        "@angular/core": "13.0.1",
-        "@angular/forms": "16.0.3",
+        "@angular/forms": "13.0.1",
-        "@angular/material": "16.0.2",
+        "@angular/material": "13.0.0",
-        "@angular/material-luxon-adapter": "16.0.2",
+        "@angular/material-moment-adapter": "13.0.0",
-        "@angular/platform-browser": "16.0.3",
+        "@angular/platform-browser": "13.0.1",
-        "@angular/platform-browser-dynamic": "16.0.3",
+        "@angular/platform-browser-dynamic": "13.0.1",
-        "@angular/router": "16.0.3",
+        "@angular/router": "13.0.1",
-        "@ngneat/transloco": "4.2.7",
+        "@ngneat/transloco": "3.1.0",
-        "apexcharts": "3.40.0",
+        "apexcharts": "3.29.0",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.8.0",
+        "highlight.js": "11.3.1",
         "lodash-es": "4.17.21",
-        "luxon": "3.3.0",
+        "moment": "2.29.1",
-        "ng-apexcharts": "1.7.6",
+        "ng-apexcharts": "1.5.12",
-        "ngx-quill": "22.0.0",
+        "ngx-markdown": "13.0.0",
-        "perfect-scrollbar": "1.5.5",
+        "ngx-quill": "16.0.1",
+        "perfect-scrollbar": "1.5.3",
         "quill": "1.3.7",
-        "rxjs": "7.8.1",
+        "rxjs": "7.4.0",
-        "tslib": "2.5.2",
+        "tslib": "2.3.1",
-        "zone.js": "0.13.0"
+        "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "16.0.3",
+        "@angular-devkit/build-angular": "13.0.2",
-        "@angular/cli": "16.0.3",
+        "@angular-eslint/builder": "12.6.1",
-        "@angular/compiler-cli": "16.0.3",
+        "@angular-eslint/eslint-plugin": "12.6.1",
-        "@tailwindcss/typography": "0.5.9",
+        "@angular-eslint/eslint-plugin-template": "12.6.1",
-        "@types/chroma-js": "2.4.0",
+        "@angular-eslint/schematics": "12.6.1",
+        "@angular-eslint/template-parser": "12.6.1",
+        "@angular/cli": "13.0.2",
+        "@angular/compiler-cli": "13.0.1",
+        "@tailwindcss/aspect-ratio": "0.3.0",
+        "@tailwindcss/line-clamp": "0.2.2",
+        "@tailwindcss/typography": "0.4.1",
+        "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.3.2",
+        "@types/jasmine": "3.10.2",
-        "@types/lodash": "4.14.195",
+        "@types/lodash": "4.14.176",
-        "@types/lodash-es": "4.17.7",
+        "@types/lodash-es": "4.17.5",
-        "@types/luxon": "3.3.0",
+        "@types/node": "12.20.37",
-        "autoprefixer": "10.4.14",
+        "@typescript-eslint/eslint-plugin": "5.3.1",
-        "chroma-js": "2.4.2",
+        "@typescript-eslint/parser": "5.3.1",
-        "jasmine-core": "5.0.0",
+        "autoprefixer": "10.4.0",
-        "karma": "6.4.2",
+        "chroma-js": "2.1.2",
-        "karma-chrome-launcher": "3.2.0",
+        "eslint": "7.32.0",
-        "karma-coverage": "2.2.0",
+        "eslint-plugin-import": "2.25.3",
-        "karma-jasmine": "5.1.0",
+        "eslint-plugin-jsdoc": "37.0.3",
-        "karma-jasmine-html-reporter": "2.0.0",
+        "eslint-plugin-prefer-arrow": "1.2.3",
+        "jasmine-core": "3.10.1",
+        "karma": "6.3.8",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-coverage": "2.0.3",
+        "karma-jasmine": "4.0.1",
+        "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.24",
+        "postcss": "8.3.11",
-        "tailwindcss": "3.3.2",
+        "tailwindcss": "2.2.19",
-        "typescript": "5.0.4"
+        "typescript": "4.4.4"
     }
 }

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 };

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 };

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
 ];

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 };

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 };

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 };

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

@@ -48,7 +48,7 @@
 
             <mat-icon
                 *ngIf="type === 'warning'"
-                [svgIcon]="'heroicons_solid:exclamation-triangle'"></mat-icon>
+                [svgIcon]="'heroicons_solid:exclamation'"></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-mark'"></mat-icon>
+        <mat-icon [svgIcon]="'heroicons_solid:x'"></mat-icon>
     </button>
 
 </div>

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

@@ -1,13 +1,10 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseAlertService } from '@fuse/components/alert/alert.service';
-import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 import { filter, Subject, takeUntil } from 'rxjs';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
+import { FuseAlertService } from '@fuse/components/alert/alert.service';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
     selector       : 'fuse-alert',
@@ -16,9 +13,7 @@ import { filter, Subject, takeUntil } from 'rxjs';
     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
 {
@@ -44,7 +39,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseAlertService: FuseAlertService,
-        private _fuseUtilsService: FuseUtilsService,
+        private _fuseUtilsService: FuseUtilsService
     )
     {
     }
@@ -58,7 +53,6 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
      */
     @HostBinding('class') get classList(): any
     {
-        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-alert-appearance-border' : this.appearance === 'border',
             'fuse-alert-appearance-fill'   : this.appearance === 'fill',
@@ -74,9 +68,8 @@ 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 */
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -124,10 +117,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();
             });
@@ -136,10 +129,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();
             });

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { FuseAlertComponent } from '@fuse/components/alert/alert.component';
+
+@NgModule({
+    declarations: [
+        FuseAlertComponent
+    ],
+    imports     : [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule
+    ],
+    exports     : [
+        FuseAlertComponent
+    ]
+})
+export class FuseAlertModule
+{
+}

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

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

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

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

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

@@ -1,6 +1,5 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgIf } from '@angular/common';
 import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseCardFace } from '@fuse/components/card/card.types';
 
@@ -10,9 +9,7 @@ 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
 {
@@ -41,14 +38,12 @@ export class FuseCardComponent implements OnChanges
      */
     @HostBinding('class') get classList(): any
     {
-        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-card-expanded'  : this.expanded,
             'fuse-card-face-back' : this.flippable && this.face === 'back',
             'fuse-card-face-front': this.flippable && this.face === 'front',
-            'fuse-card-flippable' : this.flippable,
+            'fuse-card-flippable' : this.flippable
         };
-        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     // -----------------------------------------------------------------------------------------------------

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseCardComponent } from '@fuse/components/card/card.component';
+
+@NgModule({
+    declarations: [
+        FuseCardComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseCardComponent
+    ]
+})
+export class FuseCardModule
+{
+}

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

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

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

@@ -1,16 +1,14 @@
 /* Variables */
-:root {
+$fuse-drawer-width: 320;
-    --fuse-drawer-width: 320px;
-}
 
 fuse-drawer {
     position: relative;
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
-    width: var(--fuse-drawer-width);
+    width: #{$fuse-drawer-width}px;
-    min-width: var(--fuse-drawer-width);
+    min-width: #{$fuse-drawer-width}px;
-    max-width: var(--fuse-drawer-width);
+    max-width: #{$fuse-drawer-width}px;
     z-index: 300;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .35);
     @apply bg-card;
@@ -45,7 +43,7 @@ fuse-drawer {
 
         /* Side mode */
         &.fuse-drawer-mode-side {
-            margin-left: calc(var(--fuse-drawer-width) * -1);
+            margin-left: -#{$fuse-drawer-width}px;
 
             &.fuse-drawer-opened {
                 margin-left: 0;
@@ -73,7 +71,7 @@ fuse-drawer {
 
         /* Side mode */
         &.fuse-drawer-mode-side {
-            margin-right: calc(var(--fuse-drawer-width) * -1);
+            margin-right: -#{$fuse-drawer-width}px;
 
             &.fuse-drawer-opened {
                 margin-right: 0;

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

@@ -1,17 +1,16 @@
-import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
+import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
     selector     : 'fuse-drawer',
     templateUrl  : './drawer.component.html',
     styleUrls    : ['./drawer.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseDrawer',
+    exportAs     : 'fuseDrawer'
-    standalone   : true,
 })
 export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -33,7 +32,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     @Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();
 
     private _animationsEnabled: boolean = false;
-    private readonly _handleOverlayClick: any;
     private _hovered: boolean = false;
     private _overlay: HTMLElement;
     private _player: AnimationPlayer;
@@ -46,13 +44,9 @@ 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.close();
-        };
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -64,16 +58,14 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      */
     @HostBinding('class') get classList(): any
     {
-        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-drawer-animations-enabled'         : this._animationsEnabled,
             'fuse-drawer-fixed'                      : this.fixed,
             'fuse-drawer-hover'                      : this._hovered,
             [`fuse-drawer-mode-${this.mode}`]        : true,
             'fuse-drawer-opened'                     : this.opened,
-            [`fuse-drawer-position-${this.position}`]: true,
+            [`fuse-drawer-position-${this.position}`]: true
         };
-        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     /**
@@ -82,7 +74,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     @HostBinding('style') get styleList(): any
     {
         return {
-            'visibility': this.opened ? 'visible' : 'hidden',
+            'visibility': this.opened ? 'visible' : 'hidden'
         };
     }
 
@@ -175,8 +167,7 @@ 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);
         }
@@ -327,6 +318,12 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Create the backdrop element
         this._overlay = this._renderer2.createElement('div');
 
+        // Return if overlay couldn't be create for some reason
+        if ( !this._overlay )
+        {
+            return;
+        }
+
         // Add a class to the backdrop element
         this._overlay.classList.add('fuse-drawer-overlay');
 
@@ -345,17 +342,27 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Append the backdrop to the parent of the drawer
         this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
 
-        // Create enter animation and attach it to the player
+        // Create the 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);
 
+        // Once the animation is done...
+        this._player.onDone(() => {
+
+            // Destroy the player
+            this._player.destroy();
+            this._player = null;
+        });
+
         // Play the animation
         this._player.play();
 
         // Add an event listener to the overlay
-        this._overlay.addEventListener('click', this._handleOverlayClick);
+        this._overlay.addEventListener('click', () => {
+            this.close();
+        });
     }
 
     /**
@@ -372,22 +379,23 @@ 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...
+            // Destroy the player
+            this._player.destroy();
+            this._player = null;
+
+            // If the backdrop still exists...
             if ( this._overlay )
             {
-                // Remove the event listener
+                // Remove the backdrop
-                this._overlay.removeEventListener('click', this._handleOverlayClick);
-
-                // Remove the overlay
                 this._overlay.parentNode.removeChild(this._overlay);
                 this._overlay = null;
             }

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
+
+@NgModule({
+    declarations: [
+        FuseDrawerComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseDrawerComponent
+    ]
+})
+export class FuseDrawerModule
+{
+}

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

@@ -1,7 +1,9 @@
 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>();

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

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

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

@@ -8,5 +8,5 @@
 
 <!-- Default icon -->
 <ng-template #defaultIconTpl>
-    <mat-icon [svgIcon]="'heroicons_outline:arrows-pointing-out'"></mat-icon>
+    <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
 </ng-template>

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

@@ -1,8 +1,5 @@
-import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { DOCUMENT } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
 
 @Component({
@@ -10,9 +7,7 @@ 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
 {

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

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

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

@@ -1,2 +1,3 @@
 export * from '@fuse/components/fullscreen/fullscreen.component';
+export * from '@fuse/components/fullscreen/fullscreen.module';
 export * from '@fuse/components/fullscreen/fullscreen.types';

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

@@ -1,4 +1,3 @@
-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';
@@ -9,9 +8,7 @@ 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
 {
@@ -31,7 +28,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _fuseHighlightService: FuseHighlightService,
-        private _viewContainerRef: ViewContainerRef,
+        private _viewContainerRef: ViewContainerRef
     )
     {
     }
@@ -126,7 +123,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

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

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

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

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import hljs from 'highlight.js';
 
-@Injectable({providedIn: 'root'})
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseHighlightService
 {
     /**
@@ -59,19 +61,19 @@ 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 )
-                {
-                    indentation = line.search(/\S|$/);
-                    return;
-                }
 
-                // Look at all the remaining lines to figure out the smallest indentation.
+                 // Always get the indentation of the first line so we can
-                indentation = Math.min(line.search(/\S|$/), indentation);
+                 // have something to compare with
-            });
+                 if ( index === 0 )
+                 {
+                     indentation = line.search(/\S|$/);
+                     return;
+                 }
+
+                 // Look at all the remaining lines to figure out the smallest indentation.
+                 indentation = Math.min(line.search(/\S|$/), indentation);
+             });
 
         // Iterate through the lines one more time, remove the extra
         // indentation, join them together and return it

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

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

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

@@ -1,18 +1,14 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgIf } from '@angular/common';
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FuseLoadingService } from '@fuse/services/loading';
 import { Subject, takeUntil } from 'rxjs';
+import { FuseLoadingService } from '@fuse/services/loading';
 
 @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
 {
@@ -56,22 +52,19 @@ 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;
             });
 

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

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

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

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

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

@@ -1,4 +1,3 @@
-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';
@@ -6,11 +5,10 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 @Component({
     selector     : 'fuse-masonry',
     templateUrl  : './masonry.component.html',
+    styleUrls    : ['./masonry.component.scss'],
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations,
-    exportAs     : 'fuseMasonry',
+    exportAs     : 'fuseMasonry'
-    standalone   : true,
-    imports      : [NgTemplateOutlet],
 })
 export class FuseMasonryComponent implements OnChanges, AfterViewInit
 {

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FuseMasonryComponent } from '@fuse/components/masonry/masonry.component';
+
+@NgModule({
+    declarations: [
+        FuseMasonryComponent
+    ],
+    imports     : [
+        CommonModule
+    ],
+    exports     : [
+        FuseMasonryComponent
+    ]
+})
+export class FuseMasonryModule
+{
+}

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

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

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

@@ -10,10 +10,6 @@
             class="fuse-horizontal-navigation-item"
             [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
             [routerLink]="[item.link]"
-            [fragment]="item.fragment ?? null"
-            [preserveFragment]="item.preserveFragment ?? false"
-            [queryParams]="item.queryParams ?? null"
-            [queryParamsHandling]="item.queryParamsHandling ?? null"
             [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
             [matTooltip]="item.tooltip || ''">
@@ -49,10 +45,6 @@
             class="fuse-horizontal-navigation-item"
             [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
             [routerLink]="[item.link]"
-            [fragment]="item.fragment ?? null"
-            [preserveFragment]="item.preserveFragment ?? false"
-            [queryParams]="item.queryParams ?? null"
-            [queryParamsHandling]="item.queryParamsHandling ?? null"
             [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
             [matTooltip]="item.tooltip || ''"

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

@@ -1,21 +1,15 @@
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
+import { IsActiveMatchOptions } from '@angular/router';
-import { MatMenuModule } from '@angular/material/menu';
+import { Subject, takeUntil } from 'rxjs';
-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
 {
@@ -32,7 +26,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.
@@ -67,9 +61,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -1,22 +1,15 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { MatMenu } from '@angular/material/menu';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
-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
 {
@@ -37,7 +30,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -56,9 +49,9 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -1,16 +1,13 @@
-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
 {
@@ -25,7 +22,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -44,9 +41,9 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -1,16 +1,13 @@
-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
 {
@@ -25,7 +22,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -44,9 +41,9 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -1,13 +1,9 @@
-import { NgFor, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 import { ReplaySubject, Subject } from 'rxjs';
-import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
+import { fuseAnimations } from '@fuse/animations';
-import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
-import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
     selector       : 'fuse-horizontal-navigation',
@@ -16,9 +12,7 @@ import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer
     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
 {
@@ -34,7 +28,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService,
+        private _fuseUtilsService: FuseUtilsService
     )
     {
     }

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

@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseScrollbarModule } from '@fuse/directives/scrollbar/public-api';
+import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
+import { FuseHorizontalNavigationBranchItemComponent } from '@fuse/components/navigation/horizontal/components/branch/branch.component';
+import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
+import { FuseHorizontalNavigationSpacerItemComponent } from '@fuse/components/navigation/horizontal/components/spacer/spacer.component';
+import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
+import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+
+@NgModule({
+    declarations: [
+        FuseHorizontalNavigationBasicItemComponent,
+        FuseHorizontalNavigationBranchItemComponent,
+        FuseHorizontalNavigationDividerItemComponent,
+        FuseHorizontalNavigationSpacerItemComponent,
+        FuseHorizontalNavigationComponent,
+        FuseVerticalNavigationAsideItemComponent,
+        FuseVerticalNavigationBasicItemComponent,
+        FuseVerticalNavigationCollapsableItemComponent,
+        FuseVerticalNavigationDividerItemComponent,
+        FuseVerticalNavigationGroupItemComponent,
+        FuseVerticalNavigationSpacerItemComponent,
+        FuseVerticalNavigationComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+        MatTooltipModule,
+        FuseScrollbarModule
+    ],
+    exports     : [
+        FuseHorizontalNavigationComponent,
+        FuseVerticalNavigationComponent
+    ]
+})
+export class FuseNavigationModule
+{
+}

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

@@ -1,7 +1,9 @@
 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>();
@@ -158,7 +160,7 @@ export class FuseNavigationService
     getItemParent(
         id: string,
         navigation: FuseNavigationItem[],
-        parent: FuseNavigationItem[] | FuseNavigationItem,
+        parent: FuseNavigationItem[] | FuseNavigationItem
     ): FuseNavigationItem[] | FuseNavigationItem | null
     {
         for ( const item of navigation )

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

@@ -1,4 +1,4 @@
-import { IsActiveMatchOptions, Params, QueryParamsHandling } from '@angular/router';
+import { IsActiveMatchOptions } from '@angular/router';
 
 export interface FuseNavigationItem
 {
@@ -17,10 +17,6 @@ export interface FuseNavigationItem
     disabled?: boolean;
     tooltip?: string;
     link?: string;
-    fragment?: string;
-    preserveFragment?: boolean;
-    queryParams?: Params | null;
-    queryParamsHandling?: QueryParamsHandling | null;
     externalLink?: boolean;
     target?:
         | '_blank'

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

@@ -1,4 +1,5 @@
 export * from '@fuse/components/navigation/horizontal/horizontal.component';
 export * from '@fuse/components/navigation/vertical/vertical.component';
+export * from '@fuse/components/navigation/navigation.module';
 export * from '@fuse/components/navigation/navigation.service';
 export * from '@fuse/components/navigation/navigation.types';

src/@fuse/components/navigation/vertical/components/aside/aside.component.ts

@@ -1,25 +1,15 @@
-import { BooleanInput } from '@angular/cdk/coercion';
-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 { BooleanInput } from '@angular/cdk/coercion';
+import { filter, 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 { 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
 {
@@ -44,7 +34,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _router: Router,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -80,10 +70,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);
             });
@@ -93,9 +83,9 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -10,10 +10,6 @@
             class="fuse-vertical-navigation-item"
             [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
             [routerLink]="[item.link]"
-            [fragment]="item.fragment ?? null"
-            [preserveFragment]="item.preserveFragment ?? false"
-            [queryParams]="item.queryParams ?? null"
-            [queryParamsHandling]="item.queryParamsHandling ?? null"
             [routerLinkActive]="'fuse-vertical-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
             [matTooltip]="item.tooltip || ''">
@@ -49,10 +45,6 @@
             class="fuse-vertical-navigation-item"
             [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
             [routerLink]="[item.link]"
-            [fragment]="item.fragment ?? null"
-            [preserveFragment]="item.preserveFragment ?? false"
-            [queryParams]="item.queryParams ?? null"
-            [queryParamsHandling]="item.queryParamsHandling ?? null"
             [routerLinkActive]="'fuse-vertical-navigation-item-active'"
             [routerLinkActiveOptions]="isActiveMatchOptions"
             [matTooltip]="item.tooltip || ''"

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

@@ -1,20 +1,15 @@
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
+import { IsActiveMatchOptions } from '@angular/router';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { Subject, takeUntil } from 'rxjs';
-import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
+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 { 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
 {
@@ -31,7 +26,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.
@@ -66,9 +61,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts

@@ -1,26 +1,17 @@
-import { BooleanInput } from '@angular/cdk/coercion';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-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 { BooleanInput } from '@angular/cdk/coercion';
+import { filter, Subject, takeUntil } from 'rxjs';
 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
 {
@@ -43,7 +34,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _router: Router,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -57,12 +48,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
      */
     @HostBinding('class') get classList(): any
     {
-        /* 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 */
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -95,8 +84,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 )
                 {
@@ -115,8 +104,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 )
                     {
@@ -150,10 +139,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) )
                 {
@@ -172,9 +161,9 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -1,16 +1,13 @@
-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
 {
@@ -25,7 +22,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -44,9 +41,9 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

src/@fuse/components/navigation/vertical/components/group/group.component.ts

@@ -1,22 +1,14 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgClass, NgFor, NgIf } from '@angular/common';
+import { Subject, takeUntil } from 'rxjs';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
-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
 {
@@ -36,7 +28,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -55,9 +47,9 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

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

@@ -1,16 +1,13 @@
-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
 {
@@ -25,7 +22,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
+        private _fuseNavigationService: FuseNavigationService
     )
     {
     }
@@ -44,9 +41,9 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
 
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Mark for check
             this._changeDetectorRef.markForCheck();
         });

src/@fuse/components/navigation/vertical/styles/appearances/compact.scss

@@ -1,22 +1,20 @@
 /* Variables */
-:root {
+$fuse-vertical-navigation-compact-width: 112px;
-    --fuse-vertical-navigation-compact-width: 112px;
-}
 
 fuse-vertical-navigation {
 
     /* Compact appearance overrides */
     &.fuse-vertical-navigation-appearance-compact {
-        width: var(--fuse-vertical-navigation-compact-width);
+        width: $fuse-vertical-navigation-compact-width;
-        min-width: var(--fuse-vertical-navigation-compact-width);
+        min-width: $fuse-vertical-navigation-compact-width;
-        max-width: var(--fuse-vertical-navigation-compact-width);
+        max-width: $fuse-vertical-navigation-compact-width;
 
         /* Left positioned */
         &.fuse-vertical-navigation-position-left {
 
             /* Side mode */
             &.fuse-vertical-navigation-mode-side {
-                margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1);
+                margin-left: -$fuse-vertical-navigation-compact-width;
             }
 
             /* Opened */
@@ -30,7 +28,7 @@ fuse-vertical-navigation {
 
             /* Side mode */
             &.fuse-vertical-navigation-mode-side {
-                margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1);
+                margin-right: -$fuse-vertical-navigation-compact-width;
             }
 
             /* Opened */
@@ -41,7 +39,7 @@ fuse-vertical-navigation {
             /* Aside wrapper */
             .fuse-vertical-navigation-aside-wrapper {
                 left: auto;
-                right: var(--fuse-vertical-navigation-compact-width);
+                right: $fuse-vertical-navigation-compact-width;
             }
         }
 
@@ -106,7 +104,7 @@ fuse-vertical-navigation {
 
         /* Aside wrapper */
         .fuse-vertical-navigation-aside-wrapper {
-            left: var(--fuse-vertical-navigation-compact-width);
+            left: $fuse-vertical-navigation-compact-width;
         }
     }
 }

src/@fuse/components/navigation/vertical/styles/appearances/default.scss

@@ -1,7 +1,5 @@
 /* Variables */
-:root {
+$fuse-vertical-navigation-width: 280px;
-    --fuse-vertical-navigation-width: 280px;
-}
 
 fuse-vertical-navigation {
     position: sticky;
@@ -9,9 +7,9 @@ fuse-vertical-navigation {
     flex-direction: column;
     flex: 1 0 auto;
     top: 0;
-    width: var(--fuse-vertical-navigation-width);
+    width: $fuse-vertical-navigation-width;
-    min-width: var(--fuse-vertical-navigation-width);
+    min-width: $fuse-vertical-navigation-width;
-    max-width: var(--fuse-vertical-navigation-width);
+    max-width: $fuse-vertical-navigation-width;
     height: 100vh;
     min-height: 100vh;
     max-height: 100vh;
@@ -47,7 +45,7 @@ fuse-vertical-navigation {
 
         /* Side mode */
         &.fuse-vertical-navigation-mode-side {
-            margin-left: calc(#{var(--fuse-vertical-navigation-width)} * -1);
+            margin-left: -$fuse-vertical-navigation-width;
 
             &.fuse-vertical-navigation-opened {
                 margin-left: 0;
@@ -75,7 +73,7 @@ fuse-vertical-navigation {
 
         /* Side mode */
         &.fuse-vertical-navigation-mode-side {
-            margin-right: calc(var(--fuse-vertical-navigation-width) * -1);
+            margin-right: -$fuse-vertical-navigation-width;
 
             &.fuse-vertical-navigation-opened {
                 margin-right: 0;
@@ -172,8 +170,8 @@ fuse-vertical-navigation {
         flex-direction: column;
         top: 0;
         bottom: 0;
-        left: var(--fuse-vertical-navigation-width);
+        left: $fuse-vertical-navigation-width;
-        width: var(--fuse-vertical-navigation-width);
+        width: $fuse-vertical-navigation-width;
         height: 100%;
         z-index: 5;
         overflow-x: hidden;
@@ -198,7 +196,7 @@ fuse-vertical-navigation {
 
         .fuse-vertical-navigation-aside-wrapper {
             left: auto;
-            right: var(--fuse-vertical-navigation-width);
+            right: $fuse-vertical-navigation-width;
         }
     }
 
@@ -337,10 +335,7 @@ fuse-vertical-navigation {
         }
 
         > .fuse-vertical-navigation-item-children {
-
+            margin-top: 6px;
-            > *:first-child {
-                margin-top: 6px;
-            }
 
             > *:last-child {
                 padding-bottom: 6px;

src/@fuse/components/navigation/vertical/styles/appearances/dense.scss

@@ -1,8 +1,6 @@
 /* Variables */
-:root {
+$fuse-vertical-navigation-width: 280px;
-    --fuse-vertical-navigation-width: 280px;
+$fuse-vertical-navigation-dense-width: 80px;
-    --fuse-vertical-navigation-dense-width: 80px;
-}
 
 fuse-vertical-navigation {
 
@@ -10,16 +8,16 @@ fuse-vertical-navigation {
     &.fuse-vertical-navigation-appearance-dense {
 
         &:not(.fuse-vertical-navigation-mode-over) {
-            width: var(--fuse-vertical-navigation-dense-width);
+            width: $fuse-vertical-navigation-dense-width;
-            min-width: var(--fuse-vertical-navigation-dense-width);
+            min-width: $fuse-vertical-navigation-dense-width;
-            max-width: var(--fuse-vertical-navigation-dense-width);
+            max-width: $fuse-vertical-navigation-dense-width;
 
             /* Left positioned */
             &.fuse-vertical-navigation-position-left {
 
                 /* Side mode */
                 &.fuse-vertical-navigation-mode-side {
-                    margin-left: calc(var(--fuse-vertical-navigation-dense-width) * -1);
+                    margin-left: -$fuse-vertical-navigation-dense-width;
                 }
 
                 /* Opened */
@@ -33,7 +31,7 @@ fuse-vertical-navigation {
 
                 /* Side mode */
                 &.fuse-vertical-navigation-mode-side {
-                    margin-right: calc(var(--fuse-vertical-navigation-dense-width) * -1);
+                    margin-right: -$fuse-vertical-navigation-dense-width;
                 }
 
                 /* Opened */
@@ -44,14 +42,14 @@ fuse-vertical-navigation {
                 /* Aside wrapper */
                 .fuse-vertical-navigation-aside-wrapper {
                     left: auto;
-                    right: var(--fuse-vertical-navigation-dense-width);
+                    right: $fuse-vertical-navigation-dense-width;
                 }
 
                 &.fuse-vertical-navigation-hover {
 
                     .fuse-vertical-navigation-aside-wrapper {
                         left: auto;
-                        right: var(--fuse-vertical-navigation-width);
+                        right: $fuse-vertical-navigation-width;
                     }
                 }
             }
@@ -71,9 +69,9 @@ fuse-vertical-navigation {
                     .fuse-vertical-navigation-item-wrapper {
 
                         .fuse-vertical-navigation-item {
-                            width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
+                            width: $fuse-vertical-navigation-dense-width - 24px;
-                            min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
+                            min-width: $fuse-vertical-navigation-dense-width - 24px;
-                            max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
+                            max-width: $fuse-vertical-navigation-dense-width - 24px;
 
                             .fuse-vertical-navigation-item-arrow,
                             .fuse-vertical-navigation-item-badge,
@@ -144,23 +142,23 @@ fuse-vertical-navigation {
 
         /* Aside wrapper */
         .fuse-vertical-navigation-aside-wrapper {
-            left: var(--fuse-vertical-navigation-dense-width);
+            left: $fuse-vertical-navigation-dense-width;
         }
 
         /* Hover */
         &.fuse-vertical-navigation-hover {
 
             .fuse-vertical-navigation-wrapper {
-                width: var(--fuse-vertical-navigation-width);
+                width: $fuse-vertical-navigation-width;
 
                 .fuse-vertical-navigation-content {
 
                     .fuse-vertical-navigation-item-wrapper {
 
                         .fuse-vertical-navigation-item {
-                            width: calc(var(--fuse-vertical-navigation-width) - 24px);
+                            width: $fuse-vertical-navigation-width - 24px;
-                            min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
+                            min-width: $fuse-vertical-navigation-width - 24px;
-                            max-width: calc(var(--fuse-vertical-navigation-width) - 24px);
+                            max-width: $fuse-vertical-navigation-width - 24px;
 
                             .fuse-vertical-navigation-item-arrow,
                             .fuse-vertical-navigation-item-badge,
@@ -175,7 +173,7 @@ fuse-vertical-navigation {
             }
 
             .fuse-vertical-navigation-aside-wrapper {
-                left: var(--fuse-vertical-navigation-width);
+                left: $fuse-vertical-navigation-width;
             }
         }
     }

src/@fuse/components/navigation/vertical/styles/appearances/thin.scss

@@ -1,21 +1,19 @@
 /* Variables */
-:root {
+$fuse-vertical-navigation-thin-width: 80px;
-    --fuse-vertical-navigation-thin-width: 80px;
-}
 
 fuse-vertical-navigation {
 
     /* Thin appearance overrides */
     &.fuse-vertical-navigation-appearance-thin {
-        width: var(--fuse-vertical-navigation-thin-width);
+        width: $fuse-vertical-navigation-thin-width;
-        min-width: var(--fuse-vertical-navigation-thin-width);
+        min-width: $fuse-vertical-navigation-thin-width;
-        max-width: var(--fuse-vertical-navigation-thin-width);
+        max-width: $fuse-vertical-navigation-thin-width;
 
         /* Left positioned */
         &.fuse-vertical-navigation-position-left {
 
             &.fuse-vertical-navigation-mode-side {
-                margin-left: calc(var(--fuse-vertical-navigation-thin-width) * -1);
+                margin-left: -$fuse-vertical-navigation-thin-width;
             }
 
             &.fuse-vertical-navigation-opened {
@@ -27,7 +25,7 @@ fuse-vertical-navigation {
         &.fuse-vertical-navigation-position-right {
 
             &.fuse-vertical-navigation-mode-side {
-                margin-right: calc(var(--fuse-vertical-navigation-thin-width) * -1);
+                margin-right: -$fuse-vertical-navigation-thin-width;
             }
 
             &.fuse-vertical-navigation-opened {
@@ -36,7 +34,7 @@ fuse-vertical-navigation {
 
             .fuse-vertical-navigation-aside-wrapper {
                 left: auto;
-                right: var(--fuse-vertical-navigation-thin-width);
+                right: $fuse-vertical-navigation-thin-width;
             }
         }
 
@@ -93,7 +91,7 @@ fuse-vertical-navigation {
 
         /* Aside wrapper */
         .fuse-vertical-navigation-aside-wrapper {
-            left: var(--fuse-vertical-navigation-thin-width);
+            left: $fuse-vertical-navigation-thin-width;
         }
     }
 }

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

@@ -1,4 +1,4 @@
-@use 'styles/appearances/default';
+@import 'styles/appearances/default';
-@use 'styles/appearances/compact';
+@import 'styles/appearances/compact';
-@use 'styles/appearances/dense';
+@import 'styles/appearances/dense';
-@use 'styles/appearances/thin';
+@import 'styles/appearances/thin';

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

@@ -1,21 +1,14 @@
+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 { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
-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 { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
-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 { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-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 { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Component({
     selector       : 'fuse-vertical-navigation',
@@ -24,9 +17,7 @@ import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil }
     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
 {
@@ -60,7 +51,6 @@ 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();
@@ -74,21 +64,18 @@ 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();
         };
     }
@@ -102,7 +89,6 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     @HostBinding('class') get classList(): any
     {
-        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-vertical-navigation-animations-enabled'             : this._animationsEnabled,
             [`fuse-vertical-navigation-appearance-${this.appearance}`]: true,
@@ -112,9 +98,8 @@ 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 */
     }
 
     /**
@@ -123,7 +108,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     @HostBinding('style') get styleList(): any
     {
         return {
-            'visibility': this.opened ? 'visible' : 'hidden',
+            'visibility': this.opened ? 'visible' : 'hidden'
         };
     }
 
@@ -152,17 +137,16 @@ 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();
                     });
                 });
@@ -264,8 +248,7 @@ 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);
         }
@@ -320,10 +303,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 )
                 {
@@ -345,38 +328,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     ngAfterViewInit(): void
     {
-        // Fix for Firefox.
+        setTimeout(() => {
-        //
-        // 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 )
             {
@@ -400,8 +353,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() )
                     {
@@ -420,9 +373,6 @@ 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();
@@ -638,7 +588,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
@@ -662,15 +612,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 )
             {
@@ -713,7 +663,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
@@ -739,15 +689,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 )
             {

src/@fuse/directives/scroll-reset/public-api.ts

@@ -1 +1,2 @@
 export * from '@fuse/directives/scroll-reset/scroll-reset.directive';
+export * from '@fuse/directives/scroll-reset/scroll-reset.module';

src/@fuse/directives/scroll-reset/scroll-reset.directive.ts

@@ -3,9 +3,8 @@ import { NavigationEnd, Router } from '@angular/router';
 import { filter, Subject, takeUntil } from 'rxjs';
 
 @Directive({
-    selector  : '[fuseScrollReset]',
+    selector: '[fuseScrollReset]',
-    exportAs  : 'fuseScrollReset',
+    exportAs: 'fuseScrollReset'
-    standalone: true,
 })
 export class FuseScrollResetDirective implements OnInit, OnDestroy
 {
@@ -16,7 +15,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
      */
     constructor(
         private _elementRef: ElementRef,
-        private _router: Router,
+        private _router: Router
     )
     {
     }
@@ -33,9 +32,9 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
         // Subscribe to NavigationEnd event
         this._router.events.pipe(
             filter(event => event instanceof NavigationEnd),
-            takeUntil(this._unsubscribeAll),
+            takeUntil(this._unsubscribeAll)
-        ).subscribe(() =>
+        ).subscribe(() => {
-        {
+
             // Reset the element's scroll position to the top
             this._elementRef.nativeElement.scrollTop = 0;
         });

src/@fuse/directives/scroll-reset/scroll-reset.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { FuseScrollResetDirective } from '@fuse/directives/scroll-reset/scroll-reset.directive';
+
+@NgModule({
+    declarations: [
+        FuseScrollResetDirective
+    ],
+    exports     : [
+        FuseScrollResetDirective
+    ]
+})
+export class FuseScrollResetModule
+{
+}

src/@fuse/directives/scrollbar/public-api.ts

@@ -1 +1,2 @@
 export * from '@fuse/directives/scrollbar/scrollbar.directive';
+export * from '@fuse/directives/scrollbar/scrollbar.module';

src/@fuse/directives/scrollbar/scrollbar.directive.ts

@@ -1,19 +1,18 @@
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Platform } from '@angular/cdk/platform';
 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 { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { merge } from 'lodash-es';
+import { Platform } from '@angular/cdk/platform';
-import PerfectScrollbar from 'perfect-scrollbar';
 import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
+import PerfectScrollbar from 'perfect-scrollbar';
+import { merge } from 'lodash-es';
+import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
 
 /**
  * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
  */
 @Directive({
-    selector  : '[fuseScrollbar]',
+    selector: '[fuseScrollbar]',
-    exportAs  : 'fuseScrollbar',
+    exportAs: 'fuseScrollbar'
-    standalone: true,
 })
 export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 {
@@ -35,7 +34,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     constructor(
         private _elementRef: ElementRef,
         private _platform: Platform,
-        private _router: Router,
+        private _router: Router
     )
     {
     }
@@ -102,13 +101,11 @@ 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();
             });
         }
@@ -123,10 +120,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();
             });
@@ -206,14 +203,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
             );
         }
 
@@ -391,8 +388,7 @@ 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));
 

src/@fuse/directives/scrollbar/scrollbar.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
+
+@NgModule({
+    declarations: [
+        FuseScrollbarDirective
+    ],
+    exports     : [
+        FuseScrollbarDirective
+    ]
+})
+export class FuseScrollbarModule
+{
+}

src/@fuse/fuse.module.ts

@@ -0,0 +1,51 @@
+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 { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
+import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
+import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
+
+@NgModule({
+    imports  : [
+        FuseConfirmationModule,
+        FuseLoadingModule,
+        FuseMediaWatcherModule,
+        FuseSplashScreenModule,
+        FuseTailwindConfigModule,
+        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!');
+        }
+    }
+}

src/@fuse/fuse.provider.ts

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

src/@fuse/index.ts

@@ -1 +1 @@
-export * from './fuse.provider';
+export * from './fuse.module';

src/@fuse/lib/mock-api/mock-api.interceptor.ts

@@ -1,77 +1,96 @@
-import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
-import { inject } from '@angular/core';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+import { delay, Observable, of, switchMap, throwError } from 'rxjs';
 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';
 
-export const mockApiInterceptor = (request: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseMockApiInterceptor implements HttpInterceptor
 {
-    const defaultDelay = inject(FUSE_MOCK_API_DEFAULT_DELAY);
+    /**
-    const fuseMockApiService = inject(FuseMockApiService);
+     * Constructor
-
+     */
-    // Try to get the request handler
+    constructor(
-    const {
+        @Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
-        handler,
+        private _fuseMockApiService: FuseMockApiService
-        urlParams,
+    )
-    } = fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
-
-    // Pass through if the request handler does not exist
-    if ( !handler )
     {
-        return next(request);
     }
 
-    // Set the intercepted request on the handler
+    /**
-    handler.request = request;
+     * 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);
 
-    // Set the url params on the handler
+        // Pass through if the request handler does not exist
-    handler.urlParams = urlParams;
+        if ( !handler )
-
-    // Subscribe to the response function observable
-    return handler.response.pipe(
-        delay(handler.delay ?? defaultDelay ?? 0),
-        switchMap((response) =>
         {
-            // If there is no response data,
+            return next.handle(request);
-            // throw an error response
+        }
-            if ( !response )
+
-            {
+        // Set the intercepted request on the handler
+        handler.request = request;
+
+        // Set the url params on the handler
+        handler.urlParams = urlParams;
+
+        // Subscribe to the response function observable
+        return handler.response.pipe(
+            delay(handler.delay ?? this._defaultDelay ?? 0),
+            switchMap((response) => {
+
+                // If there is no response data,
+                // throw an error response
+                if ( !response )
+                {
+                    response = new HttpErrorResponse({
+                        error     : 'NOT FOUND',
+                        status    : 404,
+                        statusText: 'NOT FOUND'
+                    });
+
+                    return throwError(response);
+                }
+
+                // Parse the response data
+                const data = {
+                    status: response[0],
+                    body  : response[1]
+                };
+
+                // If the status code is in between 200 and 300,
+                // return a success response
+                if ( data.status >= 200 && data.status < 300 )
+                {
+                    response = new HttpResponse({
+                        body      : data.body,
+                        status    : data.status,
+                        statusText: 'OK'
+                    });
+
+                    return of(response);
+                }
+
+                // For other status codes,
+                // throw an error response
                 response = new HttpErrorResponse({
-                    error     : 'NOT FOUND',
+                    error     : data.body.error,
-                    status    : 404,
+                    status    : data.status,
-                    statusText: 'NOT FOUND',
+                    statusText: 'ERROR'
                 });
 
                 return throwError(response);
-            }
+            }));
-
+    }
-            // Parse the response data
+}
-            const data = {
-                status: response[0],
-                body  : response[1],
-            };
-
-            // If the status code is in between 200 and 300,
-            // return a success response
-            if ( data.status >= 200 && data.status < 300 )
-            {
-                response = new HttpResponse({
-                    body      : data.body,
-                    status    : data.status,
-                    statusText: 'OK',
-                });
-
-                return of(response);
-            }
-
-            // For other status codes,
-            // throw an error response
-            response = new HttpErrorResponse({
-                error     : data.body.error,
-                status    : data.status,
-                statusText: 'ERROR',
-            });
-
-            return throwError(response);
-        }));
-};

src/@fuse/lib/mock-api/mock-api.module.ts

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

src/@fuse/lib/mock-api/mock-api.request-handler.ts

@@ -1,6 +1,6 @@
 import { HttpRequest } from '@angular/common/http';
-import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
 import { Observable, of, take, throwError } from 'rxjs';
+import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
 
 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...

src/@fuse/lib/mock-api/mock-api.service.ts

@@ -1,9 +1,11 @@
 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> } = {
@@ -14,7 +16,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>()
     };
 
     /**
@@ -40,7 +42,7 @@ export class FuseMockApiService
         // Prepare the return object
         const matchingHandler: { handler: FuseMockApiHandler | undefined; urlParams: { [key: string]: string } } = {
             handler  : undefined,
-            urlParams: {},
+            urlParams: {}
         };
 
         // Split the url
@@ -50,8 +52,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 )
             {
@@ -78,7 +80,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
                 )));
             }
         });

src/@fuse/lib/mock-api/mock-api.utils.ts

@@ -26,8 +26,7 @@ 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);

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.interceptor';
+export * from '@fuse/lib/mock-api/mock-api.module';
 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';

src/@fuse/pipes/find-by-key/find-by-key.module.ts

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

src/@fuse/pipes/find-by-key/find-by-key.pipe.ts

@@ -4,9 +4,8 @@ import { Pipe, PipeTransform } from '@angular/core';
  * Finds an object from given source using the given key - value pairs
  */
 @Pipe({
-    name      : 'fuseFindByKey',
+    name: 'fuseFindByKey',
-    pure      : false,
+    pure: false
-    standalone: true,
 })
 export class FuseFindByKeyPipe implements PipeTransform
 {

src/@fuse/services/config/config.constants.ts

@@ -1,3 +1,3 @@
 import { InjectionToken } from '@angular/core';
 
-export const FUSE_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');
+export const FUSE_APP_CONFIG = new InjectionToken<any>('FUSE_APP_CONFIG');

src/@fuse/services/config/config.module.ts

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

src/@fuse/services/config/config.service.ts

@@ -1,9 +1,11 @@
 import { Inject, Injectable } from '@angular/core';
-import { FUSE_CONFIG } from '@fuse/services/config/config.constants';
-import { merge } from 'lodash-es';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { merge } from 'lodash-es';
+import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
 
-@Injectable({providedIn: 'root'})
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseConfigService
 {
     private _config: BehaviorSubject<any>;
@@ -11,7 +13,7 @@ export class FuseConfigService
     /**
      * Constructor
      */
-    constructor(@Inject(FUSE_CONFIG) config: any)
+    constructor(@Inject(FUSE_APP_CONFIG) config: any)
     {
         // Private
         this._config = new BehaviorSubject(config);
@@ -33,7 +35,6 @@ export class FuseConfigService
         this._config.next(config);
     }
 
-    // eslint-disable-next-line @typescript-eslint/member-ordering
     get config$(): Observable<any>
     {
         return this._config.asObservable();

src/@fuse/services/config/config.types.ts

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

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';

src/@fuse/services/confirmation/confirmation.module.ts

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

src/@fuse/services/confirmation/confirmation.service.ts

@@ -1,39 +1,40 @@
-import { inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
-import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
 import { merge } from 'lodash-es';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
 
-@Injectable({providedIn: 'root'})
+@Injectable()
 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-triangle',
+            name : 'heroicons_outline:exclamation',
-            color: 'warn',
+            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()
+    constructor(
+        private _matDialog: MatDialog
+    )
     {
     }
 
@@ -51,7 +52,7 @@ export class FuseConfirmationService
             autoFocus   : false,
             disableClose: !userConfig.dismissible,
             data        : userConfig,
-            panelClass  : 'fuse-confirmation-dialog-panel',
+            panelClass  : 'fuse-confirmation-dialog-panel'
         });
     }
 }

src/@fuse/services/confirmation/dialog/dialog.component.html

@@ -8,7 +8,7 @@
                 [matDialogClose]="undefined">
                 <mat-icon
                     class="text-secondary"
-                    [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
+                    [svgIcon]="'heroicons_outline:x'"></mat-icon>
             </button>
         </div>
     </ng-container>

src/@fuse/services/confirmation/dialog/dialog.component.ts

@@ -1,41 +1,52 @@
-import { NgClass, NgIf } from '@angular/common';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } 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({
     selector     : 'fuse-confirmation-dialog',
     templateUrl  : './dialog.component.html',
     styles       : [
+        /* language=SCSS */
         `
             .fuse-confirmation-dialog-panel {
-
                 @screen md {
                     @apply w-128;
                 }
 
-                .mat-mdc-dialog-container {
+                .mat-dialog-container {
-
+                    padding: 0 !important;
-                    .mat-mdc-dialog-surface {
-                        padding: 0 !important;
-                    }
                 }
             }
-        `,
+        `
     ],
-    encapsulation: ViewEncapsulation.None,
+    encapsulation: ViewEncapsulation.None
-    standalone   : true,
-    imports      : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
 })
-export class FuseConfirmationDialogComponent
+export class FuseConfirmationDialogComponent implements OnInit
 {
     /**
      * Constructor
      */
-    constructor(@Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig)
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig,
+        public matDialogRef: MatDialogRef<FuseConfirmationDialogComponent>
+    )
     {
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
 }

src/@fuse/services/confirmation/public-api.ts

@@ -1,2 +1,3 @@
+export * from '@fuse/services/confirmation/confirmation.module';
 export * from '@fuse/services/confirmation/confirmation.service';
 export * from '@fuse/services/confirmation/confirmation.types';

src/@fuse/services/loading/loading.interceptor.ts

@@ -1,33 +1,48 @@
-import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
-import { inject } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { finalize, Observable } from 'rxjs';
 import { FuseLoadingService } from '@fuse/services/loading/loading.service';
-import { finalize, Observable, take } from 'rxjs';
 
-export const fuseLoadingInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
+@Injectable()
+export class FuseLoadingInterceptor implements HttpInterceptor
 {
-    const fuseLoadingService = inject(FuseLoadingService);
+    handleRequestsAutomatically: boolean;
-    let handleRequestsAutomatically = false;
 
-    fuseLoadingService.auto$
+    /**
-        .pipe(take(1))
+     * Constructor
-        .subscribe((value) =>
+     */
-        {
+    constructor(
-            handleRequestsAutomatically = value;
+        private _fuseLoadingService: FuseLoadingService
-        });
+    )
-
-    // If the Auto mode is turned off, do nothing
-    if ( !handleRequestsAutomatically )
     {
-        return next(req);
+        // Subscribe to the auto
+        this._fuseLoadingService.auto$
+            .subscribe((value) => {
+                this.handleRequestsAutomatically = value;
+            });
     }
 
-    // Set the loading status to true
+    /**
-    fuseLoadingService._setLoadingStatus(true, req.url);
+     * Intercept
-
+     *
-    return next(req).pipe(
+     * @param req
-        finalize(() =>
+     * @param next
+     */
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
+    {
+        // If the Auto mode is turned off, do nothing
+        if ( !this.handleRequestsAutomatically )
         {
-            // Set the status to false if there are any errors or the request is completed
+            return next.handle(req);
-            fuseLoadingService._setLoadingStatus(false, req.url);
+        }
-        }));
+
-};
+        // Set the loading status to true
+        this._fuseLoadingService._setLoadingStatus(true, req.url);
+
+        return next.handle(req).pipe(
+            finalize(() => {
+                // Set the status to false if there are any errors or the request is completed
+                this._fuseLoadingService._setLoadingStatus(false, req.url);
+            }));
+    }
+}

src/@fuse/services/loading/loading.module.ts

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

src/@fuse/services/loading/loading.service.ts

@@ -1,8 +1,10 @@
-import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseLoadingService
 {
     private _auto$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);

src/@fuse/services/loading/public-api.ts

@@ -1,2 +1,2 @@
 export * from '@fuse/services/loading/loading.service';
-export * from '@fuse/services/loading/loading.interceptor';
+export * from '@fuse/services/loading/loading.module';

src/@fuse/services/media-watcher/media-watcher.module.ts

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

src/@fuse/services/media-watcher/media-watcher.service.ts

@@ -1,10 +1,9 @@
-import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Injectable } from '@angular/core';
-import { FuseConfigService } from '@fuse/services/config';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { fromPairs } from 'lodash-es';
 import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
+import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
 
-@Injectable({providedIn: 'root'})
+@Injectable()
 export class FuseMediaWatcherService
 {
     private _onMediaChange: ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }> = new ReplaySubject<{ matchingAliases: string[]; matchingQueries: any }>(1);
@@ -14,14 +13,13 @@ export class FuseMediaWatcherService
      */
     constructor(
         private _breakpointObserver: BreakpointObserver,
-        private _fuseConfigService: FuseConfigService,
+        private _fuseTailwindConfigService: FuseTailwindService
     )
     {
-        this._fuseConfigService.config$.pipe(
+        this._fuseTailwindConfigService.tailwindConfig$.pipe(
-            map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
+            switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
-            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 = {};
@@ -31,7 +29,7 @@ export class FuseMediaWatcherService
                     for ( const [query] of matchingBreakpoints )
                     {
                         // Find the alias of the matching query
-                        const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
+                        const matchingAlias = Object.entries(config.breakpoints).find(([alias, q]) => q === query)[0];
 
                         // Add the matching query to the observable values
                         if ( matchingAlias )
@@ -44,10 +42,10 @@ export class FuseMediaWatcherService
                     // Execute the observable
                     this._onMediaChange.next({
                         matchingAliases,
-                        matchingQueries,
+                        matchingQueries
                     });
-                }),
+                })
-            )),
+            ))
         ).subscribe();
     }
 

src/@fuse/services/media-watcher/public-api.ts

@@ -1 +1,2 @@
+export * from '@fuse/services/media-watcher/media-watcher.module';
 export * from '@fuse/services/media-watcher/media-watcher.service';

src/@fuse/services/platform/index.ts

@@ -1 +0,0 @@
-export * from '@fuse/services/platform/public-api';

src/@fuse/services/platform/platform.service.ts

@@ -1,57 +0,0 @@
-import { Platform } from '@angular/cdk/platform';
-import { Injectable } from '@angular/core';
-
-@Injectable({providedIn: 'root'})
-export class FusePlatformService
-{
-    osName = 'os-unknown';
-
-    /**
-     * Constructor
-     */
-    constructor(private _platform: Platform)
-    {
-        // If the platform is not a browser, return immediately
-        if ( !this._platform.isBrowser )
-        {
-            return;
-        }
-
-        // Windows
-        if ( navigator.userAgent.includes('Win') )
-        {
-            this.osName = 'os-windows';
-        }
-
-        // Mac OS
-        if ( navigator.userAgent.includes('Mac') )
-        {
-            this.osName = 'os-mac';
-        }
-
-        // Unix
-        if ( navigator.userAgent.includes('X11') )
-        {
-            this.osName = 'os-unix';
-        }
-
-        // Linux
-        if ( navigator.userAgent.includes('Linux') )
-        {
-            this.osName = 'os-linux';
-        }
-
-        // iOS
-        if ( this._platform.IOS )
-        {
-            this.osName = 'os-ios';
-        }
-
-        // Android
-        if ( this._platform.ANDROID )
-        {
-            this.osName = 'os-android';
-        }
-    }
-
-}

src/@fuse/services/platform/public-api.ts

@@ -1 +0,0 @@
-export * from '@fuse/services/platform/platform.service';