Updated version numbers

Increased version number

.npmrc

@@ -1 +0,0 @@
-legacy-peer-deps=true

.nvmrc

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

angular.json

@@ -32,7 +32,7 @@
                             "crypto-js/hmac-sha256",
                             "crypto-js/enc-base64",
                             "flat",
-                            "quill"
+                            "quill-delta"
                         ],
                         "assets": [
                             "src/favicon-16x16.png",
@@ -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.1.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -13,54 +13,53 @@
         "test": "ng test"
     },
     "dependencies": {
-        "@angular/animations": "16.0.3",
-        "@angular/cdk": "16.0.2",
-        "@angular/common": "16.0.3",
-        "@angular/compiler": "16.0.3",
-        "@angular/core": "16.0.3",
-        "@angular/forms": "16.0.3",
-        "@angular/material": "16.0.2",
-        "@angular/material-luxon-adapter": "16.0.2",
-        "@angular/platform-browser": "16.0.3",
-        "@angular/platform-browser-dynamic": "16.0.3",
-        "@angular/router": "16.0.3",
-        "@ngneat/transloco": "4.2.7",
-        "apexcharts": "3.40.0",
-        "crypto-js": "3.3.0",
-        "highlight.js": "11.8.0",
+        "@angular/animations": "17.2.4",
+        "@angular/cdk": "17.2.2",
+        "@angular/common": "17.2.4",
+        "@angular/compiler": "17.2.4",
+        "@angular/core": "17.2.4",
+        "@angular/forms": "17.2.4",
+        "@angular/material": "17.2.2",
+        "@angular/material-luxon-adapter": "17.2.2",
+        "@angular/platform-browser": "17.2.4",
+        "@angular/platform-browser-dynamic": "17.2.4",
+        "@angular/router": "17.2.4",
+        "@ngneat/transloco": "6.0.4",
+        "apexcharts": "3.47.0",
+        "crypto-js": "4.2.0",
+        "highlight.js": "11.9.0",
         "lodash-es": "4.17.21",
-        "luxon": "3.3.0",
-        "ng-apexcharts": "1.7.6",
-        "ngx-quill": "22.0.0",
+        "luxon": "3.4.4",
+        "ng-apexcharts": "1.9.0",
+        "ngx-quill": "25.1.1",
         "perfect-scrollbar": "1.5.5",
-        "quill": "1.3.7",
         "rxjs": "7.8.1",
-        "tslib": "2.5.2",
-        "zone.js": "0.13.0"
+        "tslib": "2.6.2",
+        "zone.js": "0.14.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "16.0.3",
-        "@angular/cli": "16.0.3",
-        "@angular/compiler-cli": "16.0.3",
-        "@tailwindcss/typography": "0.5.9",
-        "@types/chroma-js": "2.4.0",
-        "@types/crypto-js": "3.1.47",
+        "@angular-devkit/build-angular": "17.2.3",
+        "@angular/cli": "17.2.3",
+        "@angular/compiler-cli": "17.2.4",
+        "@tailwindcss/typography": "0.5.10",
+        "@types/chroma-js": "2.4.4",
+        "@types/crypto-js": "4.2.2",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.3.2",
-        "@types/lodash": "4.14.195",
-        "@types/lodash-es": "4.17.7",
-        "@types/luxon": "3.3.0",
-        "autoprefixer": "10.4.14",
+        "@types/jasmine": "5.1.4",
+        "@types/lodash": "4.14.202",
+        "@types/lodash-es": "4.17.12",
+        "@types/luxon": "3.4.2",
+        "autoprefixer": "10.4.18",
         "chroma-js": "2.4.2",
-        "jasmine-core": "5.0.0",
-        "karma": "6.4.2",
+        "jasmine-core": "5.1.2",
+        "karma": "6.4.3",
         "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",
+        "karma-jasmine-html-reporter": "2.1.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.24",
-        "tailwindcss": "3.3.2",
-        "typescript": "5.0.4"
+        "postcss": "8.4.35",
+        "tailwindcss": "3.4.1",
+        "typescript": "5.3.3"
     }
 }

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

@@ -1,46 +1,27 @@
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 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({
-    selector       : 'fuse-fullscreen',
-    templateUrl    : './fullscreen.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'fuse-fullscreen',
+    templateUrl: './fullscreen.component.html',
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'fuseFullscreen',
-    standalone     : true,
-    imports        : [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
+    exportAs: 'fuseFullscreen',
+    standalone: true,
+    imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule],
 })
-export class FuseFullscreenComponent implements OnInit
+export class FuseFullscreenComponent
 {
     @Input() iconTpl: TemplateRef<any>;
     @Input() tooltip: string;
-    private _fsDoc: FSDocument;
-    private _fsDocEl: FSDocumentElement;
-    private _isFullscreen: boolean = false;
 
     /**
      * Constructor
      */
-    constructor(@Inject(DOCUMENT) private _document: Document)
-    {
-        this._fsDoc = _document as FSDocument;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        this._fsDocEl = document.documentElement as FSDocumentElement;
-    }
+    constructor(@Inject(DOCUMENT) private _document: Document) { }
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
@@ -51,121 +32,27 @@ export class FuseFullscreenComponent implements OnInit
      */
     toggleFullscreen(): void
     {
-        // Check if the fullscreen is open
-        this._isFullscreen = this._getBrowserFullscreenElement() !== null;
+        if (!this._document.fullscreenEnabled)
+        {
+            console.log('Fullscreen is not available in this browser.');
+            return;
+        }
+
+        // Check if the fullscreen is already open
+        const fullScreen = this._document.fullscreenElement;
 
         // Toggle the fullscreen
-        if ( this._isFullscreen )
+        if (fullScreen)
         {
-            this._closeFullscreen();
+            this._document.exitFullscreen();
         }
         else
         {
-            this._openFullscreen();
-        }
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get browser's fullscreen element
-     *
-     * @private
-     */
-    private _getBrowserFullscreenElement(): Element
-    {
-        if ( typeof this._fsDoc.fullscreenElement !== 'undefined' )
-        {
-            return this._fsDoc.fullscreenElement;
-        }
-
-        if ( typeof this._fsDoc.mozFullScreenElement !== 'undefined' )
-        {
-            return this._fsDoc.mozFullScreenElement;
-        }
-
-        if ( typeof this._fsDoc.msFullscreenElement !== 'undefined' )
-        {
-            return this._fsDoc.msFullscreenElement;
-        }
-
-        if ( typeof this._fsDoc.webkitFullscreenElement !== 'undefined' )
-        {
-            return this._fsDoc.webkitFullscreenElement;
-        }
-
-        throw new Error('Fullscreen mode is not supported by this browser');
-    }
-
-    /**
-     * Open the fullscreen
-     *
-     * @private
-     */
-    private _openFullscreen(): void
-    {
-        if ( this._fsDocEl.requestFullscreen )
-        {
-            this._fsDocEl.requestFullscreen();
-            return;
-        }
-
-        // Firefox
-        if ( this._fsDocEl.mozRequestFullScreen )
-        {
-            this._fsDocEl.mozRequestFullScreen();
-            return;
-        }
-
-        // Chrome, Safari and Opera
-        if ( this._fsDocEl.webkitRequestFullscreen )
-        {
-            this._fsDocEl.webkitRequestFullscreen();
-            return;
-        }
-
-        // IE/Edge
-        if ( this._fsDocEl.msRequestFullscreen )
-        {
-            this._fsDocEl.msRequestFullscreen();
-            return;
-        }
-    }
-
-    /**
-     * Close the fullscreen
-     *
-     * @private
-     */
-    private _closeFullscreen(): void
-    {
-        if ( this._fsDoc.exitFullscreen )
-        {
-            this._fsDoc.exitFullscreen();
-            return;
-        }
-
-        // Firefox
-        if ( this._fsDoc.mozCancelFullScreen )
-        {
-            this._fsDoc.mozCancelFullScreen();
-            return;
-        }
-
-        // Chrome, Safari and Opera
-        if ( this._fsDoc.webkitExitFullscreen )
-        {
-            this._fsDoc.webkitExitFullscreen();
-            return;
-        }
-
-        // IE/Edge
-        else if ( this._fsDoc.msExitFullscreen )
-        {
-            this._fsDoc.msExitFullscreen();
-            return;
+            this._document.documentElement.requestFullscreen()
+                .catch(() =>
+                {
+                    console.error('Entering fullscreen mode failed.');
+                });
         }
     }
 }

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

@@ -1,16 +0,0 @@
-export interface FSDocument extends HTMLDocument
-{
-    mozFullScreenElement?: Element;
-    mozCancelFullScreen?: () => void;
-    msFullscreenElement?: Element;
-    msExitFullscreen?: () => void;
-    webkitFullscreenElement?: Element;
-    webkitExitFullscreen?: () => void;
-}
-
-export interface FSDocumentElement extends HTMLElement
-{
-    mozRequestFullScreen?: () => void;
-    msRequestFullscreen?: () => void;
-    webkitRequestFullscreen?: () => void;
-}

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

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

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

@@ -19,20 +19,22 @@ textarea {
         @apply text-hint;
     }
 
-    &:-webkit-autofill {
-        transition: background-color 600000s 0s, color 600000s 0s !important;
-    }
-
-    &:-webkit-autofill:hover {
-        transition: background-color 600000s 0s, color 600000s 0s !important;
-    }
-
-    &:-webkit-autofill:focus {
-        transition: background-color 600000s 0s, color 600000s 0s !important;
-    }
-
+    /* Autofill color fix */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
     &:-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/styles/tailwind.scss

@@ -121,7 +121,7 @@
     }
 
     /* Set the foreground color for disabled elements */
-    [disabled] * {
+    [disabled] {
         @apply text-disabled #{'!important'};
     }
 

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.1.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;
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _httpClient: HttpClient,
-        private _userService: UserService,
-    )
-    {
-    }
+    private _httpClient = inject(HttpClient);
+    private _userService = inject(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
 {
-    /**
-     * Constructor
-     */
-    constructor(
-        private _httpClient: HttpClient)
-    {
-    }
+    private _httpClient = inject(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/messages/messages.component.html

@@ -32,6 +32,7 @@
             <div class="text-lg font-medium leading-10">Messages</div>
             <div class="ml-auto">
                 <button
+                    class="dark:text-white"
                     mat-icon-button
                     [disabled]="unreadCount === 0"
                     [matTooltip]="'Mark all as read'"

src/app/layout/common/notifications/notifications.component.html

@@ -32,6 +32,7 @@
             <div class="text-lg font-medium leading-10">Notifications</div>
             <div class="ml-auto">
                 <button
+                    class="dark:text-white"
                     mat-icon-button
                     [matTooltip]="'Mark all as read'"
                     [disabled]="unreadCount === 0"

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
-                                    class="rotate-90"
-                                    [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
+                                <mat-icon [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>

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

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

src/app/modules/admin/apps/chat/chats/chats.component.ts

@@ -92,6 +92,9 @@ export class ChatsComponent implements OnInit, OnDestroy
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
+
+        // Reset the chat
+        this._chatService.resetChat();
     }
 
     // -----------------------------------------------------------------------------------------------------

src/app/modules/admin/apps/chat/conversation/conversation.component.html

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

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

@@ -13,6 +13,52 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v19.1.0
+        {
+            version    : 'v19.1.0',
+            releaseDate: 'Mar 11, 2024',
+            changes: [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material',
+                        '(Dependencies) Updated various other dependencies',
+                        '(@fuse/fullscreen) Updated the fullscreen component to use the new Fullscreen API',
+                    ],
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        'Legacy peer dependeny resolution',
+                    ],
+                },
+            ]
+        },
+
+        // v19.0.0
+        {
+            version    : 'v19.0.0',
+            releaseDate: 'Nov 20, 2023',
+            changes: [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v17',
+                        '(Dependencies) Updated various other packages',
+                        '(Transloco) Updated to standalone configuration',
+                        '(core) Use inject for dependencies'
+                    ],
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        'Rotation on some icons',
+                        'Autocompleted input colors'
+                    ],
+                },
+            ]
+        },
+
         // v18.0.0
         {
             version    : 'v18.0.0',

src/app/modules/admin/docs/guides/customization/component-theming/component-theming.html

@@ -44,7 +44,7 @@
             you can use the Angular Material mixin to apply the theme.
         </p>
         <p>
-            This brakes the modularity because now you have a reference to your component's theming file from who knows where and you also have to remember to do all this again
+            This breaks the modularity because now you have a reference to your component's theming file from who knows where and you also have to remember to do all this again
             and again every time you want to use the theme colors from your components.
         </p>
         <p>

src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html

@@ -68,7 +68,7 @@
             <li>Do a project wide search for <code>&lt;languages&gt;&lt;/languages&gt;</code> and remove all instances</li>
             <li>Do a project wide search for <code>LanguageModule</code> and remove all imports</li>
             <li>Remove the <code>src/app/layout/common/language</code> directory</li>
-            <li>Finally navigate to the <code>package.json</code> file, remove the <strong>"@ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>
+            <li>Finally navigate to the <code>package.json</code> file, remove the <strong>"&#64;ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>
         </ol>
 
     </div>

src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html

@@ -98,7 +98,7 @@
             </mat-tree>
         </div>
 
-        <h2>@fuse/</h2>
+        <h2>&#64;fuse/</h2>
         <p>
             This is the core directory of the Fuse. It includes components, directives, services, pipes, custom validators, animations, base styles and much more.
         </p>
@@ -236,47 +236,11 @@
             If you use SSR (Server Side Rendering) you can even include your <strong>landing</strong> page as one of the modules and keep everything in a single app.
         </p>
 
-        <h3>app/shared/</h3>
-        <p>
-            This directory is designed to contain anything re-usable such as components, directives and pipes. By default, it doesn't include any of them but when you create
-            one for your app, you can put it here.
-        </p>
-        <p>
-            The only file here is the <code>shared.module.ts</code> file which simply imports and exports some of the common Angular modules so you don't have to import them
-            one by one. You can just import the <code>shared.module.ts</code> into your module whenever you need one of those common modules.
-        </p>
-        <p>
-            Currently it imports and exports:
-        </p>
-        <ul>
-            <li>
-                <p><strong>CommonModule</strong></p>
-                <p>Required for common directives such as *ngIf and *ngFor</p>
-            </li>
-            <li>
-                <p><strong>FormsModule</strong></p>
-                <p>Required for form directives</p>
-            </li>
-            <li>
-                <p><strong>ReactiveFormsModule</strong></p>
-                <p>Required for reactive form directives</p>
-            </li>
-        </ul>
-        <p>
-            You can add/remove anything to/from the <code>shared.module.ts</code> file and use the module to import commonly used modules without needing to remember them
-            one by one.
-        </p>
-
         <h2>assets/</h2>
         <p>
             Default Angular assets folder.
         </p>
 
-        <h2>environments/</h2>
-        <p>
-            Default Angular environments folder.
-        </p>
-
         <h2>styles/</h2>
         <p>
             This folder contains 4 different scss files:

src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.ts

@@ -72,12 +72,10 @@ export class DirectoryStructureComponent implements OnInit
                         name    : 'core/',
                         children: [
                             {name: 'auth/'},
-                            {name: 'config/'},
                             {name: 'icons/'},
                             {name: 'navigation/'},
                             {name: 'transloco/'},
                             {name: 'user/'},
-                            {name: 'core.module.ts'},
                         ],
                     },
                     {
@@ -88,8 +86,6 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'layout.component.html'},
                             {name: 'layout.component.scss'},
                             {name: 'layout.component.ts'},
-                            {name: 'layout.module.ts'},
-                            {name: 'layout.types.ts'},
                         ],
                     },
                     {
@@ -111,16 +107,9 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'landing/'},
                         ],
                     },
-                    {
-                        name    : 'shared/',
-                        children: [
-                            {name: 'shared.module.ts'},
-                        ],
-                    },
                     {name: 'app.component.html'},
                     {name: 'app.component.scss'},
                     {name: 'app.component.ts'},
-                    {name: 'app.module.ts'},
                     {name: 'app.resolvers.ts'},
                     {name: 'app.routing.ts'},
                 ],
@@ -145,7 +134,7 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'tailwind/'},
                             {name: 'validators/'},
                             {name: 'version/'},
-                            {name: 'fuse.module.ts'},
+                            {name: 'fuse.provider.ts'},
                             {name: 'index.ts'},
                         ],
                     },
@@ -160,13 +149,6 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'styles/'},
                         ],
                     },
-                    {
-                        name    : 'environments/',
-                        children: [
-                            {name: 'environment.prod.ts'},
-                            {name: 'environment.ts'},
-                        ],
-                    },
                     {
                         name    : 'styles/',
                         children: [
@@ -177,11 +159,8 @@ export class DirectoryStructureComponent implements OnInit
                     },
                     {name: 'favicon-16x16.png'},
                     {name: 'favicon-32x32.png'},
-                    {name: 'global.d.ts'},
                     {name: 'index.html'},
                     {name: 'main.ts'},
-                    {name: 'polyfills.ts'},
-                    {name: 'test.ts'},
                 ],
             },
         ];

src/app/modules/admin/docs/guides/development/updating/updating.html

@@ -45,7 +45,7 @@
         <ul>
             <li>
                 <p>
-                    Do <strong>NOT</strong> touch the <strong>@fuse</strong> folder unless you absolutely have to. Keeping that folder intact is the key to have easier
+                    Do <strong>NOT</strong> touch the <strong>&#64;fuse</strong> folder unless you absolutely have to. Keeping that folder intact is the key to have easier
                     upgrades.
                 </p>
             </li>

src/app/modules/admin/pages/invoice/printable/compact/compact.component.html

@@ -30,7 +30,7 @@
                         <div>2810 Country Club Road</div>
                         <div>Cranford, NJ 07016</div>
                         <div>+66 123 455 87</div>
-                        <div>hello@fuseinc.com</div>
+                        <div>hello&#64;fuseinc.com</div>
                         <div>www.fuseinc.com</div>
                     </div>
                 </div>
@@ -39,7 +39,7 @@
             <div class="text-md">
                 <div class="text-xl font-medium">Brian Hughes</div>
                 <div>9301 Wood Street Philadelphia, PA 19111</div>
-                <div>hughes.brian@company.com</div>
+                <div>hughes.brian&#64;company.com</div>
                 <div>+55 552 455 87</div>
             </div>
 

src/app/modules/admin/pages/invoice/printable/modern/modern.component.html

@@ -21,7 +21,7 @@
                             <div>2810 Country Club Road</div>
                             <div>Cranford, NJ 07016</div>
                             <div>+66 123 455 87</div>
-                            <div>hello@fuseinc.com</div>
+                            <div>hello&#64;fuseinc.com</div>
                             <div>www.fuseinc.com</div>
                         </div>
                     </div>
@@ -34,7 +34,7 @@
                             <div>9301 Wood Street</div>
                             <div>Philadelphia, PA 19111</div>
                             <div>+55 552 455 87</div>
-                            <div>hughes.brian@company.com</div>
+                            <div>hughes.brian&#64;company.com</div>
                         </div>
                     </div>
                 </div>

src/app/modules/admin/ui/animations/animations.component.html

@@ -25,7 +25,7 @@
 
             <p>
                 Fuse provides set of ready-to-use animations for convenience. You can access them by importing the <code>FuseAnimations</code> and set it as the
-                <em>animations</em> property of the <em>@Component</em> metadata.
+                <em>animations</em> property of the <em>&#64;Component</em> metadata.
             </p>
 
             <h2>Module</h2>
@@ -61,16 +61,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@expandCollapse]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;expandCollapse]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'collapsed'</code> and <code>'expanded'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@expandCollapse</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;expandCollapse</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@expandCollapse]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;expandCollapse]="false"</code>
             </p>
 
             <div class="example-viewer">
@@ -156,16 +156,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@shake]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;shake]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>false</code> and <code>true</code> manually.
                 </li>
                 <li>
-                    Adding <code>@shake</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;shake</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@shake]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;shake]="false"</code>
             </p>
 
             <div class="example-viewer">
@@ -254,16 +254,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@fadeIn]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;fadeIn]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'void'</code> and <code>'*'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@fadeIn</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;fadeIn</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeIn]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;fadeIn]="false"</code>
             </p>
             <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
@@ -687,16 +687,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@fadeOut]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;fadeOut]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'void'</code> and <code>'*'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@fadeOut</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;fadeOut</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeOut]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;fadeOut]="false"</code>
             </p>
             <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
@@ -1120,16 +1120,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@slideIn]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;slideIn]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'void'</code> and <code>'*'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@slideIn</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;slideIn</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@slideIn]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;slideIn]="false"</code>
             </p>
             <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
@@ -1472,16 +1472,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@slideOut]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;slideOut]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'void'</code> and <code>'*'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@slideOut</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;slideOut</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@slideOut]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;slideOut]="false"</code>
             </p>
             <mat-form-field [subscriptSizing]="'dynamic'">
                 <mat-label>Direction</mat-label>
@@ -1824,16 +1824,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@zoomIn]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;zoomIn]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'void'</code> and <code>'*'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@zoomIn</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;zoomIn</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@zoomIn]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;zoomIn]="false"</code>
             </p>
 
             <div class="example-viewer">
@@ -1922,16 +1922,16 @@
             </p>
             <ol>
                 <li>
-                    Adding <code>[@zoomOut]="state"</code> to the element and toggling the <code>state</code>
+                    Adding <code>[&#64;zoomOut]="state"</code> to the element and toggling the <code>state</code>
                     between the <code>'void'</code> and <code>'*'</code> strings manually.
                 </li>
                 <li>
-                    Adding <code>@zoomOut</code> to the element and using <code>*ngIf</code> to toggle the
+                    Adding <code>&#64;zoomOut</code> to the element and using <code>*ngIf</code> to toggle the
                     element.
                 </li>
             </ol>
             <p>
-                The animation can be disabled by setting the state to <b>false</b>; <code>[@zoomOut]="false"</code>
+                The animation can be disabled by setting the state to <b>false</b>; <code>[&#64;zoomOut]="false"</code>
             </p>
 
             <div class="example-viewer">

src/app/modules/admin/ui/cards/cards.component.html

@@ -1720,7 +1720,7 @@
                 <div class="flex flex-col">
                     <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                     <div class="text-md leading-tight text-primary">Head of HR Department</div>
-                    <div class="text-md text-secondary mt-2">h.brian@company.com</div>
+                    <div class="text-md text-secondary mt-2">h.brian&#64;company.com</div>
                 </div>
             </fuse-card>
 
@@ -1730,7 +1730,7 @@
                 <div class="flex flex-col">
                     <div class="text-2xl font-semibold leading-tight">Brian Hughes</div>
                     <div class="text-md leading-tight text-primary">Head of HR Department</div>
-                    <div class="text-md text-secondary mt-2">h.brian@company.com</div>
+                    <div class="text-md text-secondary mt-2">h.brian&#64;company.com</div>
                 </div>
                 <img
                     class="w-16 h-16 ml-6 rounded-full"

src/app/modules/admin/ui/fuse-components/components/alert/alert.component.html

@@ -66,7 +66,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>name: string</div>
                         </td>
                         <td>
@@ -78,7 +78,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>appearance: FuseAlertAppearance</div>
                         </td>
                         <td>
@@ -90,7 +90,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>dismissed: boolean</div>
                         </td>
                         <td>
@@ -102,7 +102,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>dismissible: boolean</div>
                         </td>
                         <td>
@@ -114,7 +114,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>showIcon: boolean</div>
                         </td>
                         <td>
@@ -126,7 +126,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>type: FuseAlertType</div>
                         </td>
                         <td>
@@ -138,7 +138,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>afterDismissed: true</div>
                         </td>
                         <td>
@@ -150,7 +150,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>afterShown: true</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/card/card.component.html

@@ -65,7 +65,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>flippable: boolean</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.html

@@ -92,7 +92,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>fixed: boolean</div>
                         </td>
                         <td>
@@ -104,7 +104,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>mode: FuseDrawerMode</div>
                         </td>
                         <td>
@@ -118,7 +118,7 @@
                     <tr>
                         <td class="font-mono text-md text-secondary">
                             <div class="mb-2"><code class="text-xs font-bold">REQUIRED</code></div>
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>name: string</div>
                         </td>
                         <td>
@@ -130,7 +130,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>opened: boolean</div>
                         </td>
                         <td>
@@ -142,7 +142,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>position: FuseDrawerPosition</div>
                         </td>
                         <td>
@@ -154,7 +154,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>transparentOverlay: boolean</div>
                         </td>
                         <td>
@@ -166,7 +166,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>modeChanged: FuseNavigationMode</div>
                         </td>
                         <td>
@@ -178,7 +178,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>openedChanged: boolean</div>
                         </td>
                         <td>
@@ -190,7 +190,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>positionChanged: FuseNavigationPosition</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.html

@@ -76,7 +76,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>iconTpl: TemplateRef&lt;any&gt;</div>
                         </td>
                         <td>
@@ -88,7 +88,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>tooltip: string</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.html

@@ -86,7 +86,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>code: string</div>
                         </td>
                         <td>
@@ -98,7 +98,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>lang: string</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html

@@ -78,7 +78,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>autoMode: boolean</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.html

@@ -73,7 +73,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>columnsTemplate: TemplateRef</div>
                         </td>
                         <td>
@@ -85,7 +85,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>columns: number</div>
                         </td>
                         <td>
@@ -97,7 +97,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>items: any[]</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html

@@ -378,7 +378,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>appearance: FuseVerticalNavigationAppearance</div>
                         </td>
                         <td>
@@ -390,7 +390,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>autoCollapse: boolean</div>
                         </td>
                         <td>
@@ -402,7 +402,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>inner: boolean</div>
                         </td>
                         <td>
@@ -415,7 +415,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>mode: FuseVerticalNavigationMode</div>
                         </td>
                         <td>
@@ -429,7 +429,7 @@
                     <tr>
                         <td class="font-mono text-md text-secondary">
                             <div class="mb-2"><code class="text-xs font-bold">REQUIRED</code></div>
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>name: string</div>
                         </td>
                         <td>
@@ -441,7 +441,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>navigation: FuseNavigationItem[]</div>
                         </td>
                         <td>
@@ -453,7 +453,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>opened: boolean</div>
                         </td>
                         <td>
@@ -465,7 +465,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>position: FuseVerticalNavigationPosition</div>
                         </td>
                         <td>
@@ -477,7 +477,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>transparentOverlay: boolean</div>
                         </td>
                         <td>
@@ -489,7 +489,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>appearanceChanged: FuseVerticalNavigationAppearance</div>
                         </td>
                         <td>
@@ -501,7 +501,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>modeChanged: FuseVerticalNavigationMode</div>
                         </td>
                         <td>
@@ -513,7 +513,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>openedChanged: boolean</div>
                         </td>
                         <td>
@@ -525,7 +525,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>positionChanged: FuseVerticalNavigationPosition</div>
                         </td>
                         <td>
@@ -674,7 +674,7 @@
                     <tr>
                         <td class="font-mono text-md text-secondary">
                             <div class="mb-2"><code class="text-xs font-bold">REQUIRED</code></div>
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>name: string</div>
                         </td>
                         <td>
@@ -686,7 +686,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>navigation: FuseNavigationItem[]</div>
                         </td>
                         <td>

src/app/modules/admin/ui/fuse-components/directives/scrollbar/scrollbar.component.html

@@ -85,7 +85,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>fuseScrollbar: boolean</div>
                         </td>
                         <td>
@@ -97,7 +97,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>fuseScrollbarOptions: any</div>
                         </td>
                         <td>
@@ -113,7 +113,7 @@
 
         <h2>Methods</h2>
         <p>
-            It's possible to access the methods of this directive using a <em>@ViewChild</em> or <em>@ViewChildren</em>:
+            It's possible to access the methods of this directive using a <em>&#64;ViewChild</em> or <em>&#64;ViewChildren</em>:
         </p>
         <!-- @formatter:off -->
         <textarea

src/app/modules/admin/ui/other-components/common/overview/overview.component.html

@@ -40,13 +40,13 @@
 
         <p>
             Common components are custom made components that could require heavy modifications depending on the project. These components are mostly related with the layout
-            therefore they are located in the <code>src/app/layout/common/</code> directory. You can modify them without touching the <code>@fuse</code> directory.
+            therefore they are located in the <code>src/app/layout/common/</code> directory. You can modify them without touching the <code>&#64;fuse</code> directory.
         </p>
         <fuse-alert
             [appearance]="'border'"
             [type]="'info'">
             These components are not very complex and they only provide some basic features. If you wish them to do more, you have to customize them, and that's exactly why
-            they are not located in the <code>@fuse</code> directory like other components.
+            they are not located in the <code>&#64;fuse</code> directory like other components.
         </fuse-alert>
         <fuse-alert
             class="mt-4"

src/app/modules/admin/ui/other-components/common/search/search.component.html

@@ -66,7 +66,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>appearance: 'basic' | 'bar'</div>
                         </td>
                         <td>
@@ -79,7 +79,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>debounce: number</div>
                         </td>
                         <td>
@@ -91,7 +91,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>minLength: number</div>
                         </td>
                         <td>
@@ -103,7 +103,7 @@
                     </tr>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Output()</div>
+                            <div>&#64;Output()</div>
                             <div>search: EventEmitter</div>
                         </td>
                         <td>

src/app/modules/admin/ui/other-components/common/user/user.component.html

@@ -65,7 +65,7 @@
                 <tbody>
                     <tr>
                         <td class="font-mono text-md text-secondary">
-                            <div>@Input()</div>
+                            <div>&#64;Input()</div>
                             <div>showAvatar: boolean</div>
                         </td>
                         <td>

src/app/modules/admin/ui/typography/typography.component.html

@@ -241,7 +241,7 @@
     purge: [],
     theme: {{'{'}}
         extend: {{'{}'}},
-    },
+    {{'}'}},
     variants: {{'{}'}},
     plugins: [],
 {{'}'}}</code></pre>
@@ -399,7 +399,7 @@
             </p>
             <p>
                 Accusantium aliquid eligendi est fuga natus, <code>quos</code> vel? Adipisci aperiam asperiores aspernatur consectetur cupiditate
-                <a [routerLink]="['.']"><code>@distinctio/doloribus</code></a>
+                <a [routerLink]="['.']"><code>&#64;distinctio/doloribus</code></a>
                 et exercitationem expedita, facere facilis illum, impedit inventore
                 ipsa iure iusto magnam, magni minus nesciunt non officia possimus quod reiciendis.
             </p>