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

.nvmrc

@@ -1 +1 @@
-16
+20

angular.json

@@ -90,10 +90,10 @@
                     "builder": "@angular-devkit/build-angular:dev-server",
                     "configurations": {
                         "production": {
-                            "browserTarget": "fuse:build:production"
+                          "buildTarget": "fuse:build:production"
                         },
                         "development": {
-                            "browserTarget": "fuse:build:development"
+                          "buildTarget": "fuse:build:development"
                         }
                     },
                     "defaultConfiguration": "development"
@@ -101,7 +101,7 @@
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n",
                     "options": {
-                        "browserTarget": "fuse:build"
+                      "buildTarget": "fuse:build"
                     }
                 },
                 "test": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse-angular",
-    "version": "18.0.0",
+    "version": "19.0.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -13,54 +13,54 @@
         "test": "ng test"
     },
     "dependencies": {
-        "@angular/animations": "16.0.3",
+        "@angular/animations": "17.0.3",
-        "@angular/cdk": "16.0.2",
+        "@angular/cdk": "17.0.1",
-        "@angular/common": "16.0.3",
+        "@angular/common": "17.0.3",
-        "@angular/compiler": "16.0.3",
+        "@angular/compiler": "17.0.3",
-        "@angular/core": "16.0.3",
+        "@angular/core": "17.0.3",
-        "@angular/forms": "16.0.3",
+        "@angular/forms": "17.0.3",
-        "@angular/material": "16.0.2",
+        "@angular/material": "17.0.1",
-        "@angular/material-luxon-adapter": "16.0.2",
+        "@angular/material-luxon-adapter": "17.0.1",
-        "@angular/platform-browser": "16.0.3",
+        "@angular/platform-browser": "17.0.3",
-        "@angular/platform-browser-dynamic": "16.0.3",
+        "@angular/platform-browser-dynamic": "17.0.3",
-        "@angular/router": "16.0.3",
+        "@angular/router": "17.0.3",
-        "@ngneat/transloco": "4.2.7",
+        "@ngneat/transloco": "6.0.0",
-        "apexcharts": "3.40.0",
+        "apexcharts": "3.44.0",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.8.0",
+        "highlight.js": "11.9.0",
         "lodash-es": "4.17.21",
-        "luxon": "3.3.0",
+        "luxon": "3.4.4",
-        "ng-apexcharts": "1.7.6",
+        "ng-apexcharts": "1.8.0",
-        "ngx-quill": "22.0.0",
+        "ngx-quill": "24.0.2",
         "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
         "rxjs": "7.8.1",
-        "tslib": "2.5.2",
+        "tslib": "2.6.2",
-        "zone.js": "0.13.0"
+        "zone.js": "0.14.2"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "16.0.3",
+        "@angular-devkit/build-angular": "17.0.1",
-        "@angular/cli": "16.0.3",
+        "@angular/cli": "17.0.1",
-        "@angular/compiler-cli": "16.0.3",
+        "@angular/compiler-cli": "17.0.3",
-        "@tailwindcss/typography": "0.5.9",
+        "@tailwindcss/typography": "0.5.10",
-        "@types/chroma-js": "2.4.0",
+        "@types/chroma-js": "2.4.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.3.2",
+        "@types/jasmine": "5.1.2",
-        "@types/lodash": "4.14.195",
+        "@types/lodash": "4.14.201",
-        "@types/lodash-es": "4.17.7",
+        "@types/lodash-es": "4.17.11",
-        "@types/luxon": "3.3.0",
+        "@types/luxon": "3.3.4",
-        "autoprefixer": "10.4.14",
+        "autoprefixer": "10.4.16",
         "chroma-js": "2.4.2",
-        "jasmine-core": "5.0.0",
+        "jasmine-core": "5.1.1",
         "karma": "6.4.2",
         "karma-chrome-launcher": "3.2.0",
-        "karma-coverage": "2.2.0",
+        "karma-coverage": "2.2.1",
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.0.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.24",
+        "postcss": "8.4.31",
-        "tailwindcss": "3.3.2",
+        "tailwindcss": "3.3.5",
-        "typescript": "5.0.4"
+        "typescript": "5.2.2"
     }
 }

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

@@ -19,20 +19,22 @@ textarea {
         @apply text-hint;
     }
 
-    &:-webkit-autofill {
+    /* Autofill color fix */
-        transition: background-color 600000s 0s, color 600000s 0s !important;
+    &:-webkit-autofill,
-    }
+    &:-webkit-autofill:hover,
-
+    &:-webkit-autofill:focus,
-    &:-webkit-autofill:hover {
-        transition: background-color 600000s 0s, color 600000s 0s !important;
-    }
-
-    &:-webkit-autofill:focus {
-        transition: background-color 600000s 0s, color 600000s 0s !important;
-    }
-
     &:-webkit-autofill:active {
-        transition: background-color 600000s 0s, color 600000s 0s !important;
+        -webkit-background-clip: text;
+        transition: background-color 5000s !important;
+    }
+
+    .dark & {
+        &:-webkit-autofill,
+        &:-webkit-autofill:hover,
+        &:-webkit-autofill:focus,
+        &:-webkit-autofill:active {
+            -webkit-text-fill-color: rgba(255, 255, 255, 0.87);
+        }
     }
 
     [data-autocompleted] {

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

@@ -1192,6 +1192,21 @@
 /* -------------------------------------------------------------------------- */
 
 
+/* -------------------------------------------------------------------------- */
+/*  @ Snack bar
+/* -------------------------------------------------------------------------- */
+.mat-mdc-snack-bar-container {
+
+    .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
+        color: #FFFFFF !important;
+
+        .dark & {
+            color: #000000 !important;
+        }
+    }
+}
+
+
 /* -------------------------------------------------------------------------- */
 /*  @ Stepper
 /* -------------------------------------------------------------------------- */

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

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

src/app/app.config.ts

@@ -1,15 +1,17 @@
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, inject } from '@angular/core';
 import { LuxonDateAdapter } from '@angular/material-luxon-adapter';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { PreloadAllModules, provideRouter, withInMemoryScrolling, withPreloading } from '@angular/router';
 import { provideFuse } from '@fuse';
+import { provideTransloco, TranslocoService } from '@ngneat/transloco';
+import { firstValueFrom } from 'rxjs';
 import { appRoutes } from 'app/app.routes';
 import { provideAuth } from 'app/core/auth/auth.provider';
 import { provideIcons } from 'app/core/icons/icons.provider';
-import { provideTransloco } from 'app/core/transloco/transloco.provider';
 import { mockApiServices } from 'app/mock-api';
+import { TranslocoHttpLoader } from './core/transloco/transloco.http-loader';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -41,7 +43,38 @@ export const appConfig: ApplicationConfig = {
         },
 
         // Transloco Config
-        provideTransloco(),
+        provideTransloco({
+            config: {
+                availableLangs      : [
+                    {
+                        id   : 'en',
+                        label: 'English',
+                    },
+                    {
+                        id   : 'tr',
+                        label: 'Turkish',
+                    },
+                ],
+                defaultLang         : 'en',
+                fallbackLang        : 'en',
+                reRenderOnLangChange: true,
+                prodMode            : true,
+            },
+            loader: TranslocoHttpLoader,
+        }),
+        {
+            // Preload the default language before the app starts to prevent empty/jumping content
+            provide   : APP_INITIALIZER,
+            useFactory: () =>
+            {
+                const translocoService = inject(TranslocoService);
+                const defaultLang = translocoService.getDefaultLang();
+                translocoService.setActiveLang(defaultLang);
+
+                return () => firstValueFrom(translocoService.load(defaultLang));
+            },
+            multi     : true,
+        },
 
         // Fuse
         provideAuth(),

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

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, 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';
@@ -8,16 +8,8 @@ import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
 export class AuthService
 {
     private _authenticated: boolean = false;
-
+    private _httpClient = inject(HttpClient);
-    /**
+    private _userService = inject(UserService);
-     * Constructor
-     */
-    constructor(
-        private _httpClient: HttpClient,
-        private _userService: UserService,
-    )
-    {
-    }
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors

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

@@ -7,13 +7,6 @@
 
 export class AuthUtils
 {
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------

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

@@ -1,20 +1,14 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Navigation } from 'app/core/navigation/navigation.types';
 import { Observable, ReplaySubject, tap } from 'rxjs';
 
 @Injectable({providedIn: 'root'})
 export class NavigationService
 {
+    private _httpClient = inject(HttpClient);
     private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
 
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------

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

@@ -1,18 +1,12 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Translation, TranslocoLoader } from '@ngneat/transloco';
 import { Observable } from 'rxjs';
 
 @Injectable({providedIn: 'root'})
 export class TranslocoHttpLoader implements TranslocoLoader
 {
-    /**
+    private _httpClient = inject(HttpClient);
-     * Constructor
-     */
-    constructor(
-        private _httpClient: HttpClient)
-    {
-    }
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods

src/app/core/transloco/transloco.provider.ts

@@ -1,48 +0,0 @@
-import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
-import { TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
-
-export const provideTransloco = (): Array<Provider | EnvironmentProviders> =>
-{
-    return [
-        importProvidersFrom(TranslocoModule),
-        {
-            // Provide the default Transloco configuration
-            provide : TRANSLOCO_CONFIG,
-            useValue: translocoConfig({
-                availableLangs      : [
-                    {
-                        id   : 'en',
-                        label: 'English',
-                    },
-                    {
-                        id   : 'tr',
-                        label: 'Turkish',
-                    },
-                ],
-                defaultLang         : 'en',
-                fallbackLang        : 'en',
-                reRenderOnLangChange: true,
-                prodMode            : true,
-            }),
-        },
-        {
-            // Provide the default Transloco loader
-            provide : TRANSLOCO_LOADER,
-            useClass: TranslocoHttpLoader,
-        },
-        {
-            // Preload the default language before the app starts to prevent empty/jumping content
-            provide   : APP_INITIALIZER,
-            useFactory: () =>
-            {
-                const translocoService = inject(TranslocoService);
-                const defaultLang = translocoService.getDefaultLang();
-                translocoService.setActiveLang(defaultLang);
-
-                return () => translocoService.load(defaultLang).toPromise();
-            },
-            multi     : true,
-        },
-    ];
-};

src/app/core/user/user.service.ts

@@ -1,20 +1,14 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { User } from 'app/core/user/user.types';
 import { map, Observable, ReplaySubject, tap } from 'rxjs';
 
 @Injectable({providedIn: 'root'})
 export class UserService
 {
+    private _httpClient = inject(HttpClient);
     private _user: ReplaySubject<User> = new ReplaySubject<User>(1);
 
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
@@ -40,7 +34,7 @@ export class UserService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Get the current logged in user data
+     * Get the current signed-in user data
      */
     get(): Observable<User>
     {

src/app/layout/common/quick-chat/quick-chat.component.html

@@ -162,9 +162,7 @@
                         <div class="flex items-center h-11 my-px ml-4">
                             <button
                                 mat-icon-button>
-                                <mat-icon
+                                <mat-icon [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
-                                    class="rotate-90"
-                                    [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
                             </button>
                         </div>
                     </div>

src/app/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -27,7 +27,7 @@
                     {{user.name}}
                 </div>
                 <div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50">
-                    brian.hughes@company.com
+                    brian.hughes&#64;company.com
                 </div>
             </div>
         </div>