First pass through updating standalone components.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse-angular",
-    "version": "17.2.0",
+    "version": "18.0.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -13,55 +13,54 @@
         "test": "ng test"
     },
     "dependencies": {
-        "@angular/animations": "15.1.1",
+        "@angular/animations": "15.2.9",
-        "@angular/cdk": "15.1.1",
+        "@angular/cdk": "15.2.9",
-        "@angular/common": "15.1.1",
+        "@angular/common": "15.2.9",
-        "@angular/compiler": "15.1.1",
+        "@angular/compiler": "15.2.9",
-        "@angular/core": "15.1.1",
+        "@angular/core": "15.2.9",
-        "@angular/forms": "15.1.1",
+        "@angular/forms": "15.2.9",
-        "@angular/material": "15.1.1",
+        "@angular/material": "15.2.9",
-        "@angular/material-luxon-adapter": "15.1.1",
+        "@angular/material-luxon-adapter": "15.2.9",
-        "@angular/platform-browser": "15.1.1",
+        "@angular/platform-browser": "15.2.9",
-        "@angular/platform-browser-dynamic": "15.1.1",
+        "@angular/platform-browser-dynamic": "15.2.9",
-        "@angular/router": "15.1.1",
+        "@angular/router": "15.2.9",
-        "@ngneat/transloco": "4.2.2",
+        "@ngneat/transloco": "4.2.6",
-        "apexcharts": "3.36.3",
+        "apexcharts": "3.40.0",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.7.0",
+        "highlight.js": "11.8.0",
         "lodash-es": "4.17.21",
-        "luxon": "3.2.1",
+        "luxon": "3.3.0",
-        "ng-apexcharts": "1.7.4",
+        "ng-apexcharts": "1.7.6",
-        "ngx-quill": "20.0.1",
+        "ngx-quill": "21.0.0",
         "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
-        "rxjs": "7.8.0",
+        "rxjs": "7.8.1",
-        "tslib": "2.4.1",
+        "tslib": "2.5.0",
-        "zone.js": "0.12.0"
+        "zone.js": "0.13.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "15.1.2",
+        "@angular-devkit/build-angular": "15.2.8",
-        "@angular/cli": "15.1.2",
+        "@angular/cli": "15.2.8",
-        "@angular/compiler-cli": "15.1.1",
+        "@angular/compiler-cli": "15.2.9",
-        "@tailwindcss/line-clamp": "0.4.2",
         "@tailwindcss/typography": "0.5.9",
-        "@types/chroma-js": "2.1.4",
+        "@types/chroma-js": "2.4.0",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
         "@types/jasmine": "4.3.1",
-        "@types/lodash": "4.14.191",
+        "@types/lodash": "4.14.194",
-        "@types/lodash-es": "4.17.6",
+        "@types/lodash-es": "4.17.7",
-        "@types/luxon": "3.2.0",
+        "@types/luxon": "3.3.0",
-        "autoprefixer": "10.4.13",
+        "autoprefixer": "10.4.14",
         "chroma-js": "2.4.2",
-        "jasmine-core": "4.5.0",
+        "jasmine-core": "4.6.0",
-        "karma": "6.4.1",
+        "karma": "6.4.2",
-        "karma-chrome-launcher": "3.1.1",
+        "karma-chrome-launcher": "3.2.0",
         "karma-coverage": "2.2.0",
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.0.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.21",
+        "postcss": "8.4.23",
-        "tailwindcss": "3.2.4",
+        "tailwindcss": "3.3.2",
-        "typescript": "4.9.4"
+        "typescript": "4.9.5"
     }
 }

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

@@ -1,10 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { filter, Subject, takeUntil } from 'rxjs';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
 import { FuseAlertService } from '@fuse/components/alert/alert.service';
+import { FuseAlertAppearance, FuseAlertType } from '@fuse/components/alert/alert.types';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { filter, Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-alert',
@@ -13,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations     : fuseAnimations,
-    exportAs       : 'fuseAlert'
+    exportAs       : 'fuseAlert',
+    standalone     : true,
+    imports        : [NgIf, MatIconModule, MatButtonModule],
 })
 export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -39,7 +44,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseAlertService: FuseAlertService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
     )
     {
     }
@@ -69,7 +74,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
             'fuse-alert-type-info'         : this.type === 'info',
             'fuse-alert-type-success'      : this.type === 'success',
             'fuse-alert-type-warning'      : this.type === 'warning',
-            'fuse-alert-type-error'        : this.type === 'error'
+            'fuse-alert-type-error'        : this.type === 'error',
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -119,9 +124,10 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
         this._fuseAlertService.onDismiss
             .pipe(
                 filter(name => this.name === name),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
             )
-            .subscribe(() => {
+            .subscribe(() =>
+            {
 
                 // Dismiss the alert
                 this.dismiss();
@@ -131,9 +137,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

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

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Observable, ReplaySubject } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseAlertService
 {

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

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

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

@@ -1,5 +1,6 @@
-import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf } from '@angular/common';
+import { Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseCardFace } from '@fuse/components/card/card.types';
 
@@ -9,7 +10,9 @@ import { FuseCardFace } from '@fuse/components/card/card.types';
     styleUrls    : ['./card.component.scss'],
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations,
-    exportAs     : 'fuseCard'
+    exportAs     : 'fuseCard',
+    standalone   : true,
+    imports      : [NgIf],
 })
 export class FuseCardComponent implements OnChanges
 {
@@ -43,7 +46,7 @@ export class FuseCardComponent implements OnChanges
             'fuse-card-expanded'  : this.expanded,
             'fuse-card-face-back' : this.flippable && this.face === 'back',
             'fuse-card-face-front': this.flippable && this.face === 'front',
-            'fuse-card-flippable' : this.flippable
+            'fuse-card-flippable' : this.flippable,
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }

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

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

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

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

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

@@ -1,16 +1,17 @@
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
-import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { FuseDrawerService } from '@fuse/components/drawer/drawer.service';
+import { FuseDrawerMode, FuseDrawerPosition } from '@fuse/components/drawer/drawer.types';
+import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
     selector     : 'fuse-drawer',
     templateUrl  : './drawer.component.html',
     styleUrls    : ['./drawer.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseDrawer'
+    exportAs     : 'fuseDrawer',
+    standalone   : true,
 })
 export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -45,10 +46,11 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _fuseDrawerService: FuseDrawerService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
     )
     {
-        this._handleOverlayClick = (): void => {
+        this._handleOverlayClick = (): void =>
+        {
             this.close();
         };
     }
@@ -69,7 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
             'fuse-drawer-hover'                      : this._hovered,
             [`fuse-drawer-mode-${this.mode}`]        : true,
             'fuse-drawer-opened'                     : this.opened,
-            [`fuse-drawer-position-${this.position}`]: true
+            [`fuse-drawer-position-${this.position}`]: true,
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -80,7 +82,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     @HostBinding('style') get styleList(): any
     {
         return {
-            'visibility': this.opened ? 'visible' : 'hidden'
+            'visibility': this.opened ? 'visible' : 'hidden',
         };
     }
 
@@ -173,7 +175,8 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
             // Enable the animations after a delay
             // The delay must be bigger than the current transition-duration
             // to make sure nothing will be animated while the mode is changing
-            setTimeout(() => {
+            setTimeout(() =>
+            {
                 this._enableAnimations();
             }, 500);
         }
@@ -345,7 +348,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Create enter animation and attach it to the player
         this._player = this._animationBuilder.build([
             style({opacity: 0}),
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1})),
         ]).create(this._overlay);
 
         // Play the animation
@@ -369,14 +372,15 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
 
         // Create the leave animation and attach it to the player
         this._player = this._animationBuilder.build([
-            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0}))
+            animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 0})),
         ]).create(this._overlay);
 
         // Play the animation
         this._player.play();
 
         // Once the animation is done...
-        this._player.onDone(() => {
+        this._player.onDone(() =>
+        {
 
             // If the overlay still exists...
             if ( this._overlay )

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

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

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { FuseDrawerComponent } from '@fuse/components/drawer/drawer.component';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseDrawerService
 {

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

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

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

@@ -1,5 +1,8 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
 
 @Component({
@@ -7,7 +10,9 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
     templateUrl    : './fullscreen.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseFullscreen'
+    exportAs       : 'fuseFullscreen',
+    standalone     : true,
+    imports        : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
 })
 export class FuseFullscreenComponent implements OnInit
 {

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

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-    declarations: [
-        FuseFullscreenComponent
-    ],
-    imports     : [
-        MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
-        CommonModule
-    ],
-    exports     : [
-        FuseFullscreenComponent
-    ]
-})
-export class FuseFullscreenModule
-{
-}

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

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

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

@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EmbeddedViewRef, Input, OnChanges, Renderer2, SecurityContext, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { FuseHighlightService } from '@fuse/components/highlight/highlight.service';
@@ -8,7 +9,9 @@ import { FuseHighlightService } from '@fuse/components/highlight/highlight.servi
     styleUrls      : ['./highlight.component.scss'],
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHighlight'
+    exportAs       : 'fuseHighlight',
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseHighlightComponent implements OnChanges, AfterViewInit
 {
@@ -28,7 +31,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _fuseHighlightService: FuseHighlightService,
-        private _viewContainerRef: ViewContainerRef
+        private _viewContainerRef: ViewContainerRef,
     )
     {
     }
@@ -123,7 +126,7 @@ export class FuseHighlightComponent implements OnChanges, AfterViewInit
         // Render and insert the template
         this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef, {
             highlightedCode: this.highlightedCode,
-            lang           : this.lang
+            lang           : this.lang,
         });
 
         // Detect the changes

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

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

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import hljs from 'highlight.js';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseHighlightService
 {
@@ -61,19 +61,20 @@ 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
+                // Always get the indentation of the first line so we can
-                 // have something to compare with
+                // have something to compare with
-                 if ( index === 0 )
+                if ( index === 0 )
-                 {
+                {
-                     indentation = line.search(/\S|$/);
+                    indentation = line.search(/\S|$/);
-                     return;
+                    return;
-                 }
+                }
 
-                 // Look at all the remaining lines to figure out the smallest indentation.
+                // Look at all the remaining lines to figure out the smallest indentation.
-                 indentation = Math.min(line.search(/\S|$/), 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,3 +1,2 @@
 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,14 +1,18 @@
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Subject, takeUntil } from 'rxjs';
+import { NgIf } from '@angular/common';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FuseLoadingService } from '@fuse/services/loading';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector     : 'fuse-loading-bar',
     templateUrl  : './loading-bar.component.html',
     styleUrls    : ['./loading-bar.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseLoadingBar'
+    exportAs     : 'fuseLoadingBar',
+    standalone   : true,
+    imports      : [NgIf, MatProgressBarModule],
 })
 export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -52,19 +56,22 @@ export class FuseLoadingBarComponent implements OnChanges, OnInit, OnDestroy
         // Subscribe to the service
         this._fuseLoadingService.mode$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                 this.mode = value;
             });
 
         this._fuseLoadingService.progress$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                 this.progress = value;
             });
 
         this._fuseLoadingService.show$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                 this.show = value;
             });
 

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

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { FuseLoadingBarComponent } from '@fuse/components/loading-bar/loading-bar.component';
-
-@NgModule({
-    declarations: [
-        FuseLoadingBarComponent
-    ],
-    imports     : [
-        CommonModule,
-        MatProgressBarModule
-    ],
-    exports     : [
-        FuseLoadingBarComponent
-    ]
-})
-export class FuseLoadingBarModule
-{
-}

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

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

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

@@ -1,3 +1,4 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@@ -7,7 +8,9 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
     templateUrl  : './masonry.component.html',
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations,
-    exportAs     : 'fuseMasonry'
+    exportAs     : 'fuseMasonry',
+    standalone   : true,
+    imports      : [NgTemplateOutlet],
 })
 export class FuseMasonryComponent implements OnChanges, AfterViewInit
 {

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

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

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

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

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

@@ -1,15 +1,21 @@
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
-import { Subject, takeUntil } from 'rxjs';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-basic-item',
     templateUrl    : './basic.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatMenuModule, MatIconModule],
 })
 export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy
 {
@@ -26,7 +32,7 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
     )
     {
         // Set the equivalent of {exact: false} as default for active match options.
@@ -61,8 +67,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,15 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { MatMenu } from '@angular/material/menu';
+import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { Subject, takeUntil } from 'rxjs';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { FuseHorizontalNavigationBasicItemComponent } from '@fuse/components/navigation/horizontal/components/basic/basic.component';
+import { FuseHorizontalNavigationDividerItemComponent } from '@fuse/components/navigation/horizontal/components/divider/divider.component';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-branch-item',
     templateUrl    : './branch.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgIf, NgClass, MatMenuModule, NgTemplateOutlet, NgFor, FuseHorizontalNavigationBasicItemComponent, forwardRef(() => FuseHorizontalNavigationBranchItemComponent), FuseHorizontalNavigationDividerItemComponent, MatTooltipModule, MatIconModule],
 })
 export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy
 {
@@ -30,7 +37,7 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -49,8 +56,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,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-divider-item',
     templateUrl    : './divider.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnD
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -41,8 +44,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,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-spacer-item',
     templateUrl    : './spacer.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDe
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -41,8 +44,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,9 +1,13 @@
+import { NgFor, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { ReplaySubject, Subject } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { ReplaySubject, Subject } from 'rxjs';
+import { FuseHorizontalNavigationBasicItemComponent } from './components/basic/basic.component';
+import { FuseHorizontalNavigationBranchItemComponent } from './components/branch/branch.component';
+import { FuseHorizontalNavigationSpacerItemComponent } from './components/spacer/spacer.component';
 
 @Component({
     selector       : 'fuse-horizontal-navigation',
@@ -12,7 +16,9 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
     animations     : fuseAnimations,
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseHorizontalNavigation'
+    exportAs       : 'fuseHorizontalNavigation',
+    standalone     : true,
+    imports        : [NgFor, NgIf, FuseHorizontalNavigationBasicItemComponent, FuseHorizontalNavigationBranchItemComponent, FuseHorizontalNavigationSpacerItemComponent],
 })
 export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -28,7 +34,7 @@ export class FuseHorizontalNavigationComponent implements OnChanges, OnInit, OnD
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
     )
     {
     }

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

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

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseNavigationService
 {
@@ -160,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/public-api.ts

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

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

@@ -1,15 +1,25 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { filter, Subject, takeUntil } from 'rxjs';
+import { NgClass, NgFor, NgIf } from '@angular/common';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Router } from '@angular/router';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { filter, Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation-aside-item',
     templateUrl    : './aside.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy
 {
@@ -34,7 +44,7 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _router: Router,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -70,9 +80,10 @@ export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnIn
         this._router.events
             .pipe(
                 filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
             )
-            .subscribe((event: NavigationEnd) => {
+            .subscribe((event: NavigationEnd) =>
+            {
 
                 // Mark if active
                 this._markIfActive(event.urlAfterRedirects);
@@ -83,8 +94,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.ts

@@ -1,15 +1,20 @@
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
-import { Subject, takeUntil } from 'rxjs';
+import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { IsActiveMatchOptions, RouterLink, RouterLinkActive } from '@angular/router';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation-basic-item',
     templateUrl    : './basic.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, RouterLink, RouterLinkActive, MatTooltipModule, NgTemplateOutlet, MatIconModule],
 })
 export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy
 {
@@ -26,7 +31,7 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseUtilsService: FuseUtilsService,
     )
     {
         // Set the equivalent of {exact: false} as default for active match options.
@@ -61,8 +66,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,17 +1,26 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { filter, Subject, takeUntil } from 'rxjs';
+import { NgClass, NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { NavigationEnd, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { filter, Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation-collapsable-item',
     templateUrl    : './collapsable.component.html',
     animations     : fuseAnimations,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, MatTooltipModule, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, forwardRef(() => FuseVerticalNavigationCollapsableItemComponent), FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy
 {
@@ -34,7 +43,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _router: Router,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -51,7 +60,7 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
-            'fuse-vertical-navigation-item-expanded' : this.isExpanded
+            'fuse-vertical-navigation-item-expanded' : this.isExpanded,
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -86,7 +95,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         // Listen for the onCollapsableItemCollapsed from the service
         this._fuseVerticalNavigationComponent.onCollapsableItemCollapsed
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((collapsedItem) => {
+            .subscribe((collapsedItem) =>
+            {
 
                 // Check if the collapsed item is null
                 if ( collapsedItem === null )
@@ -106,7 +116,8 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         {
             this._fuseVerticalNavigationComponent.onCollapsableItemExpanded
                 .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((expandedItem) => {
+                .subscribe((expandedItem) =>
+                {
 
                     // Check if the expanded item is null
                     if ( expandedItem === null )
@@ -141,9 +152,10 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
         this._router.events
             .pipe(
                 filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
+                takeUntil(this._unsubscribeAll),
             )
-            .subscribe((event: NavigationEnd) => {
+            .subscribe((event: NavigationEnd) =>
+            {
 
                 // If the item has a children that has a matching url with the current url, expand...
                 if ( this._hasActiveChild(this.item, event.urlAfterRedirects) )
@@ -163,8 +175,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,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation-divider-item',
     templateUrl    : './divider.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDes
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -41,8 +44,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,14 +1,22 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { Subject, takeUntil } from 'rxjs';
+import { NgClass, NgFor, NgIf } from '@angular/common';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation-group-item',
     templateUrl    : './group.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass, NgIf, MatIconModule, NgFor, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, forwardRef(() => FuseVerticalNavigationGroupItemComponent), FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy
 {
@@ -28,7 +36,7 @@ export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestr
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -47,8 +55,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,13 +1,16 @@
+import { NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil } from 'rxjs';
-import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation-spacer-item',
     templateUrl    : './spacer.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone     : true,
+    imports        : [NgClass],
 })
 export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy
 {
@@ -22,7 +25,7 @@ export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDest
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService
+        private _fuseNavigationService: FuseNavigationService,
     )
     {
     }
@@ -41,8 +44,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/vertical.component.ts

@@ -1,15 +1,21 @@
-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 { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { DOCUMENT } from '@angular/common';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NavigationEnd, Router } from '@angular/router';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
-import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
+import { DOCUMENT, NgFor, NgIf } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseNavigationItem, FuseVerticalNavigationAppearance, FuseVerticalNavigationMode, FuseVerticalNavigationPosition } from '@fuse/components/navigation/navigation.types';
+import { FuseVerticalNavigationAsideItemComponent } from '@fuse/components/navigation/vertical/components/aside/aside.component';
+import { FuseVerticalNavigationBasicItemComponent } from '@fuse/components/navigation/vertical/components/basic/basic.component';
+import { FuseVerticalNavigationCollapsableItemComponent } from '@fuse/components/navigation/vertical/components/collapsable/collapsable.component';
+import { FuseVerticalNavigationDividerItemComponent } from '@fuse/components/navigation/vertical/components/divider/divider.component';
+import { FuseVerticalNavigationGroupItemComponent } from '@fuse/components/navigation/vertical/components/group/group.component';
+import { FuseVerticalNavigationSpacerItemComponent } from '@fuse/components/navigation/vertical/components/spacer/spacer.component';
 import { FuseScrollbarDirective } from '@fuse/directives/scrollbar/scrollbar.directive';
 import { FuseUtilsService } from '@fuse/services/utils/utils.service';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
 
 @Component({
     selector       : 'fuse-vertical-navigation',
@@ -18,7 +24,9 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
     animations     : fuseAnimations,
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseVerticalNavigation'
+    exportAs       : 'fuseVerticalNavigation',
+    standalone     : true,
+    imports        : [FuseScrollbarDirective, NgFor, NgIf, FuseVerticalNavigationAsideItemComponent, FuseVerticalNavigationBasicItemComponent, FuseVerticalNavigationCollapsableItemComponent, FuseVerticalNavigationDividerItemComponent, FuseVerticalNavigationGroupItemComponent, FuseVerticalNavigationSpacerItemComponent],
 })
 export class FuseVerticalNavigationComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy
 {
@@ -72,13 +80,15 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         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 +112,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
             'fuse-vertical-navigation-mode-side'                      : this.mode === 'side',
             'fuse-vertical-navigation-opened'                         : this.opened,
             'fuse-vertical-navigation-position-left'                  : this.position === 'left',
-            'fuse-vertical-navigation-position-right'                 : this.position === 'right'
+            'fuse-vertical-navigation-position-right'                 : this.position === 'right',
         };
         /* eslint-enable @typescript-eslint/naming-convention */
     }
@@ -113,7 +123,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     @HostBinding('style') get styleList(): any
     {
         return {
-            'visibility': this.opened ? 'visible' : 'hidden'
+            'visibility': this.opened ? 'visible' : 'hidden',
         };
     }
 
@@ -142,16 +152,18 @@ 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();
                     });
                 });
@@ -253,7 +265,8 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
             // Enable the animations after a delay
             // The delay must be bigger than the current transition-duration
             // to make sure nothing will be animated while the mode changing
-            setTimeout(() => {
+            setTimeout(() =>
+            {
                 this._enableAnimations();
             }, 500);
         }
@@ -308,9 +321,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 )
@@ -339,8 +353,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         // 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) => {
+        this._mutationObserver = new MutationObserver((mutations) =>
-            mutations.forEach((mutation) => {
+        {
+            mutations.forEach((mutation) =>
+            {
                 const mutationTarget = mutation.target as HTMLElement;
                 if ( mutation.attributeName === 'class' )
                 {
@@ -358,10 +374,11 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         });
         this._mutationObserver.observe(this._document.documentElement, {
             attributes     : true,
-            attributeFilter: ['class']
+            attributeFilter: ['class'],
         });
 
-        setTimeout(() => {
+        setTimeout(() =>
+        {
 
             // Return if 'navigation content' element does not exist
             if ( !this._navigationContentEl )
@@ -386,7 +403,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() )
@@ -624,7 +642,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
@@ -648,14 +666,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 )
@@ -699,7 +718,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
@@ -725,14 +744,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,2 +1 @@
 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,8 +3,9 @@ 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
 {
@@ -15,7 +16,7 @@ export class FuseScrollResetDirective implements OnInit, OnDestroy
      */
     constructor(
         private _elementRef: ElementRef,
-        private _router: Router
+        private _router: Router,
     )
     {
     }
@@ -32,8 +33,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

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

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

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

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

@@ -1,18 +1,19 @@
-import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { Router } from '@angular/router';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Platform } from '@angular/cdk/platform';
-import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
+import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import PerfectScrollbar from 'perfect-scrollbar';
+import { Router } from '@angular/router';
-import { merge } from 'lodash-es';
 import { ScrollbarGeometry, ScrollbarPosition } from '@fuse/directives/scrollbar/scrollbar.types';
+import { merge } from 'lodash-es';
+import PerfectScrollbar from 'perfect-scrollbar';
+import { debounceTime, fromEvent, Subject, takeUntil } from 'rxjs';
 
 /**
  * Wrapper directive for the Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
  */
 @Directive({
-    selector: '[fuseScrollbar]',
+    selector  : '[fuseScrollbar]',
-    exportAs: 'fuseScrollbar'
+    exportAs  : 'fuseScrollbar',
+    standalone: true,
 })
 export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 {
@@ -34,7 +35,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
     constructor(
         private _elementRef: ElementRef,
         private _platform: Platform,
-        private _router: Router
+        private _router: Router,
     )
     {
     }
@@ -101,11 +102,13 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
             }
 
             // Destroy and re-init the PerfectScrollbar to update its options
-            setTimeout(() => {
+            setTimeout(() =>
+            {
                 this._destroy();
             });
 
-            setTimeout(() => {
+            setTimeout(() =>
+            {
                 this._init();
             });
         }
@@ -120,9 +123,10 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
         fromEvent(window, 'resize')
             .pipe(
                 takeUntil(this._unsubscribeAll),
-                debounceTime(150)
+                debounceTime(150),
             )
-            .subscribe(() => {
+            .subscribe(() =>
+            {
 
                 // Update the PerfectScrollbar
                 this.update();
@@ -203,14 +207,14 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
         {
             scrollbarPosition = new ScrollbarPosition(
                 this._ps.reach.x || 0,
-                this._ps.reach.y || 0
+                this._ps.reach.y || 0,
             );
         }
         else
         {
             scrollbarPosition = new ScrollbarPosition(
                 this._elementRef.nativeElement.scrollLeft,
-                this._elementRef.nativeElement.scrollTop
+                this._elementRef.nativeElement.scrollTop,
             );
         }
 
@@ -388,7 +392,8 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp: number): void => {
+            const step = (newTimestamp: number): void =>
+            {
                 scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 

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

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

src/@fuse/fuse.module.ts

@@ -15,7 +15,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
         FuseMediaWatcherModule,
         FusePlatformModule,
         FuseSplashScreenModule,
-        FuseUtilsModule
+        FuseUtilsModule,
     ],
     providers: [
         {
@@ -24,17 +24,17 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
             useValue: {
                 doctype: true,
                 theme  : false,
-                version: true
+                version: true,
-            }
+            },
         },
         {
             // Use the 'fill' appearance on Angular Material form fields by default
             provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,
             useValue: {
-                appearance: 'fill'
+                appearance: 'fill',
-            }
+            },
-        }
+        },
-    ]
+    ],
 })
 export class FuseModule
 {

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

@@ -1,11 +1,11 @@
-import { Inject, Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
-import { delay, Observable, of, switchMap, throwError } from 'rxjs';
+import { Inject, Injectable } from '@angular/core';
 import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
+import { delay, Observable, of, switchMap, throwError } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseMockApiInterceptor implements HttpInterceptor
 {
@@ -14,7 +14,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
      */
     constructor(
         @Inject(FUSE_MOCK_API_DEFAULT_DELAY) private _defaultDelay: number,
-        private _fuseMockApiService: FuseMockApiService
+        private _fuseMockApiService: FuseMockApiService,
     )
     {
     }
@@ -29,9 +29,9 @@ export class FuseMockApiInterceptor implements HttpInterceptor
     {
         // Try to get the request handler
         const {
-                  handler,
+            handler,
-                  urlParams
+            urlParams,
-              } = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
+        } = this._fuseMockApiService.findHandler(request.method.toUpperCase(), request.url);
 
         // Pass through if the request handler does not exist
         if ( !handler )
@@ -48,7 +48,8 @@ export class FuseMockApiInterceptor implements HttpInterceptor
         // Subscribe to the response function observable
         return handler.response.pipe(
             delay(handler.delay ?? this._defaultDelay ?? 0),
-            switchMap((response) => {
+            switchMap((response) =>
+            {
 
                 // If there is no response data,
                 // throw an error response
@@ -57,7 +58,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                     response = new HttpErrorResponse({
                         error     : 'NOT FOUND',
                         status    : 404,
-                        statusText: 'NOT FOUND'
+                        statusText: 'NOT FOUND',
                     });
 
                     return throwError(response);
@@ -66,7 +67,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                 // Parse the response data
                 const data = {
                     status: response[0],
-                    body  : response[1]
+                    body  : response[1],
                 };
 
                 // If the status code is in between 200 and 300,
@@ -76,7 +77,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                     response = new HttpResponse({
                         body      : data.body,
                         status    : data.status,
-                        statusText: 'OK'
+                        statusText: 'OK',
                     });
 
                     return of(response);
@@ -87,7 +88,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                 response = new HttpErrorResponse({
                     error     : data.body.error,
                     status    : data.status,
-                    statusText: 'ERROR'
+                    statusText: 'ERROR',
                 });
 
                 return throwError(response);

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

@@ -1,5 +1,5 @@
-import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { FUSE_MOCK_API_DEFAULT_DELAY } from '@fuse/lib/mock-api/mock-api.constants';
 import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor';
 
@@ -8,9 +8,9 @@ import { FuseMockApiInterceptor } from '@fuse/lib/mock-api/mock-api.interceptor'
         {
             provide : HTTP_INTERCEPTORS,
             useClass: FuseMockApiInterceptor,
-            multi   : true
+            multi   : true,
-        }
+        },
-    ]
+    ],
 })
 export class FuseMockApiModule
 {
@@ -30,13 +30,13 @@ export class FuseMockApiModule
                     provide   : APP_INITIALIZER,
                     deps      : [...mockApiServices],
                     useFactory: () => (): any => null,
-                    multi     : true
+                    multi     : true,
                 },
                 {
                     provide : FUSE_MOCK_API_DEFAULT_DELAY,
-                    useValue: config?.delay ?? 0
+                    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 { Observable, of, take, throwError } from 'rxjs';
 import { FuseMockApiReplyCallback } from '@fuse/lib/mock-api/mock-api.types';
+import { Observable, of, take, throwError } from 'rxjs';
 
 export class FuseMockApiHandler
 {
@@ -17,7 +17,7 @@ export class FuseMockApiHandler
      */
     constructor(
         public url: string,
-        public delay?: number
+        public delay?: number,
     )
     {
     }
@@ -55,7 +55,7 @@ export class FuseMockApiHandler
         // Execute the reply callback
         const replyResult = this._reply({
             request  : this.request,
-            urlParams: this.urlParams
+            urlParams: this.urlParams,
         });
 
         // If the result of the reply callback is an observable...

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

@@ -1,10 +1,10 @@
 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'
+    providedIn: 'root',
 })
 export class FuseMockApiService
 {
@@ -16,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>(),
     };
 
     /**
@@ -42,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
@@ -52,7 +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 )
@@ -80,7 +81,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,7 +26,8 @@ export class FuseMockApiUtils
             d += performance.now();
         }
 
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) =>
+        {
             const r = (d + Math.random() * 16) % 16 | 0;
             d = Math.floor(d / 16);
             return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);

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

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FuseFindByKeyPipe } from '@fuse/pipes/find-by-key/find-by-key.pipe';
-
-@NgModule({
-    declarations: [
-        FuseFindByKeyPipe
-    ],
-    exports     : [
-        FuseFindByKeyPipe
-    ]
-})
-export class FuseFindByKeyPipeModule
-{
-}

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

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

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

@@ -1,6 +1,6 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { FuseConfigService } from '@fuse/services/config/config.service';
 import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
+import { FuseConfigService } from '@fuse/services/config/config.service';
 
 @NgModule()
 export class FuseConfigModule
@@ -24,9 +24,9 @@ export class FuseConfigModule
             providers: [
                 {
                     provide : FUSE_APP_CONFIG,
-                    useValue: config
+                    useValue: config,
-                }
+                },
-            ]
+            ],
         };
     }
 }

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

@@ -1,10 +1,10 @@
 import { Inject, Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { merge } from 'lodash-es';
 import { FUSE_APP_CONFIG } from '@fuse/services/config/config.constants';
+import { merge } from 'lodash-es';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseConfigService
 {

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

@@ -1,24 +1,22 @@
+import { CommonModule } from '@angular/common';
 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: [
+    imports  : [
-        FuseConfirmationDialogComponent
-    ],
-    imports     : [
         MatButtonModule,
         MatDialogModule,
         MatIconModule,
-        CommonModule
+        CommonModule,
+        FuseConfirmationDialogComponent,
+    ],
+    providers: [
+        FuseConfirmationService,
     ],
-    providers   : [
-        FuseConfirmationService
-    ]
 })
 export class FuseConfirmationModule
 {

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

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { merge } from 'lodash-es';
-import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { merge } from 'lodash-es';
 
 @Injectable()
 export class FuseConfirmationService
@@ -13,27 +13,27 @@ export class FuseConfirmationService
         icon       : {
             show : true,
             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(
-        private _matDialog: MatDialog
+        private _matDialog: MatDialog,
     )
     {
     }
@@ -52,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.ts

@@ -1,5 +1,8 @@
+import { NgClass, NgIf } from '@angular/common';
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
 
 @Component({
@@ -20,9 +23,11 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
                     }
                 }
             }
-        `
+        `,
     ],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    standalone   : true,
+    imports      : [NgIf, MatButtonModule, MatDialogModule, MatIconModule, NgClass],
 })
 export class FuseConfirmationDialogComponent
 {

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

@@ -1,7 +1,7 @@
-import { Injectable } from '@angular/core';
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { finalize, Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
 import { FuseLoadingService } from '@fuse/services/loading/loading.service';
+import { finalize, Observable } from 'rxjs';
 
 @Injectable()
 export class FuseLoadingInterceptor implements HttpInterceptor
@@ -12,12 +12,13 @@ export class FuseLoadingInterceptor implements HttpInterceptor
      * Constructor
      */
     constructor(
-        private _fuseLoadingService: FuseLoadingService
+        private _fuseLoadingService: FuseLoadingService,
     )
     {
         // Subscribe to the auto
         this._fuseLoadingService.auto$
-            .subscribe((value) => {
+            .subscribe((value) =>
+            {
                 this.handleRequestsAutomatically = value;
             });
     }
@@ -40,7 +41,8 @@ export class FuseLoadingInterceptor implements HttpInterceptor
         this._fuseLoadingService._setLoadingStatus(true, req.url);
 
         return next.handle(req).pipe(
-            finalize(() => {
+            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

@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.interceptor';
 
 @NgModule({
@@ -7,9 +7,9 @@ import { FuseLoadingInterceptor } from '@fuse/services/loading/loading.intercept
         {
             provide : HTTP_INTERCEPTORS,
             useClass: FuseLoadingInterceptor,
-            multi   : true
+            multi   : true,
-        }
+        },
-    ]
+    ],
 })
 export class FuseLoadingModule
 {

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

@@ -1,9 +1,9 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseLoadingService
 {

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

@@ -3,8 +3,8 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher/media-watc
 
 @NgModule({
     providers: [
-        FuseMediaWatcherService
+        FuseMediaWatcherService,
-    ]
+    ],
 })
 export class FuseMediaWatcherModule
 {

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

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
-import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
+import { Injectable } from '@angular/core';
-import { fromPairs } from 'lodash-es';
 import { FuseConfigService } from '@fuse/services/config';
+import { fromPairs } from 'lodash-es';
+import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
 
 @Injectable()
 export class FuseMediaWatcherService
@@ -14,13 +14,14 @@ export class FuseMediaWatcherService
      */
     constructor(
         private _breakpointObserver: BreakpointObserver,
-        private _fuseConfigService: FuseConfigService
+        private _fuseConfigService: FuseConfigService,
     )
     {
         this._fuseConfigService.config$.pipe(
             map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
             switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
-                map((state) => {
+                map((state) =>
+                {
 
                     // Prepare the observable values and set their defaults
                     const matchingAliases: string[] = [];
@@ -44,10 +45,10 @@ export class FuseMediaWatcherService
                     // Execute the observable
                     this._onMediaChange.next({
                         matchingAliases,
-                        matchingQueries
+                        matchingQueries,
                     });
-                })
+                }),
-            ))
+            )),
         ).subscribe();
     }
 

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

@@ -3,8 +3,8 @@ import { FusePlatformService } from '@fuse/services/platform/platform.service';
 
 @NgModule({
     providers: [
-        FusePlatformService
+        FusePlatformService,
-    ]
+    ],
 })
 export class FusePlatformModule
 {

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

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { Injectable } from '@angular/core';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FusePlatformService
 {

src/@fuse/services/splash-screen/splash-screen.module.ts

@@ -3,8 +3,8 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen/splash-scr
 
 @NgModule({
     providers: [
-        FuseSplashScreenService
+        FuseSplashScreenService,
-    ]
+    ],
 })
 export class FuseSplashScreenModule
 {

src/@fuse/services/splash-screen/splash-screen.service.ts

@@ -1,5 +1,5 @@
-import { Inject, Injectable } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, take } from 'rxjs';
 
@@ -11,16 +11,17 @@ export class FuseSplashScreenService
      */
     constructor(
         @Inject(DOCUMENT) private _document: any,
-        private _router: Router
+        private _router: Router,
     )
     {
         // Hide it on the first NavigationEnd event
         this._router.events
             .pipe(
                 filter(event => event instanceof NavigationEnd),
-                take(1)
+                take(1),
             )
-            .subscribe(() => {
+            .subscribe(() =>
+            {
                 this.hide();
             });
     }

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

@@ -3,8 +3,8 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @NgModule({
     providers: [
-        FuseUtilsService
+        FuseUtilsService,
-    ]
+    ],
 })
 export class FuseUtilsModule
 {

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

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { IsActiveMatchOptions } from '@angular/router';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class FuseUtilsService
 {
@@ -26,7 +26,7 @@ export class FuseUtilsService
             paths       : 'exact',
             fragment    : 'ignored',
             matrixParams: 'ignored',
-            queryParams : 'exact'
+            queryParams : 'exact',
         };
     }
 
@@ -39,7 +39,7 @@ export class FuseUtilsService
             paths       : 'subset',
             fragment    : 'ignored',
             matrixParams: 'ignored',
-            queryParams : 'subset'
+            queryParams : 'subset',
         };
     }
 

src/@fuse/tailwind/plugins/icon-size.js

@@ -3,7 +3,7 @@ const plugin = require('tailwindcss/plugin');
 module.exports = plugin(
     ({
         matchUtilities,
-        theme
+        theme,
     }) =>
     {
         matchUtilities(
@@ -17,12 +17,12 @@ module.exports = plugin(
                     lineHeight: value,
                     [`svg`]   : {
                         width : value,
-                        height: value
+                        height: value,
-                    }
+                    },
-                })
+                }),
             },
             {
-                values: theme('iconSize')
+                values: theme('iconSize'),
             });
     },
     {
@@ -43,8 +43,8 @@ module.exports = plugin(
                 18 : '4.5rem',
                 20 : '5rem',
                 22 : '5.5rem',
-                24 : '6rem'
+                24 : '6rem',
-            }
+            },
-        }
+        },
-    }
+    },
 );

src/@fuse/tailwind/plugins/theming.js

@@ -26,9 +26,9 @@ const normalizeTheme = (theme) =>
             paletteName,
             {
                 ...palette,
-                DEFAULT: palette['DEFAULT'] || palette[500]
+                DEFAULT: palette['DEFAULT'] || palette[500],
-            }
+            },
-        ]
+        ],
     ));
 };
 
@@ -38,7 +38,7 @@ const normalizeTheme = (theme) =>
 const theming = plugin.withOptions((options) => ({
         addComponents,
         e,
-        theme
+        theme,
     }) =>
     {
         /**
@@ -48,7 +48,7 @@ const theming = plugin.withOptions((options) => ({
          */
         const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
             themeName,
-            _.defaults({}, theme, options.themes['default'])
+            _.defaults({}, theme, options.themes['default']),
         ]));
 
         /**
@@ -57,7 +57,7 @@ const theming = plugin.withOptions((options) => ({
          */
         let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
             themeName,
-            normalizeTheme(theme)
+            normalizeTheme(theme),
         ]));
 
         /**
@@ -73,12 +73,12 @@ const theming = plugin.withOptions((options) => ({
                         ...palette,
                         contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
                             hue,
-                            _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
+                            _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color,
-                        ]))
+                        ])),
-                    }
+                    },
                 ])),
-                ['primary', 'accent', 'warn']
+                ['primary', 'accent', 'warn'],
-            )
+            ),
         ]));
 
         /**
@@ -89,8 +89,8 @@ const theming = plugin.withOptions((options) => ({
             themeName,
             {
                 selector: `".theme-${themeName}"`,
-                ...theme
+                ...theme,
-            }
+            },
         ]));
 
         /* Generate the SASS map using the themes object */
@@ -134,15 +134,15 @@ const theming = plugin.withOptions((options) => ({
                 _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
                         [
                             e(paletteName),
-                            palette
+                            palette,
                         ],
                         [
                             `on-${e(paletteName)}`,
-                            _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
+                            _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color])),
-                        ]
+                        ],
-                    ])
+                    ]),
-                ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+                ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-            ]))
+            ])),
         );
 
         /**
@@ -185,8 +185,8 @@ const theming = plugin.withOptions((options) => ({
 
                     /* Generate custom properties from customProps */
                     ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-                    ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+                    ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
-                }
+                },
             };
         });
 
@@ -211,8 +211,8 @@ const theming = plugin.withOptions((options) => ({
                      */
                     colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
                         [name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
-                        [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
+                        [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`],
-                    ])))
+                    ]))),
                 },
                 fuse  : {
                     customProps: {
@@ -223,7 +223,7 @@ const theming = plugin.withOptions((options) => ({
                                 'bg-default'   : colors.slate[100],
                                 'bg-dialog'    : '#FFFFFF',
                                 'bg-hover'     : chroma(colors.slate[400]).alpha(0.12).css(),
-                                'bg-status-bar': colors.slate[300]
+                                'bg-status-bar': colors.slate[300],
                             },
                             dark : {
                                 'bg-app-bar'   : colors.slate[900],
@@ -231,8 +231,8 @@ const theming = plugin.withOptions((options) => ({
                                 'bg-default'   : colors.slate[900],
                                 'bg-dialog'    : colors.slate[800],
                                 'bg-hover'     : 'rgba(255, 255, 255, 0.05)',
-                                'bg-status-bar': colors.slate[900]
+                                'bg-status-bar': colors.slate[900],
-                            }
+                            },
                         },
                         foreground: {
                             light: {
@@ -243,7 +243,7 @@ const theming = plugin.withOptions((options) => ({
                                 'border'        : colors.slate[200],
                                 'divider'       : colors.slate[200],
                                 'icon'          : colors.slate[500],
-                                'mat-icon'      : colors.slate[500]
+                                'mat-icon'      : colors.slate[500],
                             },
                             dark : {
                                 'text-default'  : '#FFFFFF',
@@ -253,14 +253,14 @@ const theming = plugin.withOptions((options) => ({
                                 'border'        : chroma(colors.slate[100]).alpha(0.12).css(),
                                 'divider'       : chroma(colors.slate[100]).alpha(0.12).css(),
                                 'icon'          : colors.slate[400],
-                                'mat-icon'      : colors.slate[400]
+                                'mat-icon'      : colors.slate[400],
-                            }
+                            },
-                        }
+                        },
-                    }
+                    },
-                }
+                },
-            }
+            },
         };
-    }
+    },
 );
 
 module.exports = theming;

src/@fuse/tailwind/plugins/utilities.js

@@ -1,7 +1,7 @@
 const plugin = require('tailwindcss/plugin');
 
 module.exports = plugin(({
-    addComponents
+    addComponents,
 }) =>
 {
     /*
@@ -13,55 +13,55 @@ module.exports = plugin(({
         {
             '.mat-icon'       : {
                 '--tw-text-opacity': '1',
-                color              : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))'
+                color              : 'rgba(var(--fuse-mat-icon-rgb), var(--tw-text-opacity))',
             },
             '.text-default'   : {
                 '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important'
+                color              : 'rgba(var(--fuse-text-default-rgb), var(--tw-text-opacity)) !important',
             },
             '.text-secondary' : {
                 '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important'
+                color              : 'rgba(var(--fuse-text-secondary-rgb), var(--tw-text-opacity)) !important',
             },
             '.text-hint'      : {
                 '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important'
+                color              : 'rgba(var(--fuse-text-hint-rgb), var(--tw-text-opacity)) !important',
             },
             '.text-disabled'  : {
                 '--tw-text-opacity': '1 !important',
-                color              : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important'
+                color              : 'rgba(var(--fuse-text-disabled-rgb), var(--tw-text-opacity)) !important',
             },
             '.divider'        : {
-                color: 'var(--fuse-divider) !important'
+                color: 'var(--fuse-divider) !important',
             },
             '.bg-card'        : {
                 '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important'
+                backgroundColor  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-bg-opacity)) !important',
             },
             '.bg-default'     : {
                 '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important'
+                backgroundColor  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-bg-opacity)) !important',
             },
             '.bg-dialog'      : {
                 '--tw-bg-opacity': '1 !important',
-                backgroundColor  : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important'
+                backgroundColor  : 'rgba(var(--fuse-bg-dialog-rgb), var(--tw-bg-opacity)) !important',
             },
             '.ring-bg-default': {
                 '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color'  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important'
+                '--tw-ring-color'  : 'rgba(var(--fuse-bg-default-rgb), var(--tw-ring-opacity)) !important',
             },
             '.ring-bg-card'   : {
                 '--tw-ring-opacity': '1 !important',
-                '--tw-ring-color'  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
+                '--tw-ring-color'  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important',
-            }
+            },
-        }
+        },
     );
 
     addComponents(
         {
             '.bg-hover': {
-                backgroundColor: 'var(--fuse-bg-hover) !important'
+                backgroundColor: 'var(--fuse-bg-hover) !important',
-            }
+            },
-        }
+        },
     );
 });

src/@fuse/tailwind/utils/generate-contrasts.js

@@ -23,7 +23,7 @@ const generateContrasts = (palette) =>
     // Generate the contrasting colors
     return _.fromPairs(_.map(palette, ((color, hue) => [
             hue,
-            chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor
+            chroma.contrast(color, darkColor) > chroma.contrast(color, lightColor) ? darkColor : lightColor,
         ]
     )));
 };

src/@fuse/tailwind/utils/generate-palette.js

@@ -22,7 +22,7 @@ const generatePalette = (config) =>
         600: null,
         700: null,
         800: null,
-        900: null
+        900: null,
     };
 
     // If a single color is provided,
@@ -58,14 +58,14 @@ const generatePalette = (config) =>
     colors.unshift(
         chroma.scale(['white', palette[500]])
             .domain([0, 1])
-            .mode("lrgb")
+            .mode('lrgb')
-            .colors(50)[1]
+            .colors(50)[1],
     );
     colors.push(
         chroma.scale(['black', palette[500]])
             .domain([0, 1])
-            .mode("lrgb")
+            .mode('lrgb')
-            .colors(10)[1]
+            .colors(10)[1],
     );
 
     // Prepare the domains array
@@ -74,7 +74,7 @@ const generatePalette = (config) =>
         ...Object.entries(palette)
             .filter(([key, value]) => value)
             .map(([key]) => parseInt(key) / 1000),
-        1
+        1,
     ];
 
     // Generate the color scale
@@ -93,7 +93,7 @@ const generatePalette = (config) =>
         600: scale(0.6).hex(),
         700: scale(0.7).hex(),
         800: scale(0.8).hex(),
-        900: scale(0.9).hex()
+        900: scale(0.9).hex(),
     };
 };
 

src/@fuse/tailwind/utils/json-to-sass-map.js

@@ -13,13 +13,13 @@ module.exports = (data) =>
     {
         let scss = '';
 
-        if ( typeof chunk === "object" && !Array.isArray(chunk) )
+        if ( typeof chunk === 'object' && !Array.isArray(chunk) )
         {
             _.mapKeys(chunk, (value, key) =>
             {
                 scss += key + ': ';
 
-                if ( typeof value === "object" )
+                if ( typeof value === 'object' )
                 {
                     if ( Array.isArray(value) )
                     {

src/@fuse/validators/validators.ts

@@ -20,7 +20,8 @@ export class FuseValidators
      */
     static mustMatch(controlPath: string, matchingControlPath: string): ValidatorFn
     {
-        return (formGroup: AbstractControl): ValidationErrors | null => {
+        return (formGroup: AbstractControl): ValidationErrors | null =>
+        {
 
             // Get the control and matching control
             const control = formGroup.get(controlPath);

src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
     selector   : 'app-root',
     templateUrl: './app.component.html',
-    styleUrls  : ['./app.component.scss']
+    styleUrls  : ['./app.component.scss'],
+    standalone : true,
+    imports    : [RouterOutlet],
 })
 export class AppComponent
 {

src/app/app.module.ts

@@ -1,46 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
-import { FuseModule } from '@fuse';
-import { FuseConfigModule } from '@fuse/services/config';
-import { FuseMockApiModule } from '@fuse/lib/mock-api';
-import { CoreModule } from 'app/core/core.module';
-import { appConfig } from 'app/core/config/app.config';
-import { mockApiServices } from 'app/mock-api';
-import { LayoutModule } from 'app/layout/layout.module';
-import { AppComponent } from 'app/app.component';
-import { appRoutes } from 'app/app.routing';
-
-const routerConfig: ExtraOptions = {
-    preloadingStrategy       : PreloadAllModules,
-    scrollPositionRestoration: 'enabled'
-};
-
-@NgModule({
-    declarations: [
-        AppComponent
-    ],
-    imports     : [
-        BrowserModule,
-        BrowserAnimationsModule,
-        RouterModule.forRoot(appRoutes, routerConfig),
-
-        // Fuse, FuseConfig & FuseMockAPI
-        FuseModule,
-        FuseConfigModule.forRoot(appConfig),
-        FuseMockApiModule.forRoot(mockApiServices),
-
-        // Core module of your application
-        CoreModule,
-
-        // Layout module of your application
-        LayoutModule
-    ],
-    bootstrap   : [
-        AppComponent
-    ]
-})
-export class AppModule
-{
-}

src/app/app.resolvers.ts

@@ -1,14 +1,14 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { forkJoin, Observable } from 'rxjs';
-import { MessagesService } from 'app/layout/common/messages/messages.service';
 import { NavigationService } from 'app/core/navigation/navigation.service';
+import { MessagesService } from 'app/layout/common/messages/messages.service';
 import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
 import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
 import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
+import { forkJoin, Observable } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class InitialDataResolver implements Resolve<any>
 {
@@ -20,7 +20,7 @@ export class InitialDataResolver implements Resolve<any>
         private _navigationService: NavigationService,
         private _notificationsService: NotificationsService,
         private _quickChatService: QuickChatService,
-        private _shortcutsService: ShortcutsService
+        private _shortcutsService: ShortcutsService,
     )
     {
     }
@@ -43,7 +43,7 @@ export class InitialDataResolver implements Resolve<any>
             this._messagesService.getAll(),
             this._notificationsService.getAll(),
             this._quickChatService.getChats(),
-            this._shortcutsService.getAll()
+            this._shortcutsService.getAll(),
         ]);
     }
 }

src/app/app.routing.ts

@@ -1,8 +1,8 @@
 import { Route } from '@angular/router';
+import { InitialDataResolver } from 'app/app.resolvers';
 import { AuthGuard } from 'app/core/auth/guards/auth.guard';
 import { NoAuthGuard } from 'app/core/auth/guards/noAuth.guard';
 import { LayoutComponent } from 'app/layout/layout.component';
-import { InitialDataResolver } from 'app/app.resolvers';
 
 // @formatter:off
 /* eslint-disable max-len */

src/app/core/auth/auth.interceptor.ts

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { catchError, Observable, throwError } from 'rxjs';
+import { Injectable } from '@angular/core';
 import { AuthService } from 'app/core/auth/auth.service';
 import { AuthUtils } from 'app/core/auth/auth.utils';
+import { catchError, Observable, throwError } from 'rxjs';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor
@@ -36,13 +36,14 @@ export class AuthInterceptor implements HttpInterceptor
         if ( this._authService.accessToken && !AuthUtils.isTokenExpired(this._authService.accessToken) )
         {
             newReq = req.clone({
-                headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken)
+                headers: req.headers.set('Authorization', 'Bearer ' + this._authService.accessToken),
             });
         }
 
         // Response
         return next.handle(newReq).pipe(
-            catchError((error) => {
+            catchError((error) =>
+            {
 
                 // Catch "401 Unauthorized" responses
                 if ( error instanceof HttpErrorResponse && error.status === 401 )
@@ -55,7 +56,7 @@ export class AuthInterceptor implements HttpInterceptor
                 }
 
                 return throwError(error);
-            })
+            }),
         );
     }
 }

src/app/core/auth/auth.module.ts

@@ -1,20 +1,20 @@
-import { NgModule } from '@angular/core';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { AuthService } from 'app/core/auth/auth.service';
+import { NgModule } from '@angular/core';
 import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
+import { AuthService } from 'app/core/auth/auth.service';
 
 @NgModule({
     imports  : [
-        HttpClientModule
+        HttpClientModule,
     ],
     providers: [
         AuthService,
         {
             provide : HTTP_INTERCEPTORS,
             useClass: AuthInterceptor,
-            multi   : true
+            multi   : true,
-        }
+        },
-    ]
+    ],
 })
 export class AuthModule
 {

src/app/core/auth/auth.service.ts

@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
+import { Injectable } from '@angular/core';
 import { AuthUtils } from 'app/core/auth/auth.utils';
 import { UserService } from 'app/core/user/user.service';
+import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
 
 @Injectable()
 export class AuthService
@@ -14,7 +14,7 @@ export class AuthService
      */
     constructor(
         private _httpClient: HttpClient,
-        private _userService: UserService
+        private _userService: UserService,
     )
     {
     }
@@ -74,7 +74,8 @@ export class AuthService
         }
 
         return this._httpClient.post('api/auth/sign-in', credentials).pipe(
-            switchMap((response: any) => {
+            switchMap((response: any) =>
+            {
 
                 // Store the access token in the local storage
                 this.accessToken = response.accessToken;
@@ -87,7 +88,7 @@ export class AuthService
 
                 // Return a new observable with the response
                 return of(response);
-            })
+            }),
         );
     }
 
@@ -98,14 +99,15 @@ export class AuthService
     {
         // Sign in using the token
         return this._httpClient.post('api/auth/sign-in-with-token', {
-            accessToken: this.accessToken
+            accessToken: this.accessToken,
         }).pipe(
             catchError(() =>
 
                 // Return false
-                of(false)
+                of(false),
             ),
-            switchMap((response: any) => {
+            switchMap((response: any) =>
+            {
 
                 // Replace the access token with the new one if it's available on
                 // the response object.
@@ -127,7 +129,7 @@ export class AuthService
 
                 // Return true
                 return of(true);
-            })
+            }),
         );
     }
 

src/app/core/auth/auth.utils.ts

@@ -67,7 +67,7 @@ export class AuthUtils
         if ( str.length % 4 === 1 )
         {
             throw new Error(
-                '\'atob\' failed: The string to be decoded is not correctly encoded.'
+                '\'atob\' failed: The string to be decoded is not correctly encoded.',
             );
         }
 
@@ -107,8 +107,8 @@ export class AuthUtils
     {
         return decodeURIComponent(
             Array.prototype.map
-                 .call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+                .call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
-                 .join('')
+                .join(''),
         );
     }
 

src/app/core/auth/guards/auth.guard.ts

@@ -1,14 +1,16 @@
 import { inject } from '@angular/core';
 import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
-import { of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
+import { of, switchMap } from 'rxjs';
 
-export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
+export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
+{
     const router: Router = inject(Router);
 
     // Check the authentication status
     return inject(AuthService).check().pipe(
-        switchMap((authenticated) => {
+        switchMap((authenticated) =>
+        {
 
             // If the user is not authenticated...
             if ( !authenticated )
@@ -22,6 +24,6 @@ export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
 
             // Allow the access
             return of(true);
-        })
+        }),
     );
 };

src/app/core/auth/guards/noAuth.guard.ts

@@ -1,14 +1,16 @@
 import { inject } from '@angular/core';
 import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
-import { of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
+import { of, switchMap } from 'rxjs';
 
-export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
+export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
+{
     const router: Router = inject(Router);
 
     // Check the authentication status
     return inject(AuthService).check().pipe(
-        switchMap((authenticated) => {
+        switchMap((authenticated) =>
+        {
 
             // If the user is authenticated...
             if ( authenticated )
@@ -18,6 +20,6 @@ export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
 
             // Allow the access
             return of(true);
-        })
+        }),
     );
 };

src/app/core/config/app.config.ts

@@ -39,33 +39,33 @@ export const appConfig: AppConfig = {
         sm: '600px',
         md: '960px',
         lg: '1280px',
-        xl: '1440px'
+        xl: '1440px',
     },
     theme  : 'theme-default',
     themes : [
         {
             id  : 'theme-default',
-            name: 'Default'
+            name: 'Default',
         },
         {
             id  : 'theme-brand',
-            name: 'Brand'
+            name: 'Brand',
         },
         {
             id  : 'theme-teal',
-            name: 'Teal'
+            name: 'Teal',
         },
         {
             id  : 'theme-rose',
-            name: 'Rose'
+            name: 'Rose',
         },
         {
             id  : 'theme-purple',
-            name: 'Purple'
+            name: 'Purple',
         },
         {
             id  : 'theme-amber',
-            name: 'Amber'
+            name: 'Amber',
-        }
+        },
-    ]
+    ],
 };

src/app/core/core.module.ts

@@ -7,8 +7,8 @@ import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
     imports: [
         AuthModule,
         IconsModule,
-        TranslocoCoreModule
+        TranslocoCoreModule,
-    ]
+    ],
 })
 export class CoreModule
 {
@@ -16,7 +16,7 @@ export class CoreModule
      * Constructor
      */
     constructor(
-        @Optional() @SkipSelf() parentModule?: CoreModule
+        @Optional() @SkipSelf() parentModule?: CoreModule,
     )
     {
         // Do not allow multiple injections

src/app/core/icons/icons.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @NgModule()
 export class IconsModule
@@ -10,7 +10,7 @@ export class IconsModule
      */
     constructor(
         private _domSanitizer: DomSanitizer,
-        private _matIconRegistry: MatIconRegistry
+        private _matIconRegistry: MatIconRegistry,
     )
     {
         // Register icon sets

src/app/core/navigation/navigation.service.ts

@@ -1,10 +1,10 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject, tap } from 'rxjs';
+import { Injectable } from '@angular/core';
 import { Navigation } from 'app/core/navigation/navigation.types';
+import { Observable, ReplaySubject, tap } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class NavigationService
 {
@@ -39,9 +39,10 @@ export class NavigationService
     get(): Observable<Navigation>
     {
         return this._httpClient.get<Navigation>('api/common/navigation').pipe(
-            tap((navigation) => {
+            tap((navigation) =>
+            {
                 this._navigation.next(navigation);
-            })
+            }),
         );
     }
 }

src/app/core/transloco/transloco.http-loader.ts

@@ -1,10 +1,10 @@
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
 import { Translation, TranslocoLoader } from '@ngneat/transloco';
+import { Observable } from 'rxjs';
 
 @Injectable({
-    providedIn: 'root'
+    providedIn: 'root',
 })
 export class TranslocoHttpLoader implements TranslocoLoader
 {