Updated version number, packages and the changelog

Big thanks to @steveschmitt for the majority of the work.

angular.json

@@ -1,6 +1,11 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
+    "cli": {
+        "schematicCollections": [
+            "@angular-eslint/schematics"
+        ]
+    },
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
@@ -28,7 +33,10 @@
                             "highlight.js",
                             "crypto-js/enc-utf8",
                             "crypto-js/hmac-sha256",
-                            "crypto-js/enc-base64"
+                            "crypto-js/enc-base64",
+                            "flat",
+                            "moment",
+                            "quill"
                         ],
                         "assets": [
                             "src/favicon-16x16.png",
@@ -136,9 +144,5 @@
                 }
             }
         }
-    },
-    "defaultProject": "fuse",
-    "cli": {
-        "defaultCollection": "@angular-eslint/schematics"
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@fuse/demo",
-    "version": "14.0.0",
+    "name": "fuse-angular",
+    "version": "16.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.0.1",
-        "@angular/cdk": "13.0.0",
-        "@angular/common": "13.0.1",
-        "@angular/compiler": "13.0.1",
-        "@angular/core": "13.0.1",
-        "@angular/forms": "13.0.1",
-        "@angular/material": "13.0.0",
-        "@angular/material-moment-adapter": "13.0.0",
-        "@angular/platform-browser": "13.0.1",
-        "@angular/platform-browser-dynamic": "13.0.1",
-        "@angular/router": "13.0.1",
-        "@ngneat/transloco": "3.1.0",
-        "apexcharts": "3.29.0",
+        "@angular/animations": "14.2.4",
+        "@angular/cdk": "14.2.3",
+        "@angular/common": "14.2.4",
+        "@angular/compiler": "14.2.4",
+        "@angular/core": "14.2.4",
+        "@angular/forms": "14.2.4",
+        "@angular/material": "14.2.3",
+        "@angular/material-luxon-adapter": "14.2.3",
+        "@angular/platform-browser": "14.2.4",
+        "@angular/platform-browser-dynamic": "14.2.4",
+        "@angular/router": "14.2.4",
+        "@ngneat/transloco": "4.1.1",
+        "apexcharts": "3.35.5",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.3.1",
+        "highlight.js": "11.6.0",
         "lodash-es": "4.17.21",
-        "moment": "2.29.1",
-        "ng-apexcharts": "1.5.12",
-        "ngx-markdown": "13.0.0",
-        "ngx-quill": "16.0.1",
-        "perfect-scrollbar": "1.5.3",
+        "luxon": "3.0.4",
+        "ng-apexcharts": "1.7.1",
+        "ngx-markdown": "13.1.0",
+        "ngx-quill": "19.0.1",
+        "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
-        "rxjs": "7.4.0",
-        "tslib": "2.3.1",
-        "zone.js": "0.11.4"
+        "rxjs": "7.5.7",
+        "tslib": "2.4.0",
+        "zone.js": "0.11.8"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "13.0.2",
-        "@angular-eslint/builder": "12.6.1",
-        "@angular-eslint/eslint-plugin": "12.6.1",
-        "@angular-eslint/eslint-plugin-template": "12.6.1",
-        "@angular-eslint/schematics": "12.6.1",
-        "@angular-eslint/template-parser": "12.6.1",
-        "@angular/cli": "13.0.2",
-        "@angular/compiler-cli": "13.0.1",
-        "@tailwindcss/aspect-ratio": "0.3.0",
-        "@tailwindcss/line-clamp": "0.2.2",
-        "@tailwindcss/typography": "0.4.1",
-        "@types/chroma-js": "2.1.3",
+        "@angular-devkit/build-angular": "14.2.4",
+        "@angular-eslint/builder": "14.1.2",
+        "@angular-eslint/eslint-plugin": "14.1.2",
+        "@angular-eslint/eslint-plugin-template": "14.1.2",
+        "@angular-eslint/schematics": "14.1.2",
+        "@angular-eslint/template-parser": "14.1.2",
+        "@angular/cli": "14.2.4",
+        "@angular/compiler-cli": "14.2.4",
+        "@tailwindcss/line-clamp": "0.4.2",
+        "@tailwindcss/typography": "0.5.7",
+        "@types/chroma-js": "2.1.4",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.10.2",
-        "@types/lodash": "4.14.176",
-        "@types/lodash-es": "4.17.5",
-        "@types/node": "12.20.37",
-        "@typescript-eslint/eslint-plugin": "5.3.1",
-        "@typescript-eslint/parser": "5.3.1",
-        "autoprefixer": "10.4.0",
-        "chroma-js": "2.1.2",
-        "eslint": "7.32.0",
-        "eslint-plugin-import": "2.25.3",
-        "eslint-plugin-jsdoc": "37.0.3",
+        "@types/jasmine": "4.0.3",
+        "@types/lodash": "4.14.186",
+        "@types/lodash-es": "4.17.6",
+        "@types/luxon": "3.0.1",
+        "@typescript-eslint/eslint-plugin": "5.39.0",
+        "@typescript-eslint/parser": "5.39.0",
+        "autoprefixer": "10.4.12",
+        "chroma-js": "2.4.2",
+        "eslint": "8.24.0",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-jsdoc": "39.3.6",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.10.1",
-        "karma": "6.3.8",
-        "karma-chrome-launcher": "3.1.0",
-        "karma-coverage": "2.0.3",
-        "karma-jasmine": "4.0.1",
-        "karma-jasmine-html-reporter": "1.7.0",
+        "jasmine-core": "4.3.0",
+        "karma": "6.4.1",
+        "karma-chrome-launcher": "3.1.1",
+        "karma-coverage": "2.2.0",
+        "karma-jasmine": "5.1.0",
+        "karma-jasmine-html-reporter": "2.0.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.11",
-        "tailwindcss": "2.2.19",
-        "typescript": "4.4.4"
+        "postcss": "8.4.17",
+        "tailwindcss": "3.1.8",
+        "typescript": "4.7.4"
     }
 }

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

@@ -1,5 +1,6 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
 import { NavigationEnd, Router } from '@angular/router';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
@@ -51,6 +52,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     private readonly _handleAsideOverlayClick: any;
     private readonly _handleOverlayClick: any;
     private _hovered: boolean = false;
+    private _mutationObserver: MutationObserver;
     private _overlay: HTMLElement;
     private _player: AnimationPlayer;
     private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
@@ -64,6 +66,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     constructor(
         private _animationBuilder: AnimationBuilder,
         private _changeDetectorRef: ChangeDetectorRef,
+        @Inject(DOCUMENT) private _document: Document,
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _router: Router,
@@ -89,6 +92,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 +104,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 */
     }
 
     /**
@@ -328,6 +333,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     ngAfterViewInit(): void
     {
+        // Fix for Firefox.
+        //
+        // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
+        // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
+        // This fixes the problem by reading the 'top' value from the html element and adding it as a
+        // 'marginTop' to the navigation itself.
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                const mutationTarget = mutation.target as HTMLElement;
+                if ( mutation.attributeName === 'class' )
+                {
+                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
+                    {
+                        const top = parseInt(mutationTarget.style.top, 10);
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
+                    }
+                    else
+                    {
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                    }
+                }
+            });
+        });
+        this._mutationObserver.observe(this._document.documentElement, {
+            attributes     : true,
+            attributeFilter: ['class']
+        });
+
         setTimeout(() => {
 
             // Return if 'navigation content' element does not exist
@@ -373,6 +406,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     ngOnDestroy(): void
     {
+        // Disconnect the mutation observer
+        this._mutationObserver.disconnect();
+
         // Forcefully close the navigation and aside in case they are opened
         this.close();
         this.closeAside();

src/@fuse/fuse.module.ts

@@ -4,8 +4,8 @@ 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 { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
 import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
 
 @NgModule({
@@ -13,8 +13,8 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
         FuseConfirmationModule,
         FuseLoadingModule,
         FuseMediaWatcherModule,
+        FusePlatformModule,
         FuseSplashScreenModule,
-        FuseTailwindConfigModule,
         FuseUtilsModule
     ],
     providers: [

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/media-watcher/media-watcher.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { map, Observable, ReplaySubject, switchMap } from 'rxjs';
-import { FuseTailwindService } from '@fuse/services/tailwind/tailwind.service';
+import { fromPairs } from 'lodash-es';
+import { FuseConfigService } from '@fuse/services/config';
 
 @Injectable()
 export class FuseMediaWatcherService
@@ -13,11 +14,12 @@ export class FuseMediaWatcherService
      */
     constructor(
         private _breakpointObserver: BreakpointObserver,
-        private _fuseTailwindConfigService: FuseTailwindService
+        private _fuseConfigService: FuseConfigService
     )
     {
-        this._fuseTailwindConfigService.tailwindConfig$.pipe(
-            switchMap(config => this._breakpointObserver.observe(Object.values(config.breakpoints)).pipe(
+        this._fuseConfigService.config$.pipe(
+            map(config => fromPairs(Object.entries(config.screens).map(([alias, screen]) => ([alias, `(min-width: ${screen})`])))),
+            switchMap(screens => this._breakpointObserver.observe(Object.values(screens)).pipe(
                 map((state) => {
 
                     // Prepare the observable values and set their defaults
@@ -29,7 +31,7 @@ export class FuseMediaWatcherService
                     for ( const [query] of matchingBreakpoints )
                     {
                         // Find the alias of the matching query
-                        const matchingAlias = Object.entries(config.breakpoints).find(([alias, q]) => q === query)[0];
+                        const matchingAlias = Object.entries(screens).find(([alias, q]) => q === query)[0];
 
                         // Add the matching query to the observable values
                         if ( matchingAlias )

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/services/tailwind/index.ts

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

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

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

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

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

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

@@ -1,58 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
-import { fromPairs, map } from 'lodash-es';
-import * as extractedTailwindConfigStyle from '@fuse/styles/core/tailwind-config.scss';
-
-@Injectable()
-export class FuseTailwindService
-{
-    private _tailwindConfig: ReplaySubject<any> = new ReplaySubject<any>(1);
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-        // Prepare the config object
-        const config: any = {};
-
-        // Extract the style from the class
-        const regexpForClass = /\.fuse-tailwind-extracted-config\s\{([\s\S]*)\}/g;
-        const style = regexpForClass.exec(extractedTailwindConfigStyle.default)[1].trim();
-
-        // Extract the rules
-        const regexp = /(--[\s\S]*?):'([\s\S]*?)';/g;
-        let rules = regexp.exec(style);
-
-        // Add to the config
-        while ( rules !== null )
-        {
-            const configGroup = /--([\s\S]*?)-/g.exec(rules[1])[1];
-            if ( !config[configGroup] )
-            {
-                config[configGroup] = {};
-            }
-
-            config[configGroup][rules[1].replace(/(--[\s\S]*?-)/g, '')] = rules[2];
-            rules = regexp.exec(style);
-        }
-
-        // Parse the themes objects
-        config.themes = fromPairs(map(config.themes, (value, key) => [key, JSON.parse(value)]));
-
-        // Execute the observable with the config
-        this._tailwindConfig.next(config);
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for _tailwindConfig
-     */
-    get tailwindConfig$(): Observable<any>
-    {
-        return this._tailwindConfig.asObservable();
-    }
-}

src/@fuse/styles/core/tailwind-config.scss

@@ -1,6 +0,0 @@
-/* ----------------------------------------------------------------------------------------------------- */
-/* @ Any configuration we need from Tailwind's config file will be extracted here so we can import this
-/* @ file from "config.ts" to access the extracted configuration from TypeScript
-/* ----------------------------------------------------------------------------------------------------- */
-@variants fuse-tailwind-extracted-config {
-}

src/@fuse/styles/main.scss

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

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

@@ -765,10 +765,6 @@
             font-weight: 500;
             line-height: 1;
 
-            > div {
-                display: contents; /* Remove the div from flow to stop the subscript animation */
-            }
-
             .mat-error,
             .mat-hint {
                 display: block;

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/styles/themes.scss

@@ -72,38 +72,38 @@ body .light {
             is-dark: map.get(map.get($base-light-theme, color), is-dark),
             foreground: (
                 base: #000000,
-                divider: #E2E8F0, /* blueGray.200 */
-                dividers: #E2E8F0, /* blueGray.200 */
-                disabled: #94A3B8, /* blueGray.400 */
-                disabled-button: #94A3B8, /* blueGray.400 */
-                disabled-text: #94A3B8, /* blueGray.400 */
+                divider: #E2E8F0, /* slate.200 */
+                dividers: #E2E8F0, /* slate.200 */
+                disabled: #94A3B8, /* slate.400 */
+                disabled-button: #94A3B8, /* slate.400 */
+                disabled-text: #94A3B8, /* slate.400 */
                 elevation: #000000,
-                hint-text: #94A3B8, /* blueGray.400 */
-                secondary-text: #64748B, /* blueGray.500 */
-                icon: #64748B, /* blueGray.500 */
-                icons: #64748B, /* blueGray.500 */
-                mat-icon: #64748B, /* blueGray.500 */
-                text: #1E293B, /* blueGray.800 */
-                slider-min: #1E293B, /* blueGray.800 */
-                slider-off: #CBD5E1, /* blueGray.300 */
-                slider-off-active: #94A3B8 /* blueGray.400 */
+                hint-text: #94A3B8, /* slate.400 */
+                secondary-text: #64748B, /* slate.500 */
+                icon: #64748B, /* slate.500 */
+                icons: #64748B, /* slate.500 */
+                mat-icon: #64748B, /* slate.500 */
+                text: #1E293B, /* slate.800 */
+                slider-min: #1E293B, /* slate.800 */
+                slider-off: #CBD5E1, /* slate.300 */
+                slider-off-active: #94A3B8 /* slate.400 */
             ),
             background: (
-                status-bar: #CBD5E1, /* blueGray.300 */
+                status-bar: #CBD5E1, /* slate.300 */
                 app-bar: #FFFFFF,
-                background: #F1F5F9, /* blueGray.100 */
-                hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
+                background: #F1F5F9, /* slate.100 */
+                hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
                 card: #FFFFFF,
                 dialog: #FFFFFF,
-                disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
+                disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
                 raised-button: #FFFFFF,
-                focused-button: #64748B, /* blueGray.500 */
-                selected-button: #E2E8F0, /* blueGray.200 */
-                selected-disabled-button: #E2E8F0, /* blueGray.200 */
-                disabled-button-toggle: #CBD5E1, /* blueGray.300 */
-                unselected-chip: #E2E8F0, /* blueGray.200 */
-                disabled-list-option: #CBD5E1, /* blueGray.300 */
-                tooltip: #1E293B /* blueGray.800 */
+                focused-button: #64748B, /* slate.500 */
+                selected-button: #E2E8F0, /* slate.200 */
+                selected-disabled-button: #E2E8F0, /* slate.200 */
+                disabled-button-toggle: #CBD5E1, /* slate.300 */
+                unselected-chip: #E2E8F0, /* slate.200 */
+                disabled-list-option: #CBD5E1, /* slate.300 */
+                tooltip: #1E293B /* slate.800 */
             )
         )
     );
@@ -126,38 +126,38 @@ body .dark {
             is-dark: map.get(map.get($base-dark-theme, color), is-dark),
             foreground: (
                 base: #FFFFFF,
-                divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-                dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-                disabled: #475569, /* blueGray.600 */
-                disabled-button: #1E293B, /* blueGray.800 */
-                disabled-text: #475569, /* blueGray.600 */
+                divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+                dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+                disabled: #475569, /* slate.600 */
+                disabled-button: #1E293B, /* slate.800 */
+                disabled-text: #475569, /* slate.600 */
                 elevation: #000000,
-                hint-text: #64748B, /* blueGray.500 */
-                secondary-text: #94A3B8, /* blueGray.400 */
-                icon: #F1F5F9, /* blueGray.100 */
-                icons: #F1F5F9, /* blueGray.100 */
-                mat-icon: #94A3B8, /* blueGray.400 */
+                hint-text: #64748B, /* slate.500 */
+                secondary-text: #94A3B8, /* slate.400 */
+                icon: #F1F5F9, /* slate.100 */
+                icons: #F1F5F9, /* slate.100 */
+                mat-icon: #94A3B8, /* slate.400 */
                 text: #FFFFFF,
                 slider-min: #FFFFFF,
-                slider-off: #64748B, /* blueGray.500 */
-                slider-off-active: #94A3B8 /* blueGray.400 */
+                slider-off: #64748B, /* slate.500 */
+                slider-off-active: #94A3B8 /* slate.400 */
             ),
             background: (
-                status-bar: #0F172A, /* blueGray.900 */
-                app-bar: #0F172A, /* blueGray.900 */
-                background: #0F172A, /* blueGray.900 */
+                status-bar: #0F172A, /* slate.900 */
+                app-bar: #0F172A, /* slate.900 */
+                background: #0F172A, /* slate.900 */
                 hover: rgba(255, 255, 255, 0.05),
-                card: #1E293B, /* blueGray.800 */
-                dialog: #1E293B, /* blueGray.800 */
-                disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
-                raised-button: #0F172A, /* blueGray.900 */
-                focused-button: #E2E8F0, /* blueGray.200 */
+                card: #1E293B, /* slate.800 */
+                dialog: #1E293B, /* slate.800 */
+                disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
+                raised-button: #0F172A, /* slate.900 */
+                focused-button: #E2E8F0, /* slate.200 */
                 selected-button: rgba(255, 255, 255, 0.05),
-                selected-disabled-button: #1E293B, /* blueGray.800 */
-                disabled-button-toggle: #0F172A, /* blueGray.900 */
-                unselected-chip: #475569, /* blueGray.600 */
-                disabled-list-option: #E2E8F0, /* blueGray.200 */
-                tooltip: #64748B /* blueGray.500 */
+                selected-disabled-button: #1E293B, /* slate.800 */
+                disabled-button-toggle: #0F172A, /* slate.900 */
+                unselected-chip: #475569, /* slate.600 */
+                disabled-list-option: #E2E8F0, /* slate.200 */
+                tooltip: #64748B /* slate.500 */
             )
         )
     );

src/@fuse/tailwind/plugins/extract-config.js

@@ -1,38 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
-
-const extractConfig = plugin(({
-    addVariant,
-    theme
-}) =>
-{
-    addVariant('fuse-tailwind-extracted-config', ({container}) =>
-    {
-        // Prepare the extracted config variable
-        let extractedConfig = '';
-
-        // Breakpoints
-        Object.entries(theme('screens')).forEach(([key, value]) =>
-        {
-            extractedConfig = `${extractedConfig} --breakpoints-${key}:'${buildMediaQuery(value)}';`;
-        });
-
-        // Themes
-        (theme('fuse.themes')).forEach((value) =>
-        {
-            Object.entries(value).forEach(([key, value]) =>
-            {
-                extractedConfig = `${extractedConfig} --themes-${key}:'${JSON.stringify(value)}';`;
-            });
-        });
-
-        // Append the extracted config
-        container.append(`
-            .fuse-tailwind-extracted-config {
-                ${extractedConfig}
-            }
-        `);
-    });
-});
-
-module.exports = extractConfig;

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

@@ -1,17 +1,14 @@
 const plugin = require('tailwindcss/plugin');
 
-const iconSize = plugin(({
-        addUtilities,
-        theme,
-        e,
-        variants
+module.exports = plugin(
+    ({
+        matchUtilities,
+        theme
     }) =>
     {
-        const values = theme('iconSize');
-
-        addUtilities(
-            Object.entries(values).map(([key, value]) => ({
-                [`.${e(`icon-size-${key}`)}`]: {
+        matchUtilities(
+            {
+                'icon-size': (value) => ({
                     width     : value,
                     height    : value,
                     minWidth  : value,
@@ -22,13 +19,14 @@ const iconSize = plugin(({
                         width : value,
                         height: value
                     }
-                }
-            })),
-            variants('iconSize')
-        );
+                })
+            },
+            {
+                values: theme('iconSize')
+            });
     },
     {
-        theme   : {
+        theme: {
             iconSize: {
                 3  : '0.75rem',
                 3.5: '0.875rem',
@@ -47,10 +45,6 @@ const iconSize = plugin(({
                 22 : '5.5rem',
                 24 : '6rem'
             }
-        },
-        variants: {
-            iconSize: ['responsive']
         }
-    });
-
-module.exports = iconSize;
+    }
+);

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

@@ -11,7 +11,9 @@ const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-co
 // -----------------------------------------------------------------------------------------------------
 
 /**
- * Normalize the provided theme
+ * Normalizes the provided theme by omitting empty values and values that
+ * start with "on" from each palette. Also sets the correct DEFAULT value
+ * of each palette.
  *
  * @param theme
  */
@@ -28,67 +30,6 @@ const normalizeTheme = (theme) =>
     ));
 };
 
-/**
- * Generates variable colors for the 'colors'
- * configuration from the provided theme
- *
- * @param theme
- */
-const generateVariableColors = (theme) =>
-{
-    // https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
-    const customPropertiesWithOpacity = (name) => ({
-        opacityVariable,
-        opacityValue
-    }) =>
-    {
-        if ( opacityValue )
-        {
-            return `rgba(var(--fuse-${name}-rgb), ${opacityValue})`;
-        }
-        if ( opacityVariable )
-        {
-            return `rgba(var(--fuse-${name}-rgb), var(${opacityVariable}, 1))`;
-        }
-        return `rgb(var(--fuse-${name}-rgb))`;
-    };
-
-    return _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(theme))), (name) => [
-        [name, customPropertiesWithOpacity(name)],
-        [`on-${name}`, customPropertiesWithOpacity(`on-${name}`)]
-    ])));
-};
-
-/**
- * Generate and return themes object with theme name and colors/
- * This is useful for accessing themes from Angular (Typescript).
- *
- * @param themes
- * @returns {unknown[]}
- */
-function generateThemesObject(themes)
-{
-    const normalizedDefaultTheme = normalizeTheme(themes.default);
-    return _.map(_.cloneDeep(themes), (value, key) =>
-    {
-        const theme = normalizeTheme(value);
-        const primary = (theme && theme.primary && theme.primary.DEFAULT) ? theme.primary.DEFAULT : normalizedDefaultTheme.primary.DEFAULT;
-        const accent = (theme && theme.accent && theme.accent.DEFAULT) ? theme.accent.DEFAULT : normalizedDefaultTheme.accent.DEFAULT;
-        const warn = (theme && theme.warn && theme.warn.DEFAULT) ? theme.warn.DEFAULT : normalizedDefaultTheme.warn.DEFAULT;
-
-        return _.fromPairs([
-            [
-                key,
-                {
-                    primary,
-                    accent,
-                    warn
-                }
-            ]
-        ]);
-    });
-}
-
 // -----------------------------------------------------------------------------------------------------
 // @ FUSE TailwindCSS Main Plugin
 // -----------------------------------------------------------------------------------------------------
@@ -98,25 +39,27 @@ const theming = plugin.withOptions((options) => ({
         theme
     }) =>
     {
-        // -----------------------------------------------------------------------------------------------------
-        // @ Map variable colors
-        // -----------------------------------------------------------------------------------------------------
-        const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-            themeName === 'default' ? 'body' : `body.theme-${e(themeName)}`,
-            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
-                    [
-                        e(paletteName),
-                        palette
-                    ],
-                    [
-                        `on-${e(paletteName)}`,
-                        _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
-                    ]
-                ])
-            ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
-        ]));
-
-        addComponents(mapVariableColors);
+        /**
+         * Iterate through the user's themes and build Tailwind components containing
+         * CSS Custom Properties using the colors from them. This allows switching
+         * themes by simply replacing a class name as well as nesting them.
+         */
+        addComponents(
+            _.fromPairs(_.map(options.themes, (theme, themeName) => [
+                themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
+                _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
+                        [
+                            e(paletteName),
+                            palette
+                        ],
+                        [
+                            `on-${e(paletteName)}`,
+                            _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
+                        ]
+                    ])
+                ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+            ]))
+        );
 
         // -----------------------------------------------------------------------------------------------------
         // @ Generate scheme based css custom properties and utility classes
@@ -141,7 +84,7 @@ const theming = plugin.withOptions((options) => ({
                      * If we set '--is-dark' as "true" on dark themes, the above rule
                      * won't work because of the said "fallback value" logic. Therefore,
                      * we set the '--is-dark' to "false" on light themes and not set it
-                     * all on dark themes so that the fallback value can be used on
+                     * at all on dark themes so that the fallback value can be used on
                      * dark themes.
                      *
                      * On light themes, since '--is-dark' exists, the above rule will be
@@ -175,9 +118,17 @@ const theming = plugin.withOptions((options) => ({
     (options) =>
     {
         return {
-            theme   : {
+            theme: {
                 extend: {
-                    colors: generateVariableColors(options.themes.default)
+                    /**
+                     * Add 'Primary', 'Accent' and 'Warn' palettes as colors so all color utilities
+                     * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
+                     * This will also allow using arbitrary values with them such as opacity and such.
+                     */
+                    colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
+                        [name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
+                        [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
+                    ])))
                 },
                 fuse  : {
                     customProps: {
@@ -185,47 +136,45 @@ const theming = plugin.withOptions((options) => ({
                             light: {
                                 'bg-app-bar'   : '#FFFFFF',
                                 'bg-card'      : '#FFFFFF',
-                                'bg-default'   : colors.blueGray[100],
+                                'bg-default'   : colors.slate[100],
                                 'bg-dialog'    : '#FFFFFF',
-                                'bg-hover'     : chroma(colors.blueGray[400]).alpha(0.12).css(),
-                                'bg-status-bar': colors.blueGray[300]
+                                'bg-hover'     : chroma(colors.slate[400]).alpha(0.12).css(),
+                                'bg-status-bar': colors.slate[300]
                             },
                             dark : {
-                                'bg-app-bar'   : colors.blueGray[900],
-                                'bg-card'      : colors.blueGray[800],
-                                'bg-default'   : colors.blueGray[900],
-                                'bg-dialog'    : colors.blueGray[800],
+                                'bg-app-bar'   : colors.slate[900],
+                                'bg-card'      : colors.slate[800],
+                                'bg-default'   : colors.slate[900],
+                                'bg-dialog'    : colors.slate[800],
                                 'bg-hover'     : 'rgba(255, 255, 255, 0.05)',
-                                'bg-status-bar': colors.blueGray[900]
+                                'bg-status-bar': colors.slate[900]
                             }
                         },
                         foreground: {
                             light: {
-                                'text-default'  : colors.blueGray[800],
-                                'text-secondary': colors.blueGray[500],
-                                'text-hint'     : colors.blueGray[400],
-                                'text-disabled' : colors.blueGray[400],
-                                'border'        : colors.blueGray[200],
-                                'divider'       : colors.blueGray[200],
-                                'icon'          : colors.blueGray[500],
-                                'mat-icon'      : colors.blueGray[500]
+                                'text-default'  : colors.slate[800],
+                                'text-secondary': colors.slate[500],
+                                'text-hint'     : colors.slate[400],
+                                'text-disabled' : colors.slate[400],
+                                'border'        : colors.slate[200],
+                                'divider'       : colors.slate[200],
+                                'icon'          : colors.slate[500],
+                                'mat-icon'      : colors.slate[500]
                             },
                             dark : {
                                 'text-default'  : '#FFFFFF',
-                                'text-secondary': colors.blueGray[400],
-                                'text-hint'     : colors.blueGray[500],
-                                'text-disabled' : colors.blueGray[600],
-                                'border'        : chroma(colors.blueGray[100]).alpha(0.12).css(),
-                                'divider'       : chroma(colors.blueGray[100]).alpha(0.12).css(),
-                                'icon'          : colors.blueGray[400],
-                                'mat-icon'      : colors.blueGray[400]
+                                'text-secondary': colors.slate[400],
+                                'text-hint'     : colors.slate[500],
+                                'text-disabled' : colors.slate[600],
+                                'border'        : chroma(colors.slate[100]).alpha(0.12).css(),
+                                'divider'       : chroma(colors.slate[100]).alpha(0.12).css(),
+                                'icon'          : colors.slate[400],
+                                'mat-icon'      : colors.slate[400]
                             }
                         }
-                    },
-                    themes     : generateThemesObject(options.themes)
+                    }
                 }
-            },
-            variants: {}
+            }
         };
     }
 );

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

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 
-const utilities = plugin(({
+module.exports = plugin(({
     addComponents
 }) =>
 {
@@ -54,9 +54,6 @@ const utilities = plugin(({
                 '--tw-ring-opacity': '1 !important',
                 '--tw-ring-color'  : 'rgba(var(--fuse-bg-card-rgb), var(--tw-ring-opacity)) !important'
             }
-        },
-        {
-            variants: ['dark', 'responsive', 'group-hover', 'hover']
         }
     );
 
@@ -65,11 +62,6 @@ const utilities = plugin(({
             '.bg-hover': {
                 backgroundColor: 'var(--fuse-bg-hover) !important'
             }
-        },
-        {
-            variants: ['dark', 'group-hover', 'hover']
         }
     );
 });
-
-module.exports = utilities;

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

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

src/app/app.component.scss

@@ -3,4 +3,4 @@
     flex: 1 1 auto;
     width: 100%;
     height: 100%;
-}
+}

src/app/app.resolvers.ts

@@ -6,7 +6,6 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
 import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
 import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
-import { UserService } from 'app/core/user/user.service';
 
 @Injectable({
     providedIn: 'root'
@@ -21,8 +20,7 @@ export class InitialDataResolver implements Resolve<any>
         private _navigationService: NavigationService,
         private _notificationsService: NotificationsService,
         private _quickChatService: QuickChatService,
-        private _shortcutsService: ShortcutsService,
-        private _userService: UserService
+        private _shortcutsService: ShortcutsService
     )
     {
     }
@@ -45,8 +43,7 @@ export class InitialDataResolver implements Resolve<any>
             this._messagesService.getAll(),
             this._notificationsService.getAll(),
             this._quickChatService.getChats(),
-            this._shortcutsService.getAll(),
-            this._userService.get()
+            this._shortcutsService.getAll()
         ]);
     }
 }

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/config/app.config.ts

@@ -2,7 +2,9 @@ import { Layout } from 'app/layout/layout.types';
 
 // Types
 export type Scheme = 'auto' | 'dark' | 'light';
-export type Theme = 'default' | string;
+export type Screens = { [key: string]: string };
+export type Theme = 'theme-default' | string;
+export type Themes = { id: string; name: string }[];
 
 /**
  * AppConfig interface. Update this interface to strictly type your config
@@ -12,7 +14,9 @@ export interface AppConfig
 {
     layout: Layout;
     scheme: Scheme;
+    screens: Screens;
     theme: Theme;
+    themes: Themes;
 }
 
 /**
@@ -22,9 +26,46 @@ export interface AppConfig
  * If you need to store global configuration for your app, you can use this
  * object to set the defaults. To access, update and reset the config, use
  * FuseConfigService and its methods.
+ *
+ * "Screens" are carried over to the BreakpointObserver for accessing them within
+ * components, and they are required.
+ *
+ * "Themes" are required for Tailwind to generate themes.
  */
 export const appConfig: AppConfig = {
-    layout: 'classy',
-    scheme: 'light',
-    theme : 'default'
+    layout : 'classy',
+    scheme : 'light',
+    screens: {
+        sm: '600px',
+        md: '960px',
+        lg: '1280px',
+        xl: '1440px'
+    },
+    theme  : 'theme-default',
+    themes : [
+        {
+            id  : 'theme-default',
+            name: 'Default'
+        },
+        {
+            id  : 'theme-brand',
+            name: 'Brand'
+        },
+        {
+            id  : 'theme-teal',
+            name: 'Teal'
+        },
+        {
+            id  : 'theme-rose',
+            name: 'Rose'
+        },
+        {
+            id  : 'theme-purple',
+            name: 'Purple'
+        },
+        {
+            id  : 'theme-amber',
+            name: 'Amber'
+        }
+    ]
 };

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/messages/messages.component.html

@@ -5,7 +5,7 @@
     #messagesOrigin>
     <ng-container *ngIf="unreadCount > 0">
         <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
-            <span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
+            <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
                 {{unreadCount}}
             </span>
         </span>
@@ -19,7 +19,7 @@
     <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
 
         <!-- Header -->
-        <div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
+        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
             <div class="sm:hidden -ml-1 mr-3">
                 <button
                     mat-icon-button
@@ -108,7 +108,7 @@
                 <ng-template #messageContent>
                     <!-- Icon -->
                     <ng-container *ngIf="message.icon && !message.image">
-                        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
+                        <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
                             <mat-icon
                                 class="icon-size-5"
                                 [svgIcon]="message.icon">
@@ -118,7 +118,7 @@
                     <!-- Image -->
                     <ng-container *ngIf="message.image">
                         <img
-                            class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
+                            class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
                             [src]="message.image"
                             [alt]="'Message image'">
                     </ng-container>
@@ -144,9 +144,9 @@
             <!-- No messages -->
             <ng-container *ngIf="!messages || !messages.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:inbox'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No messages</div>

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

@@ -5,7 +5,7 @@
     #notificationsOrigin>
     <ng-container *ngIf="unreadCount > 0">
         <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
-            <span class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
+            <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
                 {{unreadCount}}
             </span>
         </span>
@@ -19,7 +19,7 @@
     <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
 
         <!-- Header -->
-        <div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
+        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
             <div class="sm:hidden -ml-1 mr-3">
                 <button
                     mat-icon-button
@@ -109,7 +109,7 @@
                 <ng-template #notificationContent>
                     <!-- Icon -->
                     <ng-container *ngIf="notification.icon && !notification.image">
-                        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
+                        <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
                             <mat-icon
                                 class="icon-size-5"
                                 [svgIcon]="notification.icon">
@@ -119,7 +119,7 @@
                     <!-- Image -->
                     <ng-container *ngIf="notification.image">
                         <img
-                            class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
+                            class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
                             [src]="notification.image"
                             [alt]="'Notification image'">
                     </ng-container>
@@ -145,9 +145,9 @@
             <!-- No notifications -->
             <ng-container *ngIf="!notifications || !notifications.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:bell'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>

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

@@ -1,6 +1,6 @@
 <div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
     <div
-        class="flex flex-col w-full sm:w-96 h-full transform transition-transform duration-400 ease-drawer bg-card"
+        class="flex flex-col w-full sm:w-96 h-full transition-transform duration-400 ease-drawer bg-card"
         [ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
 
         <!-- Header -->
@@ -93,7 +93,7 @@
             <div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
                 <ng-container *ngIf="chat; else selectChatOrStartNew">
                     <div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
-                        <div class="flex flex-col flex-auto flex-shrink p-6">
+                        <div class="flex flex-col flex-auto shrink p-6">
                             <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                 <!-- Start of the day -->
                                 <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
@@ -108,20 +108,20 @@
                                 <div
                                     class="flex flex-col"
                                     [ngClass]="{'items-end': message.isMine,
-                                        'items-start': !message.isMine,
-                                        'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
-                                        'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
+                                                'items-start': !message.isMine,
+                                                'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
+                                                'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
                                     <!-- Bubble -->
                                     <div
                                         class="relative max-w-3/4 px-3 py-2 rounded-lg"
                                         [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
-                                            'bg-gray-500 text-gray-50': !message.isMine}">
+                                                    'bg-gray-500 text-gray-50': !message.isMine}">
                                         <!-- Speech bubble tail -->
                                         <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
                                             <div
-                                                class="absolute bottom-0 w-3 transform"
+                                                class="absolute bottom-0 w-3"
                                                 [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
-                                                    'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
+                                                            'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
                                                 <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
                                             </div>
                                         </ng-container>
@@ -140,7 +140,7 @@
                                         <div
                                             class="my-0.5 text-sm font-medium text-secondary"
                                             [ngClass]="{'mr-3': message.isMine,
-                                                'ml-3': !message.isMine}">
+                                                        'ml-3': !message.isMine}">
                                             {{message.createdAt | date:'HH:mm'}}
                                         </div>
                                     </ng-container>
@@ -163,7 +163,7 @@
                             <button
                                 mat-icon-button>
                                 <mat-icon
-                                    class="transform rotate-90"
+                                    class="rotate-90"
                                     [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
                             </button>
                         </div>
@@ -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/quick-chat/quick-chat.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, Inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { Subject, takeUntil } from 'rxjs';
 import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
@@ -11,13 +12,14 @@ import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
     encapsulation: ViewEncapsulation.None,
     exportAs     : 'quickChat'
 })
-export class QuickChatComponent implements OnInit, OnDestroy
+export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
 {
     @ViewChild('messageInput') messageInput: ElementRef;
     chat: Chat;
     chats: Chat[];
     opened: boolean = false;
     selectedChat: Chat;
+    private _mutationObserver: MutationObserver;
     private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
     private _overlay: HTMLElement;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -26,6 +28,7 @@ export class QuickChatComponent implements OnInit, OnDestroy
      * Constructor
      */
     constructor(
+        @Inject(DOCUMENT) private _document: Document,
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _ngZone: NgZone,
@@ -103,11 +106,48 @@ export class QuickChatComponent implements OnInit, OnDestroy
             });
     }
 
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Fix for Firefox.
+        //
+        // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
+        // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
+        // This fixes the problem by reading the 'top' value from the html element and adding it as a
+        // 'marginTop' to the navigation itself.
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                const mutationTarget = mutation.target as HTMLElement;
+                if ( mutation.attributeName === 'class' )
+                {
+                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
+                    {
+                        const top = parseInt(mutationTarget.style.top, 10);
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
+                    }
+                    else
+                    {
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                    }
+                }
+            });
+        });
+        this._mutationObserver.observe(this._document.documentElement, {
+            attributes     : true,
+            attributeFilter: ['class']
+        });
+    }
+
     /**
      * On destroy
      */
     ngOnDestroy(): void
     {
+        // Disconnect the mutation observer
+        this._mutationObserver.disconnect();
+
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();

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

@@ -7,7 +7,7 @@
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
     </button>
     <div
-        class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
+        class="absolute inset-0 flex items-center shrink-0 z-99 bg-card"
         *ngIf="opened"
         @slideInTop
         @slideOutTop>
@@ -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>
@@ -55,7 +57,7 @@
             </ng-container>
         </mat-autocomplete>
         <button
-            class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
+            class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5"
             mat-icon-button
             (click)="close()">
             <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
@@ -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>
@@ -118,7 +122,7 @@
     #contactResult
     let-result>
     <div class="flex items-center">
-        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
+        <div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
             <img
                 *ngIf="result.avatar"
                 [src]="result.avatar">

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"
@@ -38,18 +38,19 @@
             <!-- Theme -->
             <div class="text-md font-semibold text-secondary">THEME</div>
             <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
-                <ng-container *ngFor="let theme of themes">
+                <ng-container *ngFor="let theme of config.themes">
                     <div
                         class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
-                        [class.ring-2]="config.theme === theme[0]"
-                        (click)="setTheme(theme[0])">
+                        [class.ring-2]="config.theme === theme.id"
+                        [ngClass]="theme.id"
+                        (click)="setTheme(theme.id)">
                         <div
-                            class="flex-0 w-3 h-3 rounded-full"
-                            [style.background-color]="theme[1].primary"></div>
+                            class="flex-0 w-3 h-3 rounded-full bg-primary"
+                        ></div>
                         <div
                             class="ml-2.5 font-medium leading-5 truncate"
-                            [class.text-secondary]="config.theme !== theme[0]">
-                            {{theme[0] | titlecase}}
+                            [class.text-secondary]="config.theme !== theme.id">
+                            {{theme.name}}
                         </div>
                     </div>
                 </ng-container>

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

@@ -2,8 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subject, takeUntil } from 'rxjs';
 import { FuseConfigService } from '@fuse/services/config';
-import { FuseTailwindService } from '@fuse/services/tailwind';
-import { AppConfig, Scheme, Theme } from 'app/core/config/app.config';
+import { AppConfig, Scheme, Theme, Themes } from 'app/core/config/app.config';
 import { Layout } from 'app/layout/layout.types';
 
 @Component({
@@ -17,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
@@ -27,7 +33,7 @@ export class SettingsComponent implements OnInit, OnDestroy
     layout: Layout;
     scheme: 'dark' | 'light';
     theme: string;
-    themes: [string, any][] = [];
+    themes: Themes;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -35,8 +41,7 @@ export class SettingsComponent implements OnInit, OnDestroy
      */
     constructor(
         private _router: Router,
-        private _fuseConfigService: FuseConfigService,
-        private _fuseTailwindService: FuseTailwindService
+        private _fuseConfigService: FuseConfigService
     )
     {
     }
@@ -50,13 +55,6 @@ export class SettingsComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Get the themes
-        this._fuseTailwindService.tailwindConfig$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((config) => {
-                this.themes = Object.entries(config.themes);
-            });
-
         // Subscribe to config changes
         this._fuseConfigService.config$
             .pipe(takeUntil(this._unsubscribeAll))

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

@@ -11,7 +11,7 @@
     <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
 
         <!-- Header -->
-        <div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
+        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
             <div class="sm:hidden -ml-1 mr-3">
                 <button
                     mat-icon-button
@@ -128,7 +128,7 @@
                             </a>
                             <!-- Link content template -->
                             <ng-template #linkContent>
-                                <div class="relative flex flex-shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
+                                <div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
                                     <mat-icon
                                         class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5"
                                         *ngIf="mode === 'modify'"
@@ -148,9 +148,9 @@
                 <!-- No shortcuts -->
                 <ng-container *ngIf="!shortcuts || !shortcuts.length">
                     <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                             <mat-icon
-                                class="text-primary-500-700"
+                                class="text-primary-700 dark:text-primary-50"
                                 [svgIcon]="'heroicons_outline:bookmark'"></mat-icon>
                         </div>
                         <div class="mt-5 text-2xl font-semibold tracking-tight">No shortcuts</div>

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);
     }
 
     /**
@@ -203,6 +208,6 @@ export class LayoutComponent implements OnInit, OnDestroy
         });
 
         // Add class name for the currently selected theme
-        this._document.body.classList.add(`theme-${this.theme}`);
+        this._document.body.classList.add(this.theme);
     }
 }

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

@@ -37,10 +37,10 @@
                     [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
             </div>
             <div class="flex flex-col items-center justify-center w-full mt-6">
-                <div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
+                <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden text-center leading-normal font-medium">
                     {{user.name}}
                 </div>
-                <div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
+                <div class="w-full mt-0.5 whitespace-nowrap text-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
                     {{user.email}}
                 </div>
             </div>

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/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -23,10 +23,10 @@
         <div class="flex items-center w-full px-6 py-8 border-t">
             <user></user>
             <div class="flex flex-col w-full ml-4 overflow-hidden">
-                <div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
+                <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden leading-normal text-current opacity-80">
                     {{user.name}}
                 </div>
-                <div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
+                <div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50">
                     brian.hughes@company.com
                 </div>
             </div>

src/app/mock-api/apps/chat/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 /**
  * Attachments are common and will be filled from here
@@ -32,175 +35,175 @@ export const messages = [
         chatId   : '',
         contactId: 'me',
         value    : 'Hi!',
-        createdAt: moment().subtract(1, 'week').hour(18).minute(56).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 18, minute: 56}).toISO()
     },
     {
         id       : 'eb82cf4b-fa93-4bf4-a88a-99e987ddb7ea',
         chatId   : '',
         contactId: '',
         value    : 'Hey, dude!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(4).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 4}).toISO()
     },
     {
         id       : '3cf9b2a6-ae54-47db-97b2-ee139a8f84e5',
         chatId   : '',
         contactId: '',
         value    : 'Long time no see.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(4).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 4}).toISO()
     },
     {
         id       : '2ab91b0f-fafb-45f3-88df-7efaff29134b',
         chatId   : '',
         contactId: 'me',
         value    : 'Yeah, man... Things were quite busy for me and my family.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(6).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 6}).toISO()
     },
     {
         id       : '10e81481-378f-49ac-b06b-7c59dcc639ae',
         chatId   : '',
         contactId: '',
         value    : 'What\'s up? Anything I can help with?',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(6).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 6}).toISO()
     },
     {
         id       : '3b334e72-6605-4ebd-a4f6-3850067048de',
         chatId   : '',
         contactId: 'me',
         value    : 'We\'ve been on the move, changed 3 places over 4 months',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(7).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 7}).toISO()
     },
     {
         id       : '25998113-3a96-4dd0-a7b9-4d2bb58db3f3',
         chatId   : '',
         contactId: '',
         value    : 'Wow! That\'s crazy! 🤯 What happened?',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(7).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 7}).toISO()
     },
     {
         id       : '30adb3da-0e4f-487e-aec2-6d9f31e097f6',
         chatId   : '',
         contactId: 'me',
         value    : 'You know I got a job in that big software company. First move was because of that.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 8}).toISO()
     },
     {
         id       : 'c0d6fd6e-d294-4845-8751-e84b8f2c4d3b',
         chatId   : '',
         contactId: 'me',
         value    : 'Then they decided to re-locate me after a month',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 8}).toISO()
     },
     {
         id       : '8d3c442b-62fa-496f-bffa-210ff5c1866b',
         chatId   : '',
         contactId: 'me',
         value    : 'Which was an absolute pain because we just set up everything, house, kids school and all that.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 8}).toISO()
     },
     {
         id       : '3cf26ef0-e81f-4698-ac39-487454413332',
         chatId   : '',
         contactId: 'me',
         value    : 'So we moved the second time.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(9).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 9}).toISO()
     },
     {
         id       : '415151b9-9ee9-40a4-a4ad-2d88146bc71b',
         chatId   : '',
         contactId: '',
         value    : 'It\'s crazy!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(9).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 9}).toISO()
     },
     {
         id       : '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c',
         chatId   : '',
         contactId: 'me',
         value    : 'Then this virus thing happened and just after a week we moved in, they decided the whole department will be working remotely.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(10).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 10}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: 'me',
         value    : 'And then we decided to move back our first location because, you know, everything was already setup so that\'s the third time.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(10).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 10}).toISO()
     },
     {
         id       : '415151b9-9ee9-40a4-a4ad-2d88146bc71b',
         chatId   : '',
         contactId: '',
         value    : 'Ohh dude, I\'m really sorry you had to go through all that in such a short period of time',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 11}).toISO()
     },
     {
         id       : 'ea7662d5-7b72-4c19-ad6c-f80320541001',
         chatId   : '',
         contactId: '',
         value    : '😕',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 11}).toISO()
     },
     {
         id       : '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c',
         chatId   : '',
         contactId: 'me',
         value    : 'Thanks, man! It was good catching up with you.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 11}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: '',
         value    : 'Yeah dude. Hit me again next week so we can grab a coffee, remotely!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 12}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: 'me',
         value    : ':) Sure, man! See you next week!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 12}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: '',
         value    : 'See you later!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 12}).toISO()
     },
     {
         id       : 'bab8ca0e-b8e5-4375-807b-1c91fca25a5d',
         chatId   : '',
         contactId: 'me',
         value    : 'Hey! Are you available right now? How about if we grab that coffee today? Remotely, of course :)',
-        createdAt: moment().hour(12).minute(45).toISOString()
+        createdAt: now.set({hour: 12, minute: 45}).toISO()
     },
     {
         id       : '8445a84d-599d-4e2d-a31c-5f4f29ad2b4c',
         chatId   : '',
         contactId: '',
         value    : 'Hi!',
-        createdAt: moment().hour(12).minute(56).toISOString()
+        createdAt: now.set({hour: 12, minute: 56}).toISO()
     },
     {
         id       : '9f506742-50da-4350-af9d-61e53392fa08',
         chatId   : '',
         contactId: '',
         value    : 'Sure thing! I\'m gonna call you in 5, is it okay?',
-        createdAt: moment().hour(12).minute(56).toISOString()
+        createdAt: now.set({hour: 12, minute: 56}).toISO()
     },
     {
         id       : 'ca8523d8-faed-45f7-af09-f6bd5c3f3875',
         chatId   : '',
         contactId: 'me',
         value    : 'Awesome! Call me in 5 minutes..',
-        createdAt: moment().hour(12).minute(58).toISOString()
+        createdAt: now.set({hour: 12, minute: 58}).toISO()
     },
     {
         id       : '39944b00-1ffe-4ffb-8ca6-13c292812e06',
         chatId   : '',
         contactId: '',
         value    : '👍🏻',
-        createdAt: moment().hour(13).minute(0).toISOString()
+        createdAt: now.set({hour: 13, minute: 0}).toISO()
     }
 ];
 export const chats = [

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/apps/mailbox/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const folders = [
     {
@@ -103,7 +106,7 @@ export const mails = [
         bcc        : [
             'Julie T. <julie.t@company.com>'
         ],
-        date       : moment().hour(20).minute(13).toISOString(), // Today - 20:13
+        date       : now.set({hour: 20, minute: 13}).toISO(), // Today - 20:13
         subject    : 'Please review and sign the attached agreement',
         content    : 'Hi Brian,\n\nUllamco deserunt commodo esse deserunt deserunt quis eiusmod. Laborum sint excepteur non sit eiusmod sunt voluptate ipsum nisi ullamco magna. Lorem consectetur est dolor minim exercitation deserunt quis duis fugiat ipsum incididunt non. Anim aute ipsum cupidatat nisi occaecat quis sit nisi labore labore dolore do. Pariatur veniam culpa quis veniam nisi exercitation veniam ut. Quis do sint proident fugiat ad.\n\nNon id nisi commodo veniam. Veniam veniam minim ea laborum voluptate id duis deserunt. Anim ut ut amet et ullamco nulla fugiat id incididunt adipisicing excepteur amet. Ex amet eu cillum non fugiat velit dolore. Incididunt duis est eu et ex sunt consectetur cillum nisi aute proident.\n\nIncididunt excepteur laborum quis sit. Ex quis officia incididunt proident aliqua adipisicing. Irure ad in Lorem laborum deserunt nulla consequat. Pariatur excepteur exercitation cupidatat aute.\n\nCheers!\nMyra Dudley',
         attachments: [
@@ -147,7 +150,7 @@ export const mails = [
             contact: 'Shaw Murray <shaw.murray@company.com>'
         },
         to         : 'me <hughes.brian@company.com>',
-        date       : moment().hour(18).minute(56).toISOString(), // Today - 18:56
+        date       : now.set({hour: 18, minute: 56}).toISO(), // Today - 18:56
         subject    : 'Delivery address confirmation',
         content    : 'Dear Brian,\n\nDolore consectetur est cupidatat ipsum reprehenderit anim quis veniam anim ipsum incididunt exercitation. Velit exercitation culpa eiusmod dolore labore irure. Duis esse quis elit pariatur labore occaecat esse voluptate dolore deserunt cillum irure. Aute qui nulla est exercitation qui sunt anim aliquip. Ex ad est velit laboris exercitation ea ut pariatur. Amet reprehenderit ut est id sunt commodo anim et est voluptate et.\n\nMagna aliqua incididunt non ut voluptate nulla aliqua exercitation elit consectetur cupidatat. Proident in reprehenderit occaecat laborum non eu amet id aliqua nulla dolore. Eiusmod quis adipisicing quis cupidatat labore.\n\nReprehenderit nulla ullamco est dolore ex irure sunt nostrud reprehenderit quis dolor. Tempor nostrud elit elit aute ut ut eiusmod laboris excepteur consequat ex. Velit id ex ullamco in. Ea elit Lorem Lorem aliquip amet consequat irure nisi qui cillum incididunt. Commodo aute Lorem eiusmod veniam consectetur aute eu dolore. Ea magna incididunt laboris quis quis et tempor dolore dolore ut nisi.\n\nBest Regards,\nShaw Murray',
         attachments: [],
@@ -170,7 +173,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(14).minute(35).toISOString(), // Today - 14:35
+        date       : now.set({hour: 14, minute: 35}).toISO(), // Today - 14:35
         subject    : 'Insurance documents',
         content    : 'Hi Brian,\n\nAliquip ipsum sunt sit sunt velit velit pariatur. Nisi incididunt eiusmod consequat ut cillum eu exercitation. Enim proident nostrud aute in. Non irure nisi duis aliquip commodo proident veniam adipisicing id velit. Enim magna Lorem fugiat tempor.\n\nCommodo non nulla incididunt irure voluptate. Fugiat culpa cillum aute quis. Voluptate veniam adipisicing dolor sint. Proident eiusmod quis duis ipsum sit eu.\n\nDeserunt reprehenderit adipisicing reprehenderit ipsum. Laborum in veniam amet occaecat tempor esse enim dolore elit sit quis adipisicing. Aute occaecat eiusmod enim cupidatat sunt.\n\nBest Regards,\nSanders Beck',
         attachments: [],
@@ -188,7 +191,7 @@ export const mails = [
             contact: 'Zimmerman Gould <zimmerman.gould@company.com>'
         },
         to         : 'me <hughes.brian@company.com>',
-        date       : moment().hour(22).minute(26).subtract(1, 'day').toISOString(), // Yesterday - 08:22
+        date       : now.minus({day: 1}).set({hour: 22, minute: 26}).toISO(), // Yesterday - 22:26
         subject    : 'Previous clients and their invoices',
         content    : 'Dear Brian,\n\nDo aute eu dolore officia laborum id anim fugiat incididunt nulla esse proident. Veniam veniam nostrud ut nisi magna ipsum ea eiusmod esse velit id aliqua nisi irure. Amet laborum fugiat deserunt est. Quis amet veniam anim nostrud irure cillum voluptate consequat qui cupidatat minim occaecat elit enim. Ut ut incididunt cillum sit sit irure culpa. Culpa exercitation minim velit eu. Ipsum exercitation excepteur et ad do sit.\n\nVeniam cupidatat officia aliqua ad excepteur cillum laboris deserunt esse laboris adipisicing reprehenderit. Reprehenderit anim consectetur pariatur labore do in irure. Ad consequat commodo non pariatur occaecat. Eiusmod cillum non anim consequat culpa nisi. Est nulla ut sint qui deserunt anim. Excepteur qui occaecat dolore nulla occaecat cupidatat aute sit laborum magna.\n\nConsequat aliqua commodo officia excepteur. Ex consectetur elit dolor exercitation ullamco amet laboris. Deserunt nulla non proident est pariatur reprehenderit reprehenderit. Ea nisi id aliqua cillum velit tempor ipsum dolor proident cillum eiusmod et ipsum anim. Elit non quis mollit enim Lorem cupidatat et labore. Laboris cillum reprehenderit aute veniam aliqua esse officia proident deserunt. Eiusmod laboris ullamco amet consectetur amet.\n\nKind Regards,\nZimmerman Gould',
         attachments: [],
@@ -209,7 +212,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(20).minute(5).subtract(1, 'day').toISOString(), // Yesterday - 22:05
+        date       : now.minus({day: 1}).set({hour: 20, minute: 5}).toISO(), // Yesterday - 20:05
         subject    : 'Quote for a new web design project',
         content    : 'Hey Brian,\n\nNisi officia aliqua ex non cupidatat sint ullamco. Irure pariatur ullamco consequat ut eu anim. Ut ad elit pariatur est non sunt. Tempor dolore quis commodo dolore duis officia laboris nostrud sint. Exercitation ullamco laboris eiusmod culpa ut.\n\nAute Lorem aute occaecat dolore tempor ipsum proident fugiat deserunt non incididunt velit nulla. Dolor pariatur tempor amet qui eu exercitation. Tempor minim culpa proident nisi esse ea. Enim est fugiat aliqua aliqua aute velit laborum cupidatat irure nisi dolor deserunt aliqua.\n\nFugiat ut dolor tempor sunt aliquip dolor nostrud. Consequat incididunt ullamco cillum dolore excepteur deserunt est dolor aliquip irure do mollit officia. Consectetur cillum et non minim nisi. Esse quis sunt deserunt elit sint velit tempor et ullamco laboris officia excepteur. Veniam ad ut aliqua sunt consequat reprehenderit nostrud non in duis aute quis pariatur. Occaecat mollit anim non pariatur. Ad do ad id fugiat et culpa laborum esse cupidatat voluptate elit ut magna voluptate.\n\nBest Regards,\nKarina Alford',
         attachments: [],
@@ -230,7 +233,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(16).minute(43).subtract(1, 'day').toISOString(), // Yesterday - 16:43
+        date       : now.minus({day: 1}).set({hour: 16, minute: 43}).toISO(), // Yesterday - 16:43
         subject    : 'Nulla culpa consectetur aute ex eu irure incididunt aliqua cupidatat sit cillum fugiat anim ea',
         content    : 'Hey Brian,\n\nDo pariatur occaecat tempor duis. Aute occaecat non consequat ut occaecat sint. Cillum reprehenderit elit nisi incididunt in labore pariatur. Labore mollit pariatur nulla officia esse anim exercitation nisi commodo culpa laborum amet nisi.\n\nSunt culpa mollit nostrud excepteur adipisicing sit do. Cillum voluptate amet do sit quis aliquip ea est qui elit. Veniam exercitation sit reprehenderit labore officia in labore excepteur eiusmod exercitation.\n\nEnim nostrud est non esse reprehenderit in ea eiusmod. Duis incididunt amet aliquip dolor esse. Nostrud qui commodo in non nostrud proident enim cupidatat. Aute sunt aliqua excepteur qui occaecat nulla incididunt commodo adipisicing ipsum.\n\nKind Regards,\nCarla Gray',
         attachments: [],
@@ -252,7 +255,7 @@ export const mails = [
             'Graham Belltower <graham.belltower@company.com>',
             'Julie T. <julie.t@company.com>'
         ],
-        date       : moment().hour(11).minute(28).subtract(2, 'day').toISOString(), // 2 days ago - 11:28
+        date       : now.minus({day: 2}).set({hour: 11, minute: 28}).toISO(), // 2 days ago - 11:28
         subject    : 'Ipsum laborum minim aute labore in',
         content    : 'Dear Brian,\n\nLaboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex. Voluptate amet aute deserunt tempor non laboris cillum. Voluptate veniam magna sint magna proident exercitation adipisicing aute id ad tempor reprehenderit magna ullamco. Laborum Lorem anim elit aliquip ut aute minim fugiat aliquip. Eiusmod est et occaecat dolore anim laborum ullamco ipsum commodo.\n\nCommodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure enim tempor in. Mollit ipsum laboris et velit ex excepteur pariatur. Cillum veniam id ipsum magna. Laborum duis aliquip ut ipsum ad aliqua id sit pariatur consequat sit. Sit nulla nulla ullamco nulla eiusmod et in dolore sint reprehenderit cupidatat.\n\nIpsum mollit cupidatat magna occaecat labore est fugiat est fugiat fugiat nulla labore laboris. Eiusmod aute adipisicing pariatur aliquip sint enim anim in dolore enim aute culpa nulla. Minim magna enim officia ipsum elit quis do velit deserunt Lorem veniam excepteur.\n\nKind Regards,\nRice Cash',
         attachments: [
@@ -295,7 +298,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(7).minute(12).subtract(2, 'day').toISOString(), // 2 days ago - 07:12
+        date       : now.minus({day: 2}).set({hour: 7, minute: 12}).toISO(), // 2 days ago - 07:12
         subject    : 'Ipsum fugiat ad deserunt cillum sunt fugiat',
         content    : 'Hello Brian,\n\nId Lorem laborum eiusmod eiusmod mollit magna dolore. Et commodo officia fugiat dolor aliqua proident mollit ut commodo ullamco. Sunt nulla eu dolor velit velit reprehenderit. Culpa esse veniam fugiat eiusmod id veniam sunt reprehenderit minim mollit. Esse qui ea irure pariatur eu ullamco pariatur ipsum reprehenderit proident mollit proident. Nisi fugiat ut est aliquip nulla in non dolore.\n\nCulpa irure cillum ex fugiat cupidatat eiusmod non. Qui irure velit consectetur minim eu excepteur eiusmod veniam irure ad culpa nisi. Nisi sit nostrud quis ullamco aliquip non consequat sunt reprehenderit velit dolor dolor laboris. Dolore in Lorem consectetur nostrud. Laborum cupidatat exercitation voluptate duis amet. Sunt sint minim do in commodo ipsum commodo ea qui velit deserunt qui anim fugiat.\n\nExercitation et qui consequat incididunt nisi incididunt cupidatat officia in. Sit eiusmod anim aliqua elit. Nisi mollit ut non pariatur enim fugiat sint labore velit nostrud eu. Eiusmod id laboris laboris duis enim aute ipsum in magna. Sit eiusmod amet duis commodo sint et anim ex sunt deserunt dolor incididunt. Eiusmod duis dolore dolor elit occaecat do adipisicing ullamco ex laboris aliqua adipisicing. Labore pariatur aute proident mollit elit commodo labore minim dolore non in cillum.\n\nCheers!\nElaine Ortiz',
         attachments: [],
@@ -321,7 +324,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(6).minute(1).subtract(2, 'day').toISOString(), // 2 days ago - 06:01
+        date       : now.minus({day: 2}).set({hour: 6, minute: 1}).toISO(), // 2 days ago - 06:01
         subject    : 'Deserunt exercitation ut nulla elit Lorem',
         content    : 'Hi Brian,\n\nEst labore sunt sunt Lorem dolore. In excepteur esse proident ut consectetur dolor voluptate laborum veniam pariatur. Excepteur ut veniam sit culpa exercitation qui nulla nulla magna ea in dolore et consequat. Irure minim ad cupidatat amet reprehenderit excepteur incididunt nulla eu et excepteur anim et aliqua.\n\nSint sint Lorem magna est irure sint ea cupidatat fugiat. Occaecat non adipisicing magna magna culpa sit commodo aute ex consequat amet minim esse ut. In nulla eiusmod veniam deserunt in.\n\nIn aute excepteur qui pariatur fugiat. Occaecat velit voluptate proident occaecat ut laboris occaecat pariatur aute dolore do. Ut commodo ipsum est non commodo ut ea qui labore veniam. Occaecat nostrud eu dolor tempor velit excepteur sint occaecat excepteur aliqua aliquip. Magna mollit ea aliquip exercitation do elit ex reprehenderit esse aliqua elit.\n\nKind Regards,\nFleming Stone',
         attachments: [],
@@ -343,7 +346,7 @@ export const mails = [
             contact: 'England Wiley <england.wiley@company.com>'
         },
         to         : 'me <hughes.brian@company.com>',
-        date       : moment().hour(15).minute(36).subtract(5, 'day').toISOString(), // 2 days ago - 15:36
+        date       : now.minus({day: 5}).set({hour: 15, minute: 36}).toISO(), // 5 days ago - 15:36
         subject    : 'Minim do reprehenderit dolor ipsum officia magna laborum est anim in fugiat',
         content    : 'Dear Brian,\n\nAd do minim id ad ex sit reprehenderit labore do occaecat fugiat ut enim. Et sunt dolore sint non consequat ut. Esse deserunt nostrud pariatur nulla ullamco nulla sit aliquip culpa sunt ipsum. Ut ad minim qui anim amet aute cupidatat. Est ullamco duis laboris nulla labore incididunt consectetur. Cillum sunt mollit nulla laborum non tempor veniam consequat.\n\nAmet fugiat velit id deserunt pariatur velit laboris consectetur quis officia. Culpa nostrud deserunt nostrud esse labore esse consequat labore fugiat. Nostrud duis ex nulla et do.\n\nPariatur mollit ex adipisicing nostrud nostrud occaecat. Id tempor irure cupidatat duis cillum cupidatat nostrud enim anim. Esse nisi pariatur nisi elit elit sit quis ullamco dolor dolore pariatur est sint. Sint ex aliqua id sunt sunt magna amet ex sit anim. Irure aliquip fugiat ipsum tempor irure nisi Lorem anim sit ullamco. Exercitation nostrud mollit est non enim.\n\nBest Regards,\nEngland Wiley',
         attachments: [],

src/app/mock-api/apps/notes/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const labels = [
     {
@@ -38,7 +41,7 @@ export const notes = [
         reminder : null,
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : false,
-        createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(),
+        createdAt: now.set({hour: 10, minute: 19}).minus({day: 98}).toISO(),
         updatedAt: null
     },
     {
@@ -53,7 +56,7 @@ export const notes = [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
         ],
         archived : false,
-        createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(),
+        createdAt: now.set({hour: 15, minute: 37}).minus({day: 80}).toISO(),
         updatedAt: null
     },
     {
@@ -65,8 +68,8 @@ export const notes = [
         reminder : null,
         labels   : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
         archived : false,
-        createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(),
-        updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString()
+        createdAt: now.set({hour: 19, minute: 27}).minus({day: 74}).toISO(),
+        updatedAt: now.set({hour: 15, minute: 36}).minus({day: 50}).toISO(),
     },
     {
         id       : '89861bd4-0144-4bb4-8b39-332ca10371d5',
@@ -74,10 +77,10 @@ export const notes = [
         content  : 'Theming support for all apps',
         tasks    : null,
         image    : null,
-        reminder : moment().hour(12).minute(34).add(50, 'day').toISOString(),
+        reminder: now.set({hour: 12, minute: 34}).plus({day: 50}).toISO(),
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : false,
-        createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(),
+        createdAt: now.set({hour: 12, minute: 34}).minus({day: 59}).toISO(),
         updatedAt: null
     },
     {
@@ -110,7 +113,7 @@ export const notes = [
         reminder : null,
         labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
         archived : false,
-        createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(),
+        createdAt: now.set({hour: 16, minute: 4}).minus({day: 47}).toISO(),
         updatedAt: null
     },
     {
@@ -145,10 +148,10 @@ export const notes = [
             }
         ],
         image    : null,
-        reminder : moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        reminder : now.set({hour: 10, minute: 44}).minus({day: 35}).toISO(),
         labels   : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
         archived : false,
-        createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        createdAt: now.set({hour: 10, minute: 44}).minus({day: 35}).toISO(),
         updatedAt: null
     },
     {
@@ -183,13 +186,13 @@ export const notes = [
             }
         ],
         image    : null,
-        reminder : moment().hour(11).minute(27).subtract(14, 'day').toISOString(),
+        reminder : now.set({hour: 11, minute: 27}).minus({day: 14}).toISO(),
         labels   : [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
             'e2f749f5-41ed-49d0-a92a-1c83d879e371'
         ],
         archived : false,
-        createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(),
+        createdAt: now.set({hour: 11, minute: 27}).minus({day: 24}).toISO(),
         updatedAt: null
     },
     {
@@ -198,10 +201,10 @@ export const notes = [
         content  : 'Organize the dad\'s surprise retirement party',
         tasks    : null,
         image    : null,
-        reminder : moment().hour(14).minute(56).subtract(25, 'day').toISOString(),
+        reminder : now.set({hour: 14, minute: 56}).minus({day: 25}).toISO(),
         labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
         archived : false,
-        createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(),
+        createdAt: now.set({hour: 14, minute: 56}).minus({day: 20}).toISO(),
         updatedAt: null
     },
     {
@@ -216,8 +219,8 @@ export const notes = [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
         ],
         archived : false,
-        createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(),
-        updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString()
+        createdAt: now.set({hour: 9, minute: 32}).minus({day: 15}).toISO(),
+        updatedAt: now.set({hour: 17, minute: 6}).minus({day: 12}).toISO(),
     },
     {
         id       : '15188348-78aa-4ed6-b5c2-028a214ba987',
@@ -228,7 +231,7 @@ export const notes = [
         reminder : null,
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : false,
-        createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(),
+        createdAt: now.set({hour: 20, minute: 5}).minus({day: 12}).toISO(),
         updatedAt: null
     },
     {
@@ -248,10 +251,10 @@ export const notes = [
             }
         ],
         image    : null,
-        reminder : moment().hour(13).minute(43).subtract(2, 'day').toISOString(),
+        reminder : now.set({hour: 13, minute: 43}).minus({day: 2}).toISO(),
         labels   : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
         archived : false,
-        createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(),
+        createdAt: now.set({hour: 13, minute: 43}).minus({day: 7}).toISO(),
         updatedAt: null
     },
     {
@@ -266,7 +269,7 @@ export const notes = [
             '6c288794-47eb-4605-8bdf-785b61a449d3'
         ],
         archived : false,
-        createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(),
+        createdAt: now.set({hour: 7, minute: 12}).minus({day: 2}).toISO(),
         updatedAt: null
     },
     {
@@ -281,7 +284,7 @@ export const notes = [
             '6c288794-47eb-4605-8bdf-785b61a449d3'
         ],
         archived : true,
-        createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(),
+        createdAt: now.set({hour: 17, minute: 14}).minus({day: 100}).toISO(),
         updatedAt: null
     },
     {
@@ -293,7 +296,7 @@ export const notes = [
         reminder : null,
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : true,
-        createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(),
+        createdAt: now.set({hour: 10, minute: 29}).minus({day: 85}).toISO(),
         updatedAt: null
     },
     {
@@ -308,7 +311,7 @@ export const notes = [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
         ],
         archived : true,
-        createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(),
+        createdAt: now.set({hour: 15, minute: 30}).minus({day: 69}).toISO(),
         updatedAt: null
     }
 ];

src/app/mock-api/apps/scrumboard/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const boards = [
     {
@@ -7,7 +10,7 @@ export const boards = [
         title       : 'Admin Dashboard',
         description : 'Roadmap for the new project',
         icon        : 'heroicons_outline:template',
-        lastActivity: moment().startOf('day').subtract(1, 'day').toISOString(),
+        lastActivity: now.startOf('day').minus({day: 1}).toISO(),
         members     : [
             '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
             'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
@@ -19,7 +22,7 @@ export const boards = [
         title       : 'Weekly Planning',
         description : 'Job related tasks for the week',
         icon        : 'heroicons_outline:calendar',
-        lastActivity: moment().startOf('day').subtract(2, 'days').toISOString(),
+        lastActivity: now.startOf('day').minus({day: 2}).toISO(),
         members     : [
             '79ebb9ee-1e57-4706-810c-03edaec8f56d',
             '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
@@ -36,7 +39,7 @@ export const boards = [
         title       : 'Personal Tasks',
         description : 'Personal tasks around the house',
         icon        : 'heroicons_outline:home',
-        lastActivity: moment().startOf('day').subtract(1, 'week').toISOString(),
+        lastActivity: now.startOf('day').minus({week: 1}).toISO(),
         members     : [
             '6f6a1c34-390b-4b2e-97c8-ff0e0d787839'
         ]
@@ -83,7 +86,7 @@ export const cards = [
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
             'f9eeb436-13a3-4208-a239-0d555960a567'
         ],
-        dueDate    : moment().subtract(10, 'days').startOf('day').toISOString()
+        dueDate    : now.startOf('day').minus({day: 10}).toISO()
     },
     {
         id      : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
@@ -105,7 +108,7 @@ export const cards = [
         labels  : [
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
         ],
-        dueDate : moment().startOf('day').toISOString()
+        dueDate : now.startOf('day').toISO()
     },
     {
         id      : '6da8747f-b474-4c9a-9eba-5ef212285500',
@@ -116,7 +119,7 @@ export const cards = [
         labels  : [
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
         ],
-        dueDate : moment().subtract(1, 'day').startOf('day').toISOString()
+        dueDate : now.startOf('day').minus({day: 1}).toISO()
     },
     {
         id      : '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
@@ -167,7 +170,7 @@ export const cards = [
         position: 131072,
         title   : 'Create high fidelity wireframes',
         labels  : [],
-        dueDate : moment().subtract(10, 'day').startOf('day').toISOString()
+        dueDate : now.startOf('day').minus({day: 10}).toISO()
     },
     {
         id      : 'b1da11ed-7896-4826-962d-4b7b718896d4',

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/messages/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const messages = [
     {
@@ -7,7 +10,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-01.jpg',
         title      : 'Gary Peters',
         description: 'We should talk about that at lunch!',
-        time       : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        time       : now.minus({minutes: 25}).toISO(), // 25 minutes ago
         read       : false
     },
     {
@@ -15,7 +18,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-04.jpg',
         title      : 'Leo Gill (Client #8817)',
         description: 'You can download the latest invoices now. Please check and let me know.',
-        time       : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        time       : now.minus({minutes: 50}).toISO(), // 50 minutes ago
         read       : false
     },
     {
@@ -23,7 +26,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-01.jpg',
         title      : 'Sarah',
         description: 'Don\'t forget to pickup Jeremy after school!',
-        time       : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        time       : now.minus({hours: 3}).toISO(), // 3 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -33,7 +36,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-12.jpg',
         title      : 'Nancy Salazar • Joy Publishing',
         description: 'I\'ll proof read your bio on next Monday.',
-        time       : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        time       : now.minus({hours: 5}).toISO(), // 5 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -43,7 +46,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-06.jpg',
         title      : 'Matthew Wood',
         description: 'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!',
-        time       : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        time       : now.minus({hours: 7}).toISO(), // 7 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -53,7 +56,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-04.jpg',
         title      : 'Elizabeth (New assistant)',
         description: 'Boss, I\'ve sent all client invoices but Geoffrey refusing to pay.',
-        time       : moment().subtract(9, 'hours').toISOString(), // 9 hours ago
+        time       : now.minus({hours: 9}).toISO(), // 9 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -63,7 +66,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-06.jpg',
         title      : 'William Bell',
         description: 'Did you see this game? We should hang out and give it a shot sometime.',
-        time       : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        time       : now.minus({day: 1}).toISO(), // 1 day ago
         read       : true,
         link       : 'https://www.google.com',
         useRouter  : false
@@ -73,7 +76,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-09.jpg',
         title      : 'Cheryl Obrien - HR',
         description: 'Why did\'t you still look at the kitten pictures I\'ve sent to you!',
-        time       : moment().subtract(3, 'days').toISOString(), // 3 days ago
+        time       : now.minus({day: 3}).toISO(), // 3 days ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -83,7 +86,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-15.jpg',
         title      : 'Joan Jones - Tech',
         description: 'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?',
-        time       : moment().subtract(4, 'day').toISOString(), // 4 days ago
+        time       : now.minus({day: 4}).toISO(), // 4 days ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true

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.0.0',
+                    title  : '16.0.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },

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

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const notifications = [
     {
@@ -7,14 +10,14 @@ export const notifications = [
         icon       : 'heroicons_solid:star',
         title      : 'Daily challenges',
         description: 'Your submission has been accepted',
-        time       : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        time       : now.minus({minute: 25}).toISO(), // 25 minutes ago
         read       : false
     },
     {
         id         : '6e3e97e5-effc-4fb7-b730-52a151f0b641',
         image      : 'assets/images/avatars/male-04.jpg',
         description: '<strong>Leo Gill</strong> added you to <em>Top Secret Project</em> group and assigned you as a <em>Project Manager</em>',
-        time       : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        time       : now.minus({minute: 50}).toISO(), // 50 minutes ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -24,7 +27,7 @@ export const notifications = [
         icon       : 'heroicons_solid:mail',
         title      : 'Mailbox',
         description: 'You have 15 unread mails across 3 mailboxes',
-        time       : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        time       : now.minus({hour: 3}).toISO(), // 3 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -34,7 +37,7 @@ export const notifications = [
         icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your <em>Docker container</em> is ready to publish',
-        time       : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        time       : now.minus({hour: 5}).toISO(), // 5 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -43,7 +46,7 @@ export const notifications = [
         id         : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
         image      : 'assets/images/avatars/male-06.jpg',
         description: '<strong>Roger Murray</strong> accepted your friend request',
-        time       : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        time       : now.minus({hour: 7}).toISO(), // 7 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -52,7 +55,7 @@ export const notifications = [
         id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
         image      : 'assets/images/avatars/female-04.jpg',
         description: '<strong>Sophie Stone</strong> sent you a direct message',
-        time       : moment().subtract(9, 'hours').toISOString(), // 9 hours ago
+        time       : now.minus({hour: 9}).toISO(), // 9 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -62,7 +65,7 @@ export const notifications = [
         icon       : 'heroicons_solid:mail',
         title      : 'Mailbox',
         description: 'You have 3 new mails',
-        time       : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        time       : now.minus({day: 1}).toISO(), // 1 day ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -72,7 +75,7 @@ export const notifications = [
         icon       : 'heroicons_solid:star',
         title      : 'Daily challenges',
         description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
-        time       : moment().subtract(3, 'days').toISOString(), // 3 days ago
+        time       : now.minus({day: 3}).toISO(), // 3 days ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -82,7 +85,7 @@ export const notifications = [
         icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your Vagrant container is ready to download',
-        time       : moment().subtract(4, 'day').toISOString(), // 4 days ago
+        time       : now.minus({day: 4}).toISO(), // 4 days ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true

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/dashboards/crypto/data.ts

@@ -1,4 +1,7 @@
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 /* tslint:disable:max-line-length */
 export const crypto = {
@@ -628,83 +631,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 154.36
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 154.36
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 146.94
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 146.96
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 146.11
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 150.26
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 146.11
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 150.79
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 145.36
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 141.06
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 140.10
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 138.31
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 138.42
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 138.48
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 138.71
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 148.42
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 146.87
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 147.07
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 135.07
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 135.01
                         }
                     ]
@@ -724,83 +727,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 374.77
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 374.41
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 375.08
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 375.08
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 374.09
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 368.84
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 367.49
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 359.75
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 366.65
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 367.52
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 367.59
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 364.18
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 370.11
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 362.70
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 362.70
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 362.77
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 369.46
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 371.04
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 371.48
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 371.30
                         }
                     ]
@@ -820,83 +823,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 0.258
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 0.256
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 0.255
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 0.255
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 0.254
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 0.248
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 0.247
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 0.249
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 0.246
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 0.247
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 0.247
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 0.244
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 0.250
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 0.242
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 0.251
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 0.251
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 0.251
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 0.249
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 0.242
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 0.240
                         }
                     ]
@@ -916,83 +919,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 62.54
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 61.54
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 62.55
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 60.55
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 59.54
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 58.48
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 54.47
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 51.49
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 51.46
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 53.47
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 52.47
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 54.44
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 59.50
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 62.42
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 61.42
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 60.42
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 58.49
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 57.51
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 54.51
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 51.25
                         }
                     ]
@@ -1012,83 +1015,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 53.54
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 52.54
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 52.55
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 46.44
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 49.50
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 55.42
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 54.42
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 43.49
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 43.46
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 41.47
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 41.47
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 51.55
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 48.54
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 49.48
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 45.47
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 51.42
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 49.49
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 46.51
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 41.51
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 44.25
                         }
                     ]
@@ -1108,83 +1111,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 14.77
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 14.41
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 15.08
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 15.08
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 14.09
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 18.84
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 17.49
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 19.75
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 16.65
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 17.52
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 17.59
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 14.18
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 10.11
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 12.70
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 12.70
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 12.77
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 19.46
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 11.04
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 11.48
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 11.30
                         }
                     ]

src/app/mock-api/dashboards/project/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const project = {
     githubIssues      : {
@@ -148,12 +151,12 @@ export const project = {
     weeklyExpenses    : {
         amount: 17663,
         labels: [
-            moment().subtract(47, 'days').format('DD MMM') + ' - ' + moment().subtract(40, 'days').format('DD MMM'),
-            moment().subtract(39, 'days').format('DD MMM') + ' - ' + moment().subtract(32, 'days').format('DD MMM'),
-            moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'),
-            moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'),
-            moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'),
-            moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM')
+            now.minus({days: 47}).toFormat('dd MMM') + ' - ' + now.minus({days: 40}).toFormat('dd MMM'),
+            now.minus({days: 39}).toFormat('dd MMM') + ' - ' + now.minus({days: 32}).toFormat('dd MMM'),
+            now.minus({days: 31}).toFormat('dd MMM') + ' - ' + now.minus({days: 24}).toFormat('dd MMM'),
+            now.minus({days: 23}).toFormat('dd MMM') + ' - ' + now.minus({days: 16}).toFormat('dd MMM'),
+            now.minus({days: 15}).toFormat('dd MMM') + ' - ' + now.minus({days: 8}).toFormat('dd MMM'),
+            now.minus({days: 7}).toFormat('dd MMM') + ' - ' + now.toFormat('dd MMM')
         ],
         series: [
             {
@@ -165,10 +168,10 @@ export const project = {
     monthlyExpenses   : {
         amount: 54663,
         labels: [
-            moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'),
-            moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'),
-            moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'),
-            moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM')
+            now.minus({days: 31}).toFormat('dd MMM') + ' - ' + now.minus({days: 24}).toFormat('dd MMM'),
+            now.minus({days: 23}).toFormat('dd MMM') + ' - ' + now.minus({days: 16}).toFormat('dd MMM'),
+            now.minus({days: 15}).toFormat('dd MMM') + ' - ' + now.minus({days: 8}).toFormat('dd MMM'),
+            now.minus({days: 7}).toFormat('dd MMM') + ' - ' + now.toFormat('dd MMM')
         ],
         series: [
             {
@@ -180,16 +183,16 @@ export const project = {
     yearlyExpenses    : {
         amount: 648813,
         labels: [
-            moment().subtract(79, 'days').format('DD MMM') + ' - ' + moment().subtract(72, 'days').format('DD MMM'),
-            moment().subtract(71, 'days').format('DD MMM') + ' - ' + moment().subtract(64, 'days').format('DD MMM'),
-            moment().subtract(63, 'days').format('DD MMM') + ' - ' + moment().subtract(56, 'days').format('DD MMM'),
-            moment().subtract(55, 'days').format('DD MMM') + ' - ' + moment().subtract(48, 'days').format('DD MMM'),
-            moment().subtract(47, 'days').format('DD MMM') + ' - ' + moment().subtract(40, 'days').format('DD MMM'),
-            moment().subtract(39, 'days').format('DD MMM') + ' - ' + moment().subtract(32, 'days').format('DD MMM'),
-            moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'),
-            moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'),
-            moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'),
-            moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM')
+            now.minus({days: 79}).toFormat('dd MMM') + ' - ' + now.minus({days: 72}).toFormat('dd MMM'),
+            now.minus({days: 71}).toFormat('dd MMM') + ' - ' + now.minus({days: 64}).toFormat('dd MMM'),
+            now.minus({days: 63}).toFormat('dd MMM') + ' - ' + now.minus({days: 56}).toFormat('dd MMM'),
+            now.minus({days: 55}).toFormat('dd MMM') + ' - ' + now.minus({days: 48}).toFormat('dd MMM'),
+            now.minus({days: 47}).toFormat('dd MMM') + ' - ' + now.minus({days: 40}).toFormat('dd MMM'),
+            now.minus({days: 39}).toFormat('dd MMM') + ' - ' + now.minus({days: 32}).toFormat('dd MMM'),
+            now.minus({days: 31}).toFormat('dd MMM') + ' - ' + now.minus({days: 24}).toFormat('dd MMM'),
+            now.minus({days: 23}).toFormat('dd MMM') + ' - ' + now.minus({days: 16}).toFormat('dd MMM'),
+            now.minus({days: 15}).toFormat('dd MMM') + ' - ' + now.minus({days: 8}).toFormat('dd MMM'),
+            now.minus({days: 7}).toFormat('dd MMM') + ' - ' + now.toFormat('dd MMM')
         ],
         series: [
             {

src/app/mock-api/pages/activities/data.ts

@@ -1,12 +1,15 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const activities = [
     {
         id          : '493190c9-5b61-4912-afe5-78c21f1044d7',
         icon        : 'heroicons_solid:star',
         description : 'Your submission has been accepted',
-        date        : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        date        : now.minus({minutes: 25}).toISO(), // 25 minutes ago
         extraContent: `<div class="font-bold">Congratulations for your acceptance!</div><br>
                         <div>Hi Brian,<br>Your submission has been accepted and you are ready to move into the next phase. Once you are ready, reach out to me and we will ...</div>`
     },
@@ -14,7 +17,7 @@ export const activities = [
         id           : '6e3e97e5-effc-4fb7-b730-52a151f0b641',
         image        : 'assets/images/avatars/male-04.jpg',
         description  : '<strong>Leo Gill</strong> added you to <strong>Top Secret Project</strong> group and assigned you as a <strong>Project Manager</strong>',
-        date         : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        date         : now.minus({minutes: 50}).toISO(), // 50 minutes ago
         linkedContent: 'Top Secret Project',
         link         : '/dashboards/project',
         useRouter    : true
@@ -23,7 +26,7 @@ export const activities = [
         id           : 'b91ccb58-b06c-413b-b389-87010e03a120',
         icon         : 'heroicons_solid:mail',
         description  : 'You have 15 unread mails across 3 mailboxes',
-        date         : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        date         : now.minus({hours: 3}).toISO(), // 3 hours ago
         linkedContent: 'Mailbox',
         link         : '/apps/mailbox',
         useRouter    : true
@@ -32,7 +35,7 @@ export const activities = [
         id           : '541416c9-84a7-408a-8d74-27a43c38d797',
         icon         : 'heroicons_solid:refresh',
         description  : 'Your <strong>Docker container</strong> is ready to publish',
-        date         : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        date         : now.minus({hours: 5}).toISO(), // 5 hours ago
         linkedContent: 'Download the container',
         link         : '.',
         useRouter    : true
@@ -41,20 +44,20 @@ export const activities = [
         id          : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
         image       : 'assets/images/avatars/male-06.jpg',
         description : '<strong>Roger Murray</strong> accepted your friend request',
-        date        : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        date        : now.minus({hours: 7}).toISO(), // 7 hours ago
         extraContent: `You have <span class="font-semibold">8</span> mutual friends.`
     },
     {
         id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
         image      : 'assets/images/avatars/female-04.jpg',
         description: '<strong>Sophie Stone</strong> sent you a direct message',
-        date       : moment().subtract(9, 'hours').toISOString() // 9 hours ago
+        date       : now.minus({hours: 9}).toISO() // 9 hours ago
     },
     {
         id           : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
         icon         : 'heroicons_solid:mail',
         description  : 'You have 3 new mails',
-        date         : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        date         : now.minus({day: 1}).toISO(), // 1 day ago
         extraContent : `<ol class="list-decimal list-inside space-y-2">
                             <li class="font-medium">Please review and sign the attached agreement</li>
                             <li class="font-medium">Delivery address confirmation</li>
@@ -68,7 +71,7 @@ export const activities = [
         id           : 'fd0f01b4-f3de-4333-add5-cd86850279f8',
         image        : 'assets/images/avatars/female-02.jpg',
         description  : '<strong>Tina Harris</strong> started a chat with you',
-        date         : moment().subtract(1, 'day').toISOString(), // 1 day ago,
+        date         : now.minus({day: 1}).toISO(), // 1 day ago,
         linkedContent: 'Go to Chat (Tina Harris)',
         link         : '/apps/chat/5636c0ba-fa47-42ca-9160-27340583041e',
         useRouter    : true
@@ -77,12 +80,12 @@ export const activities = [
         id         : '8f8e1bf9-4661-4939-9e43-390957b60f42',
         icon       : 'heroicons_solid:star',
         description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
-        date       : moment().subtract(3, 'days').toISOString() // 3 days ago
+        date       : now.minus({days: 3}).toISO() // 3 days ago
     },
     {
         id         : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
         icon       : 'heroicons_solid:refresh',
         description: 'Your Vagrant container is ready to download',
-        date       : moment().subtract(4, 'day').toISOString() // 4 days ago
+        date       : now.minus({day: 4}).toISO() // 4 days ago
     }
 ];

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;
 
     /**
@@ -41,7 +40,7 @@ export class IconsMockApi
                 {
                     namespace: 'feather',
                     name     : 'Feather',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                     list     : cloneDeep(this._feather)
                 }
             ]);
@@ -56,7 +55,7 @@ export class IconsMockApi
                 {
                     namespace: 'heroicons_outline',
                     name     : 'Heroicons Outline',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                     list     : cloneDeep(this._heroicons)
                 }
             ]);
@@ -71,26 +70,11 @@ export class IconsMockApi
                 {
                     namespace: 'heroicons_solid',
                     name     : 'Heroicons Solid',
-                    grid     : 5,
+                    grid     : 'icon-size-5',
                     list     : cloneDeep(this._heroicons)
                 }
             ]);
 
-        // -----------------------------------------------------------------------------------------------------
-        // @ Iconsmind icons - GET
-        // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/ui/icons/iconsmind')
-            .reply(() => [
-                200,
-                {
-                    namespace: 'iconsmind',
-                    name     : 'Iconsmind',
-                    grid     : 10,
-                    list     : cloneDeep(this._iconsmind)
-                }
-            ]);
-
         // -----------------------------------------------------------------------------------------------------
         // @ Material solid icons - GET
         // -----------------------------------------------------------------------------------------------------
@@ -101,7 +85,7 @@ export class IconsMockApi
                 {
                     namespace: 'mat_solid',
                     name     : 'Material Solid',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                     list     : cloneDeep(this._material)
                 }
             ]);
@@ -116,7 +100,7 @@ export class IconsMockApi
                 {
                     namespace: 'mat_outline',
                     name     : 'Material Outline',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                     list     : cloneDeep(this._material)
                 }
             ]);
@@ -131,7 +115,7 @@ export class IconsMockApi
                 {
                     namespace: '',
                     name     : 'Material Twotone',
-                    grid     : 6,
+                    grid     : 'icon-size-6',
                     list     : cloneDeep(this._material)
                 }
             ]);

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

@@ -99,7 +99,7 @@
 
                 <!-- Conversation -->
                 <div class="flex overflow-y-auto flex-col-reverse">
-                    <div class="flex flex-col flex-auto flex-shrink p-6 bg-card dark:bg-transparent">
+                    <div class="flex flex-col flex-auto shrink p-6 bg-card dark:bg-transparent">
                         <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
                             <!-- Start of the day -->
                             <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
@@ -114,20 +114,20 @@
                             <div
                                 class="flex flex-col"
                                 [ngClass]="{'items-end': message.isMine,
-                                        'items-start': !message.isMine,
-                                        'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
-                                        'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
+                                            'items-start': !message.isMine,
+                                            'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
+                                            'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
                                 <!-- Bubble -->
                                 <div
                                     class="relative max-w-3/4 px-3 py-2 rounded-lg"
                                     [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
-                                            'bg-gray-500 text-gray-50': !message.isMine}">
+                                                'bg-gray-500 text-gray-50': !message.isMine}">
                                     <!-- Speech bubble tail -->
                                     <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
                                         <div
-                                            class="absolute bottom-0 w-3 transform"
+                                            class="absolute bottom-0 w-3"
                                             [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
-                                                    'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
+                                                        'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
                                             <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
                                         </div>
                                     </ng-container>
@@ -146,7 +146,7 @@
                                     <div
                                         class="my-0.5 text-sm font-medium text-secondary"
                                         [ngClass]="{'mr-3': message.isMine,
-                                                'ml-3': !message.isMine}">
+                                                    'ml-3': !message.isMine}">
                                         {{message.createdAt | date:'HH:mm'}}
                                     </div>
                                 </ng-container>
@@ -179,7 +179,7 @@
                         <button
                             mat-icon-button>
                             <mat-icon
-                                class="transform rotate-90"
+                                class="rotate-90"
                                 [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
                         </button>
                     </div>
@@ -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/contacts.module.ts

@@ -8,15 +8,14 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatLuxonDateModule } from '@angular/material-luxon-adapter';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as moment from 'moment';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
@@ -39,8 +38,8 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
+        MatLuxonDateModule,
         MatMenuModule,
-        MatMomentDateModule,
         MatProgressBarModule,
         MatRadioModule,
         MatRippleModule,
@@ -56,13 +55,13 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
             provide : MAT_DATE_FORMATS,
             useValue: {
                 parse  : {
-                    dateInput: moment.ISO_8601
+                    dateInput: 'D'
                 },
                 display: {
-                    dateInput         : 'LL',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
+                    dateInput         : 'DDD',
+                    monthYearLabel    : 'LLL yyyy',
+                    dateA11yLabel     : 'DD',
+                    monthYearA11yLabel: 'LLLL yyyy'
                 }
             }
         }

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

@@ -17,7 +17,7 @@ export const contactsRoutes: Route[] = [
                 path     : '',
                 component: ContactsListComponent,
                 resolve  : {
-                    tasks    : ContactsResolver,
+                    contacts : ContactsResolver,
                     countries: ContactsCountriesResolver
                 },
                 children : [
@@ -25,7 +25,7 @@ export const contactsRoutes: Route[] = [
                         path         : ':id',
                         component    : ContactsDetailsComponent,
                         resolve      : {
-                            task     : ContactsContactResolver,
+                            contact  : ContactsContactResolver,
                             countries: ContactsCountriesResolver
                         },
                         canDeactivate: [CanDeactivateContactsDetails]

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

@@ -11,7 +11,7 @@
         <!-- Title -->
         <div class="text-4xl font-extrabold tracking-tight">Inventory</div>
         <!-- Actions -->
-        <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+        <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
             <!-- Search -->
             <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
                 <mat-icon

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,25 +2,25 @@
 
     <!-- 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 -->
-    <div class="aspect-w-9 aspect-h-6 mt-8">
-        <div class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-card">
+    <div class="mt-8 aspect-[9/6]">
+        <div class="flex items-center justify-center h-full 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

@@ -89,12 +89,12 @@
                                             <a
                                                 class="z-10 absolute inset-0 flex flex-col p-4 cursor-pointer"
                                                 [routerLink]="['/apps/file-manager/folders/', folder.id]">
-                                                <div class="aspect-w-9 aspect-h-6">
-                                                    <div class="flex items-center justify-center">
+                                                <div class="aspect-[9/6]">
+                                                    <div class="flex items-center justify-center h-full">
                                                         <!-- Icon -->
                                                         <mat-icon
-                                                            class="icon-size-14 text-hint"
-                                                            [svgIcon]="'iconsmind:folder'"></mat-icon>
+                                                            class="icon-size-14 text-hint opacity-50"
+                                                            [svgIcon]="'heroicons_solid:folder'"></mat-icon>
                                                     </div>
                                                 </div>
                                                 <div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
@@ -122,13 +122,13 @@
                                         <a
                                             class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
                                             [routerLink]="['./details/', file.id]">
-                                            <div class="aspect-w-9 aspect-h-6">
-                                                <div class="flex items-center justify-center">
+                                            <div class="aspect-[9/6]">
+                                                <div class="flex items-center justify-center h-full">
                                                     <!-- Icons -->
                                                     <div class="relative">
                                                         <mat-icon
-                                                            class="icon-size-14 text-hint"
-                                                            [svgIcon]="'iconsmind:file'"></mat-icon>
+                                                            class="icon-size-14 text-hint opacity-50"
+                                                            [svgIcon]="'heroicons_solid: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/guides/guide/guide.component.html

@@ -37,7 +37,7 @@
 
             <!-- Next -->
             <a
-                class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transform transition-shadow ease-in-out duration-150"
+                class="mt-8 flex items-center justify-between p-6 sm:px-10 rounded-2xl shadow hover:shadow-lg bg-card transition-shadow ease-in-out duration-150"
                 [routerLink]="'.'">
                 <div>
                     <div class="text-secondary">Next</div>

src/app/modules/admin/apps/help-center/help-center.component.html

@@ -35,7 +35,7 @@
         <!-- Cards -->
         <div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-y-0 md:gap-x-6 w-full max-w-sm md:max-w-4xl -mt-16 sm:-mt-24">
             <!-- FAQs card -->
-            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
+            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
                 <div class="flex flex-col flex-auto items-center p-8 text-center">
                     <div class="text-2xl font-semibold">FAQs</div>
                     <div class="md:max-w-40 mt-1 text-secondary">Frequently asked questions and answers</div>
@@ -53,7 +53,7 @@
                 </div>
             </div>
             <!-- Guides card -->
-            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
+            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
                 <div class="flex flex-col flex-auto items-center p-8 text-center">
                     <div class="text-2xl font-semibold">Guides</div>
                     <div class="md:max-w-40 mt-1 text-secondary">Articles and resources to guide you</div>
@@ -71,7 +71,7 @@
                 </div>
             </div>
             <!-- Support card -->
-            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transform transition-shadow ease-in-out duration-150">
+            <div class="relative flex flex-col rounded-2xl shadow hover:shadow-lg overflow-hidden bg-card transition-shadow ease-in-out duration-150">
                 <div class="flex flex-col flex-auto items-center p-8 text-center">
                     <div class="text-2xl font-semibold">Support</div>
                     <div class="md:max-w-40 mt-1 text-secondary">Contact us for more detailed support</div>

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
     )
     {
     }