Added the missing release date to the changelog

(dependencies) Updated various other packages

angular.json

@@ -2,10 +2,9 @@
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
     "cli": {
-        "defaultCollection": "@angular-eslint/schematics",
-        "cache": {
-            "enabled": false
-        }
+        "schematicCollections": [
+            "@angular-eslint/schematics"
+        ]
     },
     "newProjectRoot": "projects",
     "projects": {
@@ -142,6 +141,5 @@
                 }
             }
         }
-    },
-    "defaultProject": "fuse"
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@fuse/demo",
-    "version": "14.1.1",
+    "name": "fuse-angular",
+    "version": "15.0.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -14,68 +14,67 @@
         "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "13.1.1",
-        "@angular/cdk": "13.1.1",
-        "@angular/common": "13.1.1",
-        "@angular/compiler": "13.1.1",
-        "@angular/core": "13.1.1",
-        "@angular/forms": "13.1.1",
-        "@angular/material": "13.1.1",
-        "@angular/material-moment-adapter": "13.1.1",
-        "@angular/platform-browser": "13.1.1",
-        "@angular/platform-browser-dynamic": "13.1.1",
-        "@angular/router": "13.1.1",
-        "@ngneat/transloco": "3.1.1",
-        "apexcharts": "3.32.1",
+        "@angular/animations": "14.0.0",
+        "@angular/cdk": "14.0.0",
+        "@angular/common": "14.0.0",
+        "@angular/compiler": "14.0.0",
+        "@angular/core": "14.0.0",
+        "@angular/forms": "14.0.0",
+        "@angular/material": "14.0.0",
+        "@angular/material-moment-adapter": "14.0.0",
+        "@angular/platform-browser": "14.0.0",
+        "@angular/platform-browser-dynamic": "14.0.0",
+        "@angular/router": "14.0.0",
+        "@ngneat/transloco": "4.0.0",
+        "apexcharts": "3.35.3",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.3.1",
+        "highlight.js": "11.5.1",
         "lodash-es": "4.17.21",
-        "moment": "2.29.1",
-        "ng-apexcharts": "1.6.0",
-        "ngx-markdown": "13.0.0",
-        "ngx-quill": "16.1.1",
-        "perfect-scrollbar": "1.5.3",
+        "moment": "2.29.3",
+        "ng-apexcharts": "1.7.1",
+        "ngx-markdown": "13.1.0",
+        "ngx-quill": "17.0.0",
+        "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
-        "rxjs": "7.5.1",
-        "tslib": "2.3.1",
-        "zone.js": "0.11.4"
+        "rxjs": "7.5.5",
+        "tslib": "2.4.0",
+        "zone.js": "0.11.5"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "13.1.2",
-        "@angular-eslint/builder": "13.0.1",
-        "@angular-eslint/eslint-plugin": "13.0.1",
-        "@angular-eslint/eslint-plugin-template": "13.0.1",
-        "@angular-eslint/schematics": "13.0.1",
-        "@angular-eslint/template-parser": "13.0.1",
-        "@angular/cli": "13.1.2",
-        "@angular/compiler-cli": "13.1.1",
+        "@angular-devkit/build-angular": "14.0.0",
+        "@angular-eslint/builder": "13.2.1",
+        "@angular-eslint/eslint-plugin": "13.2.1",
+        "@angular-eslint/eslint-plugin-template": "13.2.1",
+        "@angular-eslint/schematics": "13.2.1",
+        "@angular-eslint/template-parser": "13.2.1",
+        "@angular/cli": "14.0.0",
+        "@angular/compiler-cli": "14.0.0",
         "@tailwindcss/aspect-ratio": "0.4.0",
-        "@tailwindcss/line-clamp": "0.3.0",
-        "@tailwindcss/typography": "0.5.0",
+        "@tailwindcss/line-clamp": "0.4.0",
+        "@tailwindcss/typography": "0.5.2",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.10.2",
-        "@types/lodash": "4.14.178",
-        "@types/lodash-es": "4.17.5",
-        "@types/node": "12.20.38",
-        "@typescript-eslint/eslint-plugin": "5.8.1",
-        "@typescript-eslint/parser": "5.8.1",
-        "autoprefixer": "10.4.1",
-        "chroma-js": "2.1.2",
-        "eslint": "8.6.0",
-        "eslint-plugin-import": "2.25.3",
-        "eslint-plugin-jsdoc": "37.5.0",
+        "@types/jasmine": "4.0.3",
+        "@types/lodash": "4.14.182",
+        "@types/lodash-es": "4.17.6",
+        "@typescript-eslint/eslint-plugin": "5.27.0",
+        "@typescript-eslint/parser": "5.27.0",
+        "autoprefixer": "10.4.7",
+        "chroma-js": "2.4.2",
+        "eslint": "8.16.0",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-jsdoc": "39.3.2",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.10.1",
-        "karma": "6.3.9",
-        "karma-chrome-launcher": "3.1.0",
-        "karma-coverage": "2.1.0",
-        "karma-jasmine": "4.0.1",
+        "jasmine-core": "4.1.1",
+        "karma": "6.3.20",
+        "karma-chrome-launcher": "3.1.1",
+        "karma-coverage": "2.2.0",
+        "karma-jasmine": "5.0.1",
         "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.5",
-        "tailwindcss": "3.0.8",
-        "typescript": "4.5.4"
+        "postcss": "8.4.14",
+        "tailwindcss": "3.0.24",
+        "typescript": "4.7.2"
     }
 }

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

@@ -53,6 +53,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
      */
     @HostBinding('class') get classList(): any
     {
+        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-alert-appearance-border' : this.appearance === 'border',
             'fuse-alert-appearance-fill'   : this.appearance === 'fill',
@@ -70,6 +71,7 @@ export class FuseAlertComponent implements OnChanges, OnInit, OnDestroy
             'fuse-alert-type-warning'      : this.type === 'warning',
             'fuse-alert-type-error'        : this.type === 'error'
         };
+        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     // -----------------------------------------------------------------------------------------------------

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

@@ -38,12 +38,14 @@ export class FuseCardComponent implements OnChanges
      */
     @HostBinding('class') get classList(): any
     {
+        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-card-expanded'  : this.expanded,
             'fuse-card-face-back' : this.flippable && this.face === 'back',
             'fuse-card-face-front': this.flippable && this.face === 'front',
             'fuse-card-flippable' : this.flippable
         };
+        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     // -----------------------------------------------------------------------------------------------------

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

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

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

@@ -32,6 +32,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
     @Output() readonly positionChanged: EventEmitter<FuseDrawerPosition> = new EventEmitter<FuseDrawerPosition>();
 
     private _animationsEnabled: boolean = false;
+    private readonly _handleOverlayClick: any;
     private _hovered: boolean = false;
     private _overlay: HTMLElement;
     private _player: AnimationPlayer;
@@ -47,6 +48,9 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         private _fuseUtilsService: FuseUtilsService
     )
     {
+        this._handleOverlayClick = (): void => {
+            this.close();
+        };
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -58,6 +62,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
      */
     @HostBinding('class') get classList(): any
     {
+        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-drawer-animations-enabled'         : this._animationsEnabled,
             'fuse-drawer-fixed'                      : this.fixed,
@@ -66,6 +71,7 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
             'fuse-drawer-opened'                     : this.opened,
             [`fuse-drawer-position-${this.position}`]: true
         };
+        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     /**
@@ -318,12 +324,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Create the backdrop element
         this._overlay = this._renderer2.createElement('div');
 
-        // Return if overlay couldn't be create for some reason
-        if ( !this._overlay )
-        {
-            return;
-        }
-
         // Add a class to the backdrop element
         this._overlay.classList.add('fuse-drawer-overlay');
 
@@ -342,27 +342,17 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Append the backdrop to the parent of the drawer
         this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
 
-        // Create the enter animation and attach it to the player
+        // Create enter animation and attach it to the player
         this._player = this._animationBuilder.build([
             style({opacity: 0}),
             animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
         ]).create(this._overlay);
 
-        // Once the animation is done...
-        this._player.onDone(() => {
-
-            // Destroy the player
-            this._player.destroy();
-            this._player = null;
-        });
-
         // Play the animation
         this._player.play();
 
         // Add an event listener to the overlay
-        this._overlay.addEventListener('click', () => {
-            this.close();
-        });
+        this._overlay.addEventListener('click', this._handleOverlayClick);
     }
 
     /**
@@ -388,14 +378,13 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Once the animation is done...
         this._player.onDone(() => {
 
-            // Destroy the player
-            this._player.destroy();
-            this._player = null;
-
-            // If the backdrop still exists...
+            // If the overlay still exists...
             if ( this._overlay )
             {
-                // Remove the backdrop
+                // Remove the event listener
+                this._overlay.removeEventListener('click', this._handleOverlayClick);
+
+                // Remove the overlay
                 this._overlay.parentNode.removeChild(this._overlay);
                 this._overlay = null;
             }

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

@@ -5,7 +5,6 @@ import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 @Component({
     selector     : 'fuse-masonry',
     templateUrl  : './masonry.component.html',
-    styleUrls    : ['./masonry.component.scss'],
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations,
     exportAs     : 'fuseMasonry'

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

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

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

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

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

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

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

@@ -48,10 +48,12 @@ export class FuseVerticalNavigationCollapsableItemComponent implements OnInit, O
      */
     @HostBinding('class') get classList(): any
     {
+        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-vertical-navigation-item-collapsed': this.isCollapsed,
             'fuse-vertical-navigation-item-expanded' : this.isExpanded
         };
+        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     // -----------------------------------------------------------------------------------------------------

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

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

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

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

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

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

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

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

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

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

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

@@ -89,6 +89,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     @HostBinding('class') get classList(): any
     {
+        /* eslint-disable @typescript-eslint/naming-convention */
         return {
             'fuse-vertical-navigation-animations-enabled'             : this._animationsEnabled,
             [`fuse-vertical-navigation-appearance-${this.appearance}`]: true,
@@ -100,6 +101,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
             'fuse-vertical-navigation-position-left'                  : this.position === 'left',
             'fuse-vertical-navigation-position-right'                 : this.position === 'right'
         };
+        /* eslint-enable @typescript-eslint/naming-convention */
     }
 
     /**

src/@fuse/fuse.module.ts

@@ -4,6 +4,7 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { FuseConfirmationModule } from '@fuse/services/confirmation';
 import { FuseLoadingModule } from '@fuse/services/loading';
 import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
+import { FusePlatformModule } from '@fuse/services/platform/platform.module';
 import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
 import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
 
@@ -12,6 +13,7 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
         FuseConfirmationModule,
         FuseLoadingModule,
         FuseMediaWatcherModule,
+        FusePlatformModule,
         FuseSplashScreenModule,
         FuseUtilsModule
     ],

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

@@ -35,6 +35,7 @@ export class FuseConfigService
         this._config.next(config);
     }
 
+    // eslint-disable-next-line @typescript-eslint/member-ordering
     get config$(): Observable<any>
     {
         return this._config.asObservable();

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

@@ -1,12 +1,11 @@
-import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
 
 @Component({
     selector     : 'fuse-confirmation-dialog',
     templateUrl  : './dialog.component.html',
     styles       : [
-        /* language=SCSS */
         `
             .fuse-confirmation-dialog-panel {
                 @screen md {
@@ -21,32 +20,13 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
     ],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseConfirmationDialogComponent implements OnInit
+export class FuseConfirmationDialogComponent
 {
     /**
      * Constructor
      */
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig,
-        public matDialogRef: MatDialogRef<FuseConfirmationDialogComponent>
-    )
+    constructor(@Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig)
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
 }

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

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

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { FusePlatformService } from '@fuse/services/platform/platform.service';
+
+@NgModule({
+    providers: [
+        FusePlatformService
+    ]
+})
+export class FusePlatformModule
+{
+    /**
+     * Constructor
+     */
+    constructor(private _fusePlatformService: FusePlatformService)
+    {
+    }
+}

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

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

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

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

src/@fuse/styles/main.scss

@@ -1,9 +1,9 @@
 /* 1. Components */
-@import 'components/example-viewer';
-@import 'components/input';
+@use 'components/example-viewer';
+@use 'components/input';
 
 /* 2. Overrides */
-@import 'overrides/angular-material';
-@import 'overrides/highlightjs';
-@import 'overrides/perfect-scrollbar';
-@import 'overrides/quill';
+@use 'overrides/angular-material';
+@use 'overrides/highlightjs';
+@use 'overrides/perfect-scrollbar';
+@use 'overrides/quill';

src/@fuse/styles/overrides/quill.scss

@@ -80,7 +80,9 @@
 }
 
 .ql-container {
-    overflow: hidden;
+    overflow: auto;
+    min-height: 160px;
+    max-height: 400px;
     border-radius: 0 0 6px 6px;
     @apply border-gray-300 border-opacity-100 shadow-sm #{'!important'};
 
@@ -89,17 +91,52 @@
     }
 
     .ql-editor {
-        min-height: 160px;
-        max-height: 160px;
-        height: 160px;
         @apply bg-card;
 
         .dark & {
-            background-color: rgba(0, 0, 0, 0.05);
+            //background-color: rgba(0, 0, 0, 0.05);
         }
 
         &.ql-blank::before {
             @apply text-hint;
         }
     }
+
+    .ql-tooltip {
+        @apply px-3 py-1 shadow-sm rounded-md bg-gray-100 border-gray-300;
+
+        .dark & {
+            @apply shadow-lg bg-gray-700 border-gray-700 #{'!important'};
+        }
+
+        // Label
+        &:before {
+            @apply text-secondary;
+        }
+
+        .ql-action,
+        .ql-remove {
+            @apply text-primary border-gray-300;
+
+            .dark & {
+                @apply text-primary-400 border-gray-300;
+            }
+        }
+
+        .ql-action:after {
+            @apply border-r border-r-gray-300 #{'!important'};
+
+            .dark & {
+                @apply border-r-gray-500 #{'!important'};
+            }
+        }
+
+        input {
+            @apply rounded-sm text-default bg-white border-gray-300 #{'!important'};
+
+            .dark & {
+                @apply bg-gray-700 border-gray-500 #{'!important'};
+            }
+        }
+    }
 }

src/@fuse/styles/tailwind.scss

@@ -76,6 +76,46 @@
         }
     }
 
+    /* Style scrollbars on platforms other than MacOS and iOS */
+    @media only screen and (min-width: 960px) {
+
+        body:not(.os-mac) {
+
+            ::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+                background-color: rgba(0, 0, 0, 0);
+            }
+
+            ::-webkit-scrollbar:hover {
+                width: 8px;
+                height: 8px;
+                background-color: rgba(0, 0, 0, 0.06);
+            }
+
+            ::-webkit-scrollbar-thumb {
+                border: 2px solid transparent;
+                border-radius: 20px;
+                box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.24);
+            }
+
+            ::-webkit-scrollbar-thumb:active {
+                border-radius: 20px;
+                box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.37);
+            }
+
+            &.dark {
+                ::-webkit-scrollbar-thumb {
+                    box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.24);
+                }
+
+                ::-webkit-scrollbar-thumb:active {
+                    box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.37);
+                }
+            }
+        }
+    }
+
     [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('14.1.1').full;
+export const FUSE_VERSION = new Version('15.0.0').full;

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

@@ -96,8 +96,8 @@ export class AuthService
      */
     signInUsingToken(): Observable<any>
     {
-        // Renew token
-        return this._httpClient.post('api/auth/refresh-access-token', {
+        // Sign in using the token
+        return this._httpClient.post('api/auth/sign-in-with-token', {
             accessToken: this.accessToken
         }).pipe(
             catchError(() =>
@@ -107,8 +107,17 @@ export class AuthService
             ),
             switchMap((response: any) => {
 
-                // Store the access token in the local storage
-                this.accessToken = response.accessToken;
+                // Replace the access token with the new one if it's available on
+                // the response object.
+                //
+                // This is an added optional step for better security. Once you sign
+                // in using the token, you should generate a new one on the server
+                // side and attach it to the response object. Then the following
+                // piece of code can replace the token with the refreshed one.
+                if ( response.accessToken )
+                {
+                    this.accessToken = response.accessToken;
+                }
 
                 // Set the authenticated flag to true
                 this._authenticated = true;

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

@@ -17,7 +17,6 @@ export class IconsModule
         this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
         this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
         this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
         this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
         this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
         this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));

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

@@ -178,8 +178,8 @@
 <ng-template #selectChatOrStartNew>
     <div class="flex flex-col flex-auto items-center justify-center w-full h-full p-4">
         <mat-icon
-            class="icon-size-20"
-            [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
+            class="icon-size-24"
+            [svgIcon]="'heroicons_outline:chat'"></mat-icon>
         <div class="mt-4 text-xl text-center font-medium tracking-tight text-secondary">Select a conversation</div>
     </div>
 </ng-template>

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

@@ -18,11 +18,12 @@
             class="w-full h-full px-16 sm:px-18"
             [formControl]="searchControl"
             [matAutocomplete]="matAutocomplete"
-            [placeholder]="'Search for a page or a contact'"
+            [placeholder]="'Search...'"
             (keydown)="onKeydown($event)"
             #barSearchInput>
         <mat-autocomplete
             class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
+            [autoSelectActiveOption]="true"
             [disableRipple]="true"
             #matAutocomplete="matAutocomplete">
             <mat-option
@@ -37,7 +38,8 @@
                 <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
                     <mat-option
                         class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
-                        [routerLink]="result.link">
+                        [routerLink]="result.link"
+                        [value]="result.value">
                         <!-- Contacts -->
                         <ng-container *ngIf="resultSet.id === 'contacts'">
                             <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
@@ -74,11 +76,12 @@
                 matInput
                 [formControl]="searchControl"
                 [matAutocomplete]="matAutocomplete"
-                [placeholder]="'Search for a page or a contact'"
+                [placeholder]="'Search...'"
                 (keydown)="onKeydown($event)">
         </mat-form-field>
         <mat-autocomplete
             class="max-h-128 mt-1 rounded"
+            [autoSelectActiveOption]="true"
             [disableRipple]="true"
             #matAutocomplete="matAutocomplete">
             <mat-option
@@ -93,7 +96,8 @@
                 <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
                     <mat-option
                         class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
-                        [routerLink]="result.link">
+                        [routerLink]="result.link"
+                        [value]="result.value">
                         <!-- Contacts -->
                         <ng-container *ngIf="resultSet.id === 'contacts'">
                             <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>

src/app/layout/common/search/search.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
+import { MatAutocomplete } from '@angular/material/autocomplete';
 import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations/public-api';
 
@@ -20,7 +21,8 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
 
     opened: boolean = false;
     resultSets: any[];
-    searchControl: FormControl = new FormControl();
+    searchControl: UntypedFormControl = new UntypedFormControl();
+    private _matAutocomplete: MatAutocomplete;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -59,7 +61,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     set barSearchInput(value: ElementRef)
     {
         // If the value exists, it means that the search input
-        // is now in the DOM and we can focus on the input..
+        // is now in the DOM, and we can focus on the input..
         if ( value )
         {
             // Give Angular time to complete the change detection cycle
@@ -71,6 +73,17 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
         }
     }
 
+    /**
+     * Setter for mat-autocomplete element reference
+     *
+     * @param value
+     */
+    @ViewChild('matAutocomplete')
+    set matAutocomplete(value: MatAutocomplete)
+    {
+        this._matAutocomplete = value;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
@@ -152,14 +165,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      */
     onKeydown(event: KeyboardEvent): void
     {
-        // Listen for escape to close the search
-        // if the appearance is 'bar'
-        if ( this.appearance === 'bar' )
+        // Escape
+        if ( event.code === 'Escape' )
         {
-            // Escape
-            if ( event.code === 'Escape' )
+            // If the appearance is 'bar' and the mat-autocomplete is not open, close the search
+            if ( this.appearance === 'bar' && !this._matAutocomplete.isOpen )
             {
-                // Close the search
                 this.close();
             }
         }

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

@@ -1,5 +1,5 @@
 <div
-    class="fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-90 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
+    class="settings-cog fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-90 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
     [class.lg:right-0]="config.layout === 'centered' || config.layout === 'material'"
     [class.lg:right-16]="config.layout !== 'centered' && config.layout !== 'material'"
     style="top: 275px"

src/app/layout/common/settings/settings.component.ts

@@ -16,6 +16,13 @@ import { Layout } from 'app/layout/layout.types';
                 flex: none;
                 width: auto;
             }
+
+            @media (screen and min-width: 1280px) {
+
+                empty-layout + settings .settings-cog {
+                    right: 0 !important;
+                }
+            }
         `
     ],
     encapsulation: ViewEncapsulation.None

src/app/layout/common/shortcuts/shortcuts.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
@@ -20,7 +20,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
 
     mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
-    shortcutForm: FormGroup;
+    shortcutForm: UntypedFormGroup;
     shortcuts: Shortcut[];
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -30,7 +30,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _shortcutsService: ShortcutsService,
         private _overlay: Overlay,
         private _viewContainerRef: ViewContainerRef

src/app/layout/layout.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs';
 import { FuseConfigService } from '@fuse/services/config';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { FusePlatformService } from '@fuse/services/platform';
 import { FUSE_VERSION } from '@fuse/version';
 import { Layout } from 'app/layout/layout.types';
 import { AppConfig } from 'app/core/config/app.config';
@@ -31,7 +32,8 @@ export class LayoutComponent implements OnInit, OnDestroy
         private _renderer2: Renderer2,
         private _router: Router,
         private _fuseConfigService: FuseConfigService,
-        private _fuseMediaWatcherService: FuseMediaWatcherService
+        private _fuseMediaWatcherService: FuseMediaWatcherService,
+        private _fusePlatformService: FusePlatformService
     )
     {
     }
@@ -102,6 +104,9 @@ export class LayoutComponent implements OnInit, OnDestroy
 
         // Set the app version
         this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION);
+
+        // Set the OS name
+        this._renderer2.addClass(this._document.body, this._fusePlatformService.osName);
     }
 
     /**

src/app/layout/layouts/vertical/dense/dense.component.ts

@@ -66,6 +66,9 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
 
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
+
+                // Change the navigation appearance
+                this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense';
             });
     }
 

src/app/mock-api/apps/file-manager/api.ts

@@ -38,8 +38,8 @@ export class FileManagerMockApi
                 // Clone the items
                 let items = cloneDeep(this._items);
 
-                // See if a folder id exist
-                const folderId = request.params.get('folderId') ?? null;
+                // See if the folder id exist
+                const folderId = request.params.get('folderId') === 'null' ? null : request.params.get('folderId');
 
                 // Filter the items by folder id. If folder id is null,
                 // that means we want to root items which have folder id

src/app/mock-api/common/auth/api.ts

@@ -87,10 +87,10 @@ export class AuthMockApi
             });
 
         // -----------------------------------------------------------------------------------------------------
-        // @ Verify and refresh the access token - POST
+        // @ Sign in using the access token - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
-            .onPost('api/auth/refresh-access-token')
+            .onPost('api/auth/sign-in-with-token')
             .reply(({request}) => {
 
                 // Get the access token

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

@@ -819,12 +819,6 @@ export const defaultNavigation: FuseNavigationItem[] = [
                         type : 'basic',
                         link : '/ui/icons/material-solid'
                     },
-                    {
-                        id   : 'user-interface.icons.iconsmind',
-                        title: 'Iconsmind',
-                        type : 'basic',
-                        link : '/ui/icons/iconsmind'
-                    },
                     {
                         id   : 'user-interface.icons.feather',
                         title: 'Feather',
@@ -973,7 +967,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '14.1.1',
+                    title  : '15.0.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },

src/app/mock-api/common/search/api.ts

@@ -79,6 +79,9 @@ export class SearchMockApi
 
                         // Add a link
                         result.link = '/apps/contacts/' + result.id;
+
+                        // Add the name as the value
+                        result.value = result.name;
                     });
 
                     // Add to the results
@@ -95,6 +98,8 @@ export class SearchMockApi
                     // Normalize the results
                     pagesResults.forEach((result: any) => {
 
+                        // Add the page title as the value
+                        result.value = result.title;
                     });
 
                     // Add to the results
@@ -113,6 +118,9 @@ export class SearchMockApi
 
                         // Add a link
                         result.link = '/apps/tasks/' + result.id;
+
+                        // Add the title as the value
+                        result.value = result.title;
                     });
 
                     // Add to the results

src/app/mock-api/ui/icons/api.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { cloneDeep } from 'lodash-es';
 import { FuseMockApiService } from '@fuse/lib/mock-api';
-import { feather, heroicons, iconsmind, material } from 'app/mock-api/ui/icons/data';
+import { feather, heroicons, material } from 'app/mock-api/ui/icons/data';
 
 @Injectable({
     providedIn: 'root'
@@ -10,7 +10,6 @@ export class IconsMockApi
 {
     private readonly _feather: any = feather;
     private readonly _heroicons: any = heroicons;
-    private readonly _iconsmind: any = iconsmind;
     private readonly _material: any = material;
 
     /**
@@ -76,21 +75,6 @@ export class IconsMockApi
                 }
             ]);
 
-        // -----------------------------------------------------------------------------------------------------
-        // @ Iconsmind icons - GET
-        // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/ui/icons/iconsmind')
-            .reply(() => [
-                200,
-                {
-                    namespace: 'iconsmind',
-                    name     : 'Iconsmind',
-                    grid     : 'icon-size-10',
-                    list     : cloneDeep(this._iconsmind)
-                }
-            ]);
-
         // -----------------------------------------------------------------------------------------------------
         // @ Material solid icons - GET
         // -----------------------------------------------------------------------------------------------------

src/app/modules/admin/apps/academy/details/details.component.html

@@ -61,8 +61,8 @@
                                 class="relative flex items-start cursor-pointer"
                                 (click)="goToStep(step.order)">
                                 <div
-                                    class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset ring-transparent bg-card dark:bg-default"
-                                    [ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800': step.order < currentStep,
+                                    class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset bg-card dark:bg-default"
+                                    [ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800 ring-transparent': step.order < currentStep,
                                                 'ring-primary': step.order === currentStep,
                                                 'ring-gray-300 dark:ring-gray-600 group-hover:ring-gray-400': step.order > currentStep}">
                                     <!-- Check icon, show if the step is completed -->
@@ -98,11 +98,11 @@
             <!-- Header -->
             <div class="lg:hidden flex flex-0 items-center py-2 pl-4 pr-6 sm:py-4 md:pl-6 md:pr-8 border-b lg:border-b-0 bg-card dark:bg-transparent">
                 <!-- Title & Actions -->
-                <button
+                <a
                     mat-icon-button
                     [routerLink]="['..']">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-sm-left'"></mat-icon>
-                </button>
+                </a>
                 <h2 class="ml-2.5 text-md sm:text-xl font-medium tracking-tight truncate">
                     {{course.title}}
                 </h2>

src/app/modules/admin/apps/academy/list/list.component.html

@@ -146,7 +146,7 @@
 
                                 <!-- Course launch button -->
                                 <div class="px-6 py-4 text-right bg-gray-50 dark:bg-transparent">
-                                    <button
+                                    <a
                                         mat-stroked-button
                                         [routerLink]="[course.id]">
                                         <span class="inline-flex items-center">
@@ -172,7 +172,7 @@
                                                 class="ml-1.5 icon-size-5"
                                                 [svgIcon]="'heroicons_solid:arrow-sm-right'"></mat-icon>
                                         </span>
-                                    </button>
+                                    </a>
                                 </div>
                             </div>
                         </div>
@@ -184,8 +184,8 @@
             <ng-template #noCourses>
                 <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                     <mat-icon
-                        class="icon-size-20"
-                        [svgIcon]="'iconsmind:file_search'"></mat-icon>
+                        class="icon-size-24"
+                        [svgIcon]="'heroicons_outline:document-search'"></mat-icon>
                     <div class="mt-6 text-2xl font-semibold tracking-tight text-secondary">No courses found!</div>
                 </div>
             </ng-template>

src/app/modules/admin/apps/chat/chat.module.ts

@@ -12,6 +12,7 @@ import { chatRoutes } from 'app/modules/admin/apps/chat/chat.routing';
 import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
 import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
 import { ContactInfoComponent } from 'app/modules/admin/apps/chat/contact-info/contact-info.component';
+import { EmptyConversationComponent } from 'app/modules/admin/apps/chat/empty-conversation/empty-conversation.component';
 import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
 import { NewChatComponent } from 'app/modules/admin/apps/chat/new-chat/new-chat.component';
 import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.component';
@@ -22,6 +23,7 @@ import { ProfileComponent } from 'app/modules/admin/apps/chat/profile/profile.co
         ChatsComponent,
         ContactInfoComponent,
         ConversationComponent,
+        EmptyConversationComponent,
         NewChatComponent,
         ProfileComponent
     ],

src/app/modules/admin/apps/chat/chat.routing.ts

@@ -3,6 +3,7 @@ import { ChatChatResolver, ChatChatsResolver, ChatContactsResolver, ChatProfileR
 import { ChatComponent } from 'app/modules/admin/apps/chat/chat.component';
 import { ChatsComponent } from 'app/modules/admin/apps/chat/chats/chats.component';
 import { ConversationComponent } from 'app/modules/admin/apps/chat/conversation/conversation.component';
+import { EmptyConversationComponent } from 'app/modules/admin/apps/chat/empty-conversation/empty-conversation.component';
 
 export const chatRoutes: Route[] = [
     {
@@ -20,15 +21,15 @@ export const chatRoutes: Route[] = [
                 children : [
                     {
                         path     : '',
+                        pathMatch: 'full',
+                        component: EmptyConversationComponent
+                    },
+                    {
+                        path     : ':id',
                         component: ConversationComponent,
-                        children : [
-                            {
-                                path   : ':id',
-                                resolve: {
-                                    conversation: ChatChatResolver
-                                }
-                            }
-                        ]
+                        resolve  : {
+                            conversation: ChatChatResolver
+                        }
                     }
                 ]
             }

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

@@ -115,7 +115,7 @@
                     <div class="flex-auto overflow-y-auto">
                         <ng-container *ngIf="filteredChats.length > 0; else noChats">
                             <ng-container *ngFor="let chat of filteredChats; trackBy: trackByFn">
-                                <div
+                                <a
                                     class="z-20 flex items-center py-5 px-8 cursor-pointer border-b"
                                     [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
                                                 'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
@@ -155,7 +155,7 @@
                                                 [svgIcon]="'heroicons_solid:volume-off'"></mat-icon>
                                         </ng-container>
                                     </div>
-                                </div>
+                                </a>
                             </ng-container>
                         </ng-container>
                     </div>
@@ -169,7 +169,7 @@
                 <div class="flex flex-auto flex-col items-center justify-center h-full">
                     <mat-icon
                         class="icon-size-24"
-                        [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
+                        [svgIcon]="'heroicons_outline:chat'"></mat-icon>
                     <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">No chats</div>
                 </div>
             </ng-template>

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

@@ -196,7 +196,7 @@
         <div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
             <mat-icon
                 class="icon-size-24"
-                [svgIcon]="'iconsmind:speach_bubble'"></mat-icon>
+                [svgIcon]="'heroicons_outline:chat'"></mat-icon>
             <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a conversation or start a new chat</div>
         </div>
     </ng-template>

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

@@ -0,0 +1,11 @@
+<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
+
+    <!-- Select chat or start new -->
+    <div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
+        <mat-icon
+            class="icon-size-24"
+            [svgIcon]="'heroicons_outline:chat'"></mat-icon>
+        <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a conversation or start a new chat</div>
+    </div>
+
+</div>

src/app/modules/admin/apps/chat/empty-conversation/empty-conversation.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector       : 'chat-empty-conversation',
+    templateUrl    : './empty-conversation.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class EmptyConversationComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}

src/app/modules/admin/apps/contacts/details/details.component.html

@@ -13,14 +13,14 @@
             </ng-container>
             <!-- Close button -->
             <div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
-                <button
+                <a
                     mat-icon-button
                     [matTooltip]="'Close'"
                     [routerLink]="['../']">
                     <mat-icon
                         class="text-white"
                         [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                </button>
+                </a>
             </div>
         </div>
 
@@ -183,14 +183,14 @@
             </ng-container>
             <!-- Close button -->
             <div class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6">
-                <button
+                <a
                     mat-icon-button
                     [matTooltip]="'Close'"
                     [routerLink]="['../']">
                     <mat-icon
                         class="text-white"
                         [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                </button>
+                </a>
             </div>
         </div>
 

src/app/modules/admin/apps/contacts/details/details.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
@@ -27,7 +27,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
     tagsEditMode: boolean = false;
     filteredTags: Tag[];
     contact: Contact;
-    contactForm: FormGroup;
+    contactForm: UntypedFormGroup;
     contacts: Contact[];
     countries: Country[];
     private _tagsPanelOverlayRef: OverlayRef;
@@ -41,7 +41,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
         private _changeDetectorRef: ChangeDetectorRef,
         private _contactsListComponent: ContactsListComponent,
         private _contactsService: ContactsService,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
@@ -100,8 +100,8 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
                 this.contact = contact;
 
                 // Clear the emails and phoneNumbers form arrays
-                (this.contactForm.get('emails') as FormArray).clear();
-                (this.contactForm.get('phoneNumbers') as FormArray).clear();
+                (this.contactForm.get('emails') as UntypedFormArray).clear();
+                (this.contactForm.get('phoneNumbers') as UntypedFormArray).clear();
 
                 // Patch values to the form
                 this.contactForm.patchValue(contact);
@@ -136,7 +136,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
 
                 // Add the email form groups to the emails form array
                 emailFormGroups.forEach((emailFormGroup) => {
-                    (this.contactForm.get('emails') as FormArray).push(emailFormGroup);
+                    (this.contactForm.get('emails') as UntypedFormArray).push(emailFormGroup);
                 });
 
                 // Setup the phone numbers form array
@@ -171,7 +171,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
 
                 // Add the phone numbers form groups to the phone numbers form array
                 phoneNumbersFormGroups.forEach((phoneNumbersFormGroup) => {
-                    (this.contactForm.get('phoneNumbers') as FormArray).push(phoneNumbersFormGroup);
+                    (this.contactForm.get('phoneNumbers') as UntypedFormArray).push(phoneNumbersFormGroup);
                 });
 
                 // Toggle the edit mode off
@@ -639,7 +639,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
         });
 
         // Add the email form group to the emails form array
-        (this.contactForm.get('emails') as FormArray).push(emailFormGroup);
+        (this.contactForm.get('emails') as UntypedFormArray).push(emailFormGroup);
 
         // Mark for check
         this._changeDetectorRef.markForCheck();
@@ -653,7 +653,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
     removeEmailField(index: number): void
     {
         // Get form array for emails
-        const emailsFormArray = this.contactForm.get('emails') as FormArray;
+        const emailsFormArray = this.contactForm.get('emails') as UntypedFormArray;
 
         // Remove the email field
         emailsFormArray.removeAt(index);
@@ -675,7 +675,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
         });
 
         // Add the phone number form group to the phoneNumbers form array
-        (this.contactForm.get('phoneNumbers') as FormArray).push(phoneNumberFormGroup);
+        (this.contactForm.get('phoneNumbers') as UntypedFormArray).push(phoneNumberFormGroup);
 
         // Mark for check
         this._changeDetectorRef.markForCheck();
@@ -689,7 +689,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
     removePhoneNumberField(index: number): void
     {
         // Get form array for phone numbers
-        const phoneNumbersFormArray = this.contactForm.get('phoneNumbers') as FormArray;
+        const phoneNumbersFormArray = this.contactForm.get('phoneNumbers') as UntypedFormArray;
 
         // Remove the phone number field
         phoneNumbersFormArray.removeAt(index);

src/app/modules/admin/apps/contacts/list/list.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import { MatDrawer } from '@angular/material/sidenav';
 import { filter, fromEvent, Observable, Subject, switchMap, takeUntil } from 'rxjs';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
@@ -24,7 +24,7 @@ export class ContactsListComponent implements OnInit, OnDestroy
     contactsTableColumns: string[] = ['name', 'email', 'phoneNumber', 'job'];
     countries: Country[];
     drawerMode: 'side' | 'over';
-    searchInputControl: FormControl = new FormControl();
+    searchInputControl: UntypedFormControl = new UntypedFormControl();
     selectedContact: Contact;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -49,9 +49,9 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
     flashMessage: 'success' | 'error' | null = null;
     isLoading: boolean = false;
     pagination: InventoryPagination;
-    searchInputControl: FormControl = new FormControl();
+    searchInputControl: UntypedFormControl = new UntypedFormControl();
     selectedProduct: InventoryProduct | null = null;
-    selectedProductForm: FormGroup;
+    selectedProductForm: UntypedFormGroup;
     tags: InventoryTag[];
     tagsEditMode: boolean = false;
     vendors: InventoryVendor[];
@@ -63,7 +63,7 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseConfirmationService: FuseConfirmationService,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _inventoryService: InventoryService
     )
     {

src/app/modules/admin/apps/file-manager/details/details.component.html

@@ -2,11 +2,11 @@
 
     <!-- Close button -->
     <div class="flex items-center justify-end">
-        <button
+        <a
             mat-icon-button
             [routerLink]="['../../']">
             <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
-        </button>
+        </a>
     </div>
 
     <!-- Preview -->
@@ -14,13 +14,13 @@
         <div class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-card">
             <ng-container *ngIf="item.type === 'folder'">
                 <mat-icon
-                    class="icon-size-14 text-hint"
-                    [svgIcon]="'iconsmind:folder'"></mat-icon>
+                    class="icon-size-24 text-hint"
+                    [svgIcon]="'heroicons_outline:folder'"></mat-icon>
             </ng-container>
             <ng-container *ngIf="item.type !== 'folder'">
                 <mat-icon
-                    class="icon-size-14 text-hint"
-                    [svgIcon]="'iconsmind:file'"></mat-icon>
+                    class="icon-size-24 text-hint"
+                    [svgIcon]="'heroicons_outline:document'"></mat-icon>
             </ng-container>
         </div>
     </div>

src/app/modules/admin/apps/file-manager/list/list.component.html

@@ -94,7 +94,7 @@
                                                         <!-- Icon -->
                                                         <mat-icon
                                                             class="icon-size-14 text-hint"
-                                                            [svgIcon]="'iconsmind:folder'"></mat-icon>
+                                                            [svgIcon]="'heroicons_outline:folder'"></mat-icon>
                                                     </div>
                                                 </div>
                                                 <div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
@@ -128,7 +128,7 @@
                                                     <div class="relative">
                                                         <mat-icon
                                                             class="icon-size-14 text-hint"
-                                                            [svgIcon]="'iconsmind:file'"></mat-icon>
+                                                            [svgIcon]="'heroicons_outline:document'"></mat-icon>
                                                         <div
                                                             class="absolute left-0 bottom-0 px-1.5 rounded text-sm font-semibold leading-5 text-white"
                                                             [class.bg-red-600]="file.type === 'PDF'"
@@ -162,7 +162,7 @@
                     <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                         <mat-icon
                             class="icon-size-24"
-                            [svgIcon]="'iconsmind:file_hide'"></mat-icon>
+                            [svgIcon]="'heroicons_outline:folder-open'"></mat-icon>
                         <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no items!</div>
                     </div>
                 </ng-template>

src/app/modules/admin/apps/help-center/support/support.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, NgForm, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { HelpCenterService } from 'app/modules/admin/apps/help-center/help-center.service';
 
@@ -14,13 +14,13 @@ export class HelpCenterSupportComponent implements OnInit
     @ViewChild('supportNgForm') supportNgForm: NgForm;
 
     alert: any;
-    supportForm: FormGroup;
+    supportForm: UntypedFormGroup;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _helpCenterService: HelpCenterService
     )
     {

src/app/modules/admin/apps/mailbox/compose/compose.component.html

@@ -72,6 +72,7 @@
         <quill-editor
             class="mt-2"
             [formControlName]="'body'"
+            [bounds]="'self'"
             [modules]="quillModules"></quill-editor>
 
         <!-- Actions -->

src/app/modules/admin/apps/mailbox/compose/compose.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -9,7 +9,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 })
 export class MailboxComposeComponent implements OnInit
 {
-    composeForm: FormGroup;
+    composeForm: UntypedFormGroup;
     copyFields: { cc: boolean; bcc: boolean } = {
         cc : false,
         bcc: false
@@ -27,7 +27,7 @@ export class MailboxComposeComponent implements OnInit
      */
     constructor(
         public matDialogRef: MatDialogRef<MailboxComposeComponent>,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/apps/mailbox/details/details.component.html

@@ -400,7 +400,7 @@
         <div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
             <mat-icon
                 class="icon-size-24"
-                [svgIcon]="'iconsmind:mailbox_empty'"></mat-icon>
+                [svgIcon]="'heroicons_outline:mail'"></mat-icon>
             <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
         </div>
 

src/app/modules/admin/apps/mailbox/empty-details/empty-details.component.html

@@ -0,0 +1,11 @@
+<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
+
+    <!-- Select mail to read -->
+    <div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
+        <mat-icon
+            class="icon-size-24"
+            [svgIcon]="'heroicons_outline:mail'"></mat-icon>
+        <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
+    </div>
+
+</div>

src/app/modules/admin/apps/mailbox/empty-details/empty-details.component.ts

@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'mailbox-empty-details',
+    templateUrl  : './empty-details.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class MailboxEmptyDetailsComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}

src/app/modules/admin/apps/mailbox/list/list.component.html

@@ -136,7 +136,7 @@
         <div class="z-100 absolute inset-0 flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
             <mat-icon
                 class="icon-size-24"
-                [svgIcon]="'iconsmind:mailbox_empty'"></mat-icon>
+                [svgIcon]="'heroicons_outline:mail'"></mat-icon>
             <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no e-mails</div>
         </div>
     </ng-template>

src/app/modules/admin/apps/mailbox/mailbox.module.ts

@@ -20,6 +20,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
 import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component';
 import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
+import { MailboxEmptyDetailsComponent } from 'app/modules/admin/apps/mailbox/empty-details/empty-details.component';
 import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
 import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
 import { MailboxSidebarComponent } from 'app/modules/admin/apps/mailbox/sidebar/sidebar.component';
@@ -30,6 +31,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MailboxComponent,
         MailboxComposeComponent,
         MailboxDetailsComponent,
+        MailboxEmptyDetailsComponent,
         MailboxListComponent,
         MailboxSettingsComponent,
         MailboxSidebarComponent

src/app/modules/admin/apps/mailbox/mailbox.routing.ts

@@ -5,6 +5,7 @@ import { MailboxFiltersResolver, MailboxFoldersResolver, MailboxLabelsResolver,
 import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
 import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
 import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
+import { MailboxEmptyDetailsComponent } from 'app/modules/admin/apps/mailbox/empty-details/empty-details.component';
 
 /**
  * Mailbox custom route matcher
@@ -141,15 +142,15 @@ export const mailboxRoutes: Route[] = [
                 children             : [
                     {
                         path     : '',
+                        pathMatch: 'full',
+                        component: MailboxEmptyDetailsComponent
+                    },
+                    {
+                        path     : ':id',
                         component: MailboxDetailsComponent,
-                        children : [
-                            {
-                                path   : ':id',
-                                resolve: {
-                                    mail: MailboxMailResolver
-                                }
-                            }
-                        ]
+                        resolve  : {
+                            mail: MailboxMailResolver
+                        }
                     }
                 ]
             },

src/app/modules/admin/apps/mailbox/settings/settings.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { debounceTime, take } from 'rxjs';
 import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
 import { MailboxService } from 'app/modules/admin/apps/mailbox/mailbox.service';
@@ -16,14 +16,14 @@ export class MailboxSettingsComponent implements OnInit
     labelColors: any = labelColors;
     labelColorDefs: any = labelColorDefs;
     labels: MailLabel[];
-    labelsForm: FormGroup;
+    labelsForm: UntypedFormGroup;
 
     /**
      * Constructor
      */
     constructor(
         public mailboxComponent: MailboxComponent,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _mailboxService: MailboxService
     )
     {
@@ -67,7 +67,7 @@ export class MailboxSettingsComponent implements OnInit
                     });
 
                     // Add the label form group to the labels form array
-                    (this.labelsForm.get('labels') as FormArray).push(labelFormGroup);
+                    (this.labelsForm.get('labels') as UntypedFormArray).push(labelFormGroup);
                 });
             });
 
@@ -92,7 +92,7 @@ export class MailboxSettingsComponent implements OnInit
         this._mailboxService.addLabel(this.labelsForm.get('newLabel').value).subscribe((addedLabel) => {
 
             // Push the new label to the labels form array
-            (this.labelsForm.get('labels') as FormArray).push(this._formBuilder.group({
+            (this.labelsForm.get('labels') as UntypedFormArray).push(this._formBuilder.group({
                 id   : [addedLabel.id],
                 title: [addedLabel.title, Validators.required],
                 slug : [addedLabel.slug],
@@ -114,7 +114,7 @@ export class MailboxSettingsComponent implements OnInit
     deleteLabel(id: string): void
     {
         // Get the labels form array
-        const labelsFormArray = this.labelsForm.get('labels') as FormArray;
+        const labelsFormArray = this.labelsForm.get('labels') as UntypedFormArray;
 
         // Remove the label from the labels form array
         labelsFormArray.removeAt(labelsFormArray.value.findIndex(label => label.id === id));
@@ -129,7 +129,7 @@ export class MailboxSettingsComponent implements OnInit
     updateLabels(): void
     {
         // Iterate through the labels form array controls
-        (this.labelsForm.get('labels') as FormArray).controls.forEach((labelFormGroup) => {
+        (this.labelsForm.get('labels') as UntypedFormArray).controls.forEach((labelFormGroup) => {
 
             // If the label has been edited...
             if ( labelFormGroup.dirty )

src/app/modules/admin/apps/notes/list/list.component.html

@@ -207,7 +207,7 @@
                     <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                         <mat-icon
                             class="icon-size-24"
-                            [svgIcon]="'iconsmind:file_hide'"></mat-icon>
+                            [svgIcon]="'heroicons_outline:document'"></mat-icon>
                         <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">There are no notes!</div>
                     </div>
                 </ng-template>

src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 
 @Component({
     selector       : 'scrumboard-board-add-card',
@@ -15,7 +15,7 @@ export class ScrumboardBoardAddCardComponent implements OnInit
     @Input() buttonTitle: string = 'Add a card';
     @Output() readonly saved: EventEmitter<string> = new EventEmitter<string>();
 
-    form: FormGroup;
+    form: UntypedFormGroup;
     formVisible: boolean = false;
 
     /**
@@ -23,7 +23,7 @@ export class ScrumboardBoardAddCardComponent implements OnInit
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 
 @Component({
     selector       : 'scrumboard-board-add-list',
@@ -13,7 +13,7 @@ export class ScrumboardBoardAddListComponent implements OnInit
     @Input() buttonTitle: string = 'Add a list';
     @Output() readonly saved: EventEmitter<string> = new EventEmitter<string>();
 
-    form: FormGroup;
+    form: UntypedFormGroup;
     formVisible: boolean = false;
 
     /**
@@ -21,7 +21,7 @@ export class ScrumboardBoardAddListComponent implements OnInit
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/apps/scrumboard/board/board.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { Subject, takeUntil } from 'rxjs';
 import * as moment from 'moment';
@@ -17,7 +17,7 @@ import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.
 export class ScrumboardBoardComponent implements OnInit, OnDestroy
 {
     board: Board;
-    listTitleForm: FormGroup;
+    listTitleForm: UntypedFormGroup;
 
     // Private
     private readonly _positionStep: number = 65536;
@@ -30,7 +30,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _fuseConfirmationService: FuseConfirmationService,
         private _scrumboardService: ScrumboardService
     )

src/app/modules/admin/apps/scrumboard/card/details/details.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialogRef } from '@angular/material/dialog';
 import { debounceTime, Subject, takeUntil, tap } from 'rxjs';
@@ -19,7 +19,7 @@ export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
     @ViewChild('labelInput') labelInput: ElementRef<HTMLInputElement>;
     board: Board;
     card: Card;
-    cardForm: FormGroup;
+    cardForm: UntypedFormGroup;
     labels: Label[];
     filteredLabels: Label[];
 
@@ -32,7 +32,7 @@ export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
     constructor(
         public matDialogRef: MatDialogRef<ScrumboardCardDetailsComponent>,
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _scrumboardService: ScrumboardService
     )
     {

src/app/modules/admin/apps/tasks/details/details.component.html

@@ -49,11 +49,11 @@
                 </mat-menu>
 
                 <!-- Close button -->
-                <button
+                <a
                     mat-icon-button
                     [routerLink]="['../']">
                     <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                </button>
+                </a>
             </div>
 
         </div>

src/app/modules/admin/apps/tasks/details/details.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
@@ -28,7 +28,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
     tagsEditMode: boolean = false;
     filteredTags: Tag[];
     task: Task;
-    taskForm: FormGroup;
+    taskForm: UntypedFormGroup;
     tasks: Task[];
     private _tagsPanelOverlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,7 +39,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,

src/app/modules/admin/apps/tasks/list/list.component.html

@@ -162,7 +162,7 @@
                     <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
                         <mat-icon
                             class="icon-size-24"
-                            [svgIcon]="'iconsmind:bulleted_list'"></mat-icon>
+                            [svgIcon]="'heroicons_outline:clipboard-list'"></mat-icon>
                         <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Add a task to start planning!</div>
                     </div>
                 </ng-template>

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

@@ -10,6 +10,78 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v15.0.0
+        {
+            version    : 'v15.0.0',
+            releaseDate: 'Jun 03, 2022',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(@fuse/navigation) Added "fragment" and "queryParams" support along with "preserveFragment" and "queryParamsHandling" on navigation items',
+                        '(@fuse/overrides/quill) Added tooltip styles for better compatibility',
+                        '(@fuse/services/platform) Added platform checker service',
+                        '(global) Added custom scrollbar styling for platforms other than macOS and iOS',
+                        '(layout/common/search) Implemented the new MatAutocomplete "autoSelectActiveOption" functionality',
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14',
+                        '(dependencies) Updated various other packages',
+                        '(global) Replace @import with @use in scss files',
+                        '(global) Replaced linked buttons with a tags + removed unnecessary routerLink attributes from some buttons',
+                        '(global) BREAKING: Replaced iconsmind icons with heroicons and removed the iconsmind because of the bundle size concerns',
+                        '(global) Replaced "FormBuilder" and "FormGroup" types with "UntypedFormBuilder" and "UntypedFormGroup"',
+                        '(FuseDrawer) Updated the overlay and animation handling code for better stability',
+                        '(@fuse/overrides/quill) Better scrolling for Quill editor',
+                        '(auth) Made the renewing token on "sign-in-with-token" process an optional step to simplify the login process',
+                        '(auth) Changed the url on "signInUsingToken" method to reflect the mock-api changes',
+                        '(mock-api) Replaced the "refresh-access-token" url with "sign-in-with-token"',
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/navigation) Collapse animation doesn"t work smoothly because of the parent"s margin',
+                        '(@fuse/service/confirmation) Cleaned-up the dialog component',
+                        '(layout) The theme settings cog is not positioned correctly in Empty layout',
+                        '(auth/sign-up) Missing ngForm reference',
+                        '(apps/academy) Ring outside the current step"s number is not visible',
+                        '(apps/chat) Empty route related issues',
+                        '(apps/chat) Empty route related issues',
+                        '(apps/mailbox) Empty route related issues',
+                        '(apps/mailbox) Quill editor tooltips are not positioning correctly',
+                        '(mock-api/file-manager) http params are not working properly because of the new string conversion',
+                        '(ui/page-layouts) Toggle button selected background is not visible'
+                    ]
+                }
+            ]
+        },
+        // v14.2.0
+        {
+            version    : 'v14.2.0',
+            releaseDate: 'Feb 21, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated various packages',
+                        '(AngularCLI) Re-enabled the cache since Tailwind related issues are fixed',
+                        '(@fuse/navigation) Expose the width variables as css custom properties, so they can be overridden from the outside',
+                        '(@fuse/drawer) Expose the width variable as a css custom property, so it can be overridden from the outside',
+                        '(@fuse/masonry) Removed the unnecessary scss file'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(layouts/dense) Fixed: Navigation appearance doesn\'t set correctly on small devices'
+                    ]
+                }
+            ]
+        },
         // v14.1.1
         {
             version    : 'v14.1.1',

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

@@ -66,6 +66,9 @@ export class DirectoryStructureComponent implements OnInit
                         children: [
                             {name: 'auth/'},
                             {name: 'config/'},
+                            {name: 'icons/'},
+                            {name: 'navigation/'},
+                            {name: 'transloco/'},
                             {name: 'user/'},
                             {name: 'core.module.ts'}
                         ]
@@ -112,8 +115,7 @@ export class DirectoryStructureComponent implements OnInit
                     {name: 'app.component.ts'},
                     {name: 'app.module.ts'},
                     {name: 'app.resolvers.ts'},
-                    {name: 'app.routing.ts'},
-                    {name: 'app.types.ts'}
+                    {name: 'app.routing.ts'}
                 ]
             }
         ];
@@ -136,8 +138,8 @@ export class DirectoryStructureComponent implements OnInit
                             {name: 'tailwind/'},
                             {name: 'validators/'},
                             {name: 'version/'},
-                            {name: 'index.ts'},
-                            {name: 'fuse.module.ts'}
+                            {name: 'fuse.module.ts'},
+                            {name: 'index.ts'}
                         ]
                     },
                     this.appDir[0],
@@ -145,6 +147,7 @@ export class DirectoryStructureComponent implements OnInit
                         name    : 'assets/',
                         children: [
                             {name: 'fonts/'},
+                            {name: 'i18n/'},
                             {name: 'icons/'},
                             {name: 'images/'},
                             {name: 'styles/'}

src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordClassicComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordFullscreenReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordFullscreenComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/forgot-password/modern-reversed/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordModernReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/forgot-password/modern/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordModernComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordSplitScreenReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 
@@ -15,14 +15,14 @@ export class ForgotPasswordSplitScreenComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    forgotPasswordForm: FormGroup;
+    forgotPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordClassicComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordFullscreenReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordFullscreenComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/modern-reversed/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordModernReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/modern/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordModernComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordSplitScreenReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { FuseValidators } from '@fuse/validators';
@@ -16,14 +16,14 @@ export class ResetPasswordSplitScreenComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    resetPasswordForm: FormGroup;
+    resetPasswordForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
      * Constructor
      */
     constructor(
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -16,7 +16,7 @@ export class SignInClassicComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
@@ -24,7 +24,7 @@ export class SignInClassicComponent implements OnInit
      */
     constructor(
         private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -16,7 +16,7 @@ export class SignInFullscreenReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
@@ -24,7 +24,7 @@ export class SignInFullscreenReversedComponent implements OnInit
      */
     constructor(
         private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -16,7 +16,7 @@ export class SignInFullscreenComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
@@ -24,7 +24,7 @@ export class SignInFullscreenComponent implements OnInit
      */
     constructor(
         private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -16,7 +16,7 @@ export class SignInModernReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
@@ -24,7 +24,7 @@ export class SignInModernReversedComponent implements OnInit
      */
     constructor(
         private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -16,7 +16,7 @@ export class SignInModernComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
@@ -24,7 +24,7 @@ export class SignInModernComponent implements OnInit
      */
     constructor(
         private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }

src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseAlertType } from '@fuse/components/alert';
 import { AuthService } from 'app/core/auth/auth.service';
@@ -16,7 +16,7 @@ export class SignInSplitScreenReversedComponent implements OnInit
         type   : 'success',
         message: ''
     };
-    signInForm: FormGroup;
+    signInForm: UntypedFormGroup;
     showAlert: boolean = false;
 
     /**
@@ -24,7 +24,7 @@ export class SignInSplitScreenReversedComponent implements OnInit
      */
     constructor(
         private _authService: AuthService,
-        private _formBuilder: FormBuilder
+        private _formBuilder: UntypedFormBuilder
     )
     {
     }