Updated Angular & Angular Material versions

Updated various other packages
Updated changelog and the version number

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse-angular",
-    "version": "17.0.1",
+    "version": "17.1.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -13,25 +13,25 @@
         "test": "ng test"
     },
     "dependencies": {
-        "@angular/animations": "15.0.0",
-        "@angular/cdk": "15.0.0",
-        "@angular/common": "15.0.0",
-        "@angular/compiler": "15.0.0",
-        "@angular/core": "15.0.0",
-        "@angular/forms": "15.0.0",
-        "@angular/material": "15.0.0",
-        "@angular/material-luxon-adapter": "15.0.0",
-        "@angular/platform-browser": "15.0.0",
-        "@angular/platform-browser-dynamic": "15.0.0",
-        "@angular/router": "15.0.0",
-        "@ngneat/transloco": "4.1.1",
+        "@angular/animations": "15.0.3",
+        "@angular/cdk": "15.0.2",
+        "@angular/common": "15.0.3",
+        "@angular/compiler": "15.0.3",
+        "@angular/core": "15.0.3",
+        "@angular/forms": "15.0.3",
+        "@angular/material": "15.0.2",
+        "@angular/material-luxon-adapter": "15.0.2",
+        "@angular/platform-browser": "15.0.3",
+        "@angular/platform-browser-dynamic": "15.0.3",
+        "@angular/router": "15.0.3",
+        "@ngneat/transloco": "4.2.1",
         "apexcharts": "3.36.3",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.6.0",
+        "highlight.js": "11.7.0",
         "lodash-es": "4.17.21",
-        "luxon": "3.1.0",
+        "luxon": "3.1.1",
         "ng-apexcharts": "1.7.4",
-        "ngx-quill": "19.0.1",
+        "ngx-quill": "20.0.1",
         "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
         "rxjs": "7.5.7",
@@ -39,16 +39,16 @@
         "zone.js": "0.12.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "15.0.0",
-        "@angular/cli": "15.0.0",
-        "@angular/compiler-cli": "15.0.0",
+        "@angular-devkit/build-angular": "15.0.3",
+        "@angular/cli": "15.0.3",
+        "@angular/compiler-cli": "15.0.3",
         "@tailwindcss/line-clamp": "0.4.2",
         "@tailwindcss/typography": "0.5.8",
         "@types/chroma-js": "2.1.4",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.3.0",
-        "@types/lodash": "4.14.189",
+        "@types/jasmine": "4.3.1",
+        "@types/lodash": "4.14.191",
         "@types/lodash-es": "4.17.6",
         "@types/luxon": "3.1.0",
         "autoprefixer": "10.4.13",
@@ -60,7 +60,7 @@
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.0.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.19",
+        "postcss": "8.4.20",
         "tailwindcss": "3.2.4",
         "typescript": "4.8.4"
     }

src/@fuse/styles/components/input.scss

@@ -20,22 +20,22 @@ textarea {
     }
 
     &:-webkit-autofill {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
     }
 
     &:-webkit-autofill:hover {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
     }
 
     &:-webkit-autofill:focus {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
     }
 
     &:-webkit-autofill:active {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
+    }
+
+    [data-autocompleted] {
+        background-color: transparent !important;
     }
 }

src/@fuse/styles/overrides/angular-material.scss

@@ -315,6 +315,10 @@
     }
 }
 
+.mdc-checkbox__native-control {
+    opacity: 0 !important;
+}
+
 /* -------------------------------------------------------------------------- */
 /*  @ Chip
 /* -------------------------------------------------------------------------- */

src/@fuse/styles/themes.scss

@@ -131,11 +131,11 @@ $dark-base: (
 
     /* Define a light & dark Angular Material theme with the generated palettes */
     $light-theme: mat.define-light-theme((
-        color: ($palettes)
+        color: $palettes
     ));
 
     $dark-theme: mat.define-dark-theme((
-        color: ($palettes)
+        color: $palettes
     ));
 
     /* Merge the custom base colors with the generated themes */

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('17.0.1').full;
+export const FUSE_VERSION = new Version('17.1.0').full;

src/app/app.routing.ts

@@ -12,9 +12,9 @@ export const appRoutes: Route[] = [
     // Redirect empty path to '/dashboards/project'
     {path: '', pathMatch : 'full', redirectTo: 'dashboards/project'},
 
-    // Redirect signed in user to the '/dashboards/project'
+    // Redirect signed-in user to the '/dashboards/project'
     //
-    // After the user signs in, the sign in page will redirect the user to the 'signed-in-redirect'
+    // After the user signs in, the sign-in page will redirect the user to the 'signed-in-redirect'
     // path. Below is another redirection for that path to redirect the user to the desired
     // location. This is a small convenience to keep all main routes together here on this file.
     {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
@@ -22,8 +22,7 @@ export const appRoutes: Route[] = [
     // Auth routes for guests
     {
         path: '',
-        canActivate: [NoAuthGuard],
-        canActivateChild: [NoAuthGuard],
+        canMatch: [NoAuthGuard],
         component: LayoutComponent,
         data: {
             layout: 'empty'
@@ -40,8 +39,7 @@ export const appRoutes: Route[] = [
     // Auth routes for authenticated users
     {
         path: '',
-        canActivate: [AuthGuard],
-        canActivateChild: [AuthGuard],
+        canMatch: [AuthGuard],
         component: LayoutComponent,
         data: {
             layout: 'empty'
@@ -55,25 +53,24 @@ export const appRoutes: Route[] = [
     // Landing routes
     {
         path: '',
-        component  : LayoutComponent,
+        component: LayoutComponent,
         data: {
             layout: 'empty'
         },
-        children   : [
+        children: [
             {path: 'home', loadChildren: () => import('app/modules/landing/home/home.module').then(m => m.LandingHomeModule)},
         ]
     },
 
     // Admin routes
     {
-        path       : '',
-        canActivate: [AuthGuard],
-        canActivateChild: [AuthGuard],
-        component  : LayoutComponent,
-        resolve    : {
+        path: '',
+        canMatch: [AuthGuard],
+        component: LayoutComponent,
+        resolve: {
             initialData: InitialDataResolver,
         },
-        children   : [
+        children: [
 
             // Dashboards
             {path: 'dashboards', children: [

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

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import { CanMatch, Route, Router, UrlSegment, UrlTree } from '@angular/router';
 import { Observable, of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 
 @Injectable({
     providedIn: 'root'
 })
-export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
+export class AuthGuard implements CanMatch
 {
     /**
      * Constructor
@@ -23,38 +23,14 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Can activate
-     *
-     * @param route
-     * @param state
-     */
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
-    {
-        const redirectUrl = state.url === '/sign-out' ? '/' : state.url;
-        return this._check(redirectUrl);
-    }
-
-    /**
-     * Can activate child
-     *
-     * @param childRoute
-     * @param state
-     */
-    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        const redirectUrl = state.url === '/sign-out' ? '/' : state.url;
-        return this._check(redirectUrl);
-    }
-
-    /**
-     * Can load
+     * Can match
      *
      * @param route
      * @param segments
      */
-    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean
+    canMatch(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
     {
-        return this._check('/');
+        return this._check(segments);
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -64,29 +40,28 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
     /**
      * Check the authenticated status
      *
-     * @param redirectURL
+     * @param segments
      * @private
      */
-    private _check(redirectURL: string): Observable<boolean>
+    private _check(segments: UrlSegment[]): Observable<boolean | UrlTree>
     {
         // Check the authentication status
-        return this._authService.check()
-                   .pipe(
-                       switchMap((authenticated) => {
+        return this._authService.check().pipe(
+            switchMap((authenticated) => {
 
-                           // If the user is not authenticated...
-                           if ( !authenticated )
-                           {
-                               // Redirect to the sign-in page
-                               this._router.navigate(['sign-in'], {queryParams: {redirectURL}});
+                // If the user is not authenticated...
+                if ( !authenticated )
+                {
+                    // Redirect to the sign-in page with a redirectUrl param
+                    const redirectURL = `/${segments.join('/')}`;
+                    const urlTree = this._router.parseUrl(`sign-in?redirectURL=${redirectURL}`);
 
-                               // Prevent the access
-                               return of(false);
-                           }
+                    return of(urlTree);
+                }
 
-                           // Allow the access
-                           return of(true);
-                       })
-                   );
+                // Allow the access
+                return of(true);
+            })
+        );
     }
 }

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

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import { CanMatch, Route, Router, UrlSegment, UrlTree } from '@angular/router';
 import { Observable, of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 
 @Injectable({
     providedIn: 'root'
 })
-export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
+export class NoAuthGuard implements CanMatch
 {
     /**
      * Constructor
@@ -23,34 +23,12 @@ export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Can activate
-     *
-     * @param route
-     * @param state
-     */
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
-    {
-        return this._check();
-    }
-
-    /**
-     * Can activate child
-     *
-     * @param childRoute
-     * @param state
-     */
-    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        return this._check();
-    }
-
-    /**
-     * Can load
+     * Can match
      *
      * @param route
      * @param segments
      */
-    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean
+    canMatch(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
     {
         return this._check();
     }
@@ -66,24 +44,10 @@ export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
      */
     private _check(): Observable<boolean>
     {
-        // Check the authentication status
-        return this._authService.check()
-                   .pipe(
-                       switchMap((authenticated) => {
-
-                           // If the user is authenticated...
-                           if ( authenticated )
-                           {
-                               // Redirect to the root
-                               this._router.navigate(['']);
-
-                               // Prevent the access
-                               return of(false);
-                           }
-
-                           // Allow the access
-                           return of(true);
-                       })
-                   );
+        // Check the authentication status and return an observable of
+        // "true" or "false" to allow or prevent the access
+        return this._authService.check().pipe(
+            switchMap((authenticated) => of(!authenticated))
+        );
     }
 }

src/app/mock-api/common/navigation/data.ts

@@ -967,7 +967,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '17.0.1',
+                    title  : '17.1.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },

src/app/modules/admin/docs/changelog/changelog.ts

@@ -10,6 +10,29 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v17.1.0
+        {
+            version    : 'v17.1.0',
+            releaseDate: 'Dec 12, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v15.0.0',
+                        '(Dependencies) Updated various other packages',
+                        '(Core) Use the new "CanMatch" guard for routes rather than "CanLoad" & "CanActivate" combination'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(Angular Material) Fixed: Autocompleted input background color does not look right',
+                        '(Angular Material) Fixed: Tailwind breaks the disabled mat-checkbox styling',
+                    ]
+                }
+            ]
+        },
+
         // v17.0.1
         {
             version    : 'v17.0.1',