Updated version number, packages and the changelog

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

angular.json

@@ -2,7 +2,9 @@
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
     "cli": {
-        "defaultCollection": "@angular-eslint/schematics"
+        "schematicCollections": [
+            "@angular-eslint/schematics"
+        ]
     },
     "newProjectRoot": "projects",
     "projects": {
@@ -31,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",
@@ -139,6 +144,5 @@
                 }
             }
         }
-    },
-    "defaultProject": "fuse"
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
-    "name": "@fuse/demo",
-    "version": "14.2.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.2.3",
-        "@angular/cdk": "13.2.3",
-        "@angular/common": "13.2.3",
-        "@angular/compiler": "13.2.3",
-        "@angular/core": "13.2.3",
-        "@angular/forms": "13.2.3",
-        "@angular/material": "13.2.3",
-        "@angular/material-moment-adapter": "13.2.3",
-        "@angular/platform-browser": "13.2.3",
-        "@angular/platform-browser-dynamic": "13.2.3",
-        "@angular/router": "13.2.3",
-        "@ngneat/transloco": "3.1.4",
-        "apexcharts": "3.33.1",
+        "@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.4.0",
+        "highlight.js": "11.6.0",
         "lodash-es": "4.17.21",
-        "moment": "2.29.1",
-        "ng-apexcharts": "1.7.0",
+        "luxon": "3.0.4",
+        "ng-apexcharts": "1.7.1",
         "ngx-markdown": "13.1.0",
-        "ngx-quill": "16.1.2",
-        "perfect-scrollbar": "1.5.3",
+        "ngx-quill": "19.0.1",
+        "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
-        "rxjs": "7.5.4",
-        "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.2.4",
-        "@angular-eslint/builder": "13.1.0",
-        "@angular-eslint/eslint-plugin": "13.1.0",
-        "@angular-eslint/eslint-plugin-template": "13.1.0",
-        "@angular-eslint/schematics": "13.1.0",
-        "@angular-eslint/template-parser": "13.1.0",
-        "@angular/cli": "13.2.4",
-        "@angular/compiler-cli": "13.2.3",
-        "@tailwindcss/aspect-ratio": "0.4.0",
-        "@tailwindcss/line-clamp": "0.3.1",
-        "@tailwindcss/typography": "0.5.2",
-        "@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.3",
-        "@types/lodash": "4.14.178",
+        "@types/jasmine": "4.0.3",
+        "@types/lodash": "4.14.186",
         "@types/lodash-es": "4.17.6",
-        "@types/node": "12.20.46",
-        "@typescript-eslint/eslint-plugin": "5.12.0",
-        "@typescript-eslint/parser": "5.12.0",
-        "autoprefixer": "10.4.2",
+        "@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.9.0",
-        "eslint-plugin-import": "2.25.4",
-        "eslint-plugin-jsdoc": "37.9.4",
+        "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": "4.0.0",
-        "karma": "6.3.16",
-        "karma-chrome-launcher": "3.1.0",
-        "karma-coverage": "2.1.1",
-        "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.4.6",
-        "tailwindcss": "3.0.23",
-        "typescript": "4.5.5"
+        "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.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/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/default.scss

@@ -337,7 +337,10 @@ fuse-vertical-navigation {
         }
 
         > .fuse-vertical-navigation-item-children {
+
+            > *:first-child {
                 margin-top: 6px;
+            }
 
             > *:last-child {
                 padding-bottom: 6px;

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

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

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

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

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

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

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

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

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

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

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

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

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

src/@fuse/styles/main.scss

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

src/@fuse/styles/overrides/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/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,10 +39,13 @@ const theming = plugin.withOptions((options) => ({
         theme
     }) =>
     {
-        // -----------------------------------------------------------------------------------------------------
-        // @ Map variable colors
-        // -----------------------------------------------------------------------------------------------------
-        const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+        /**
+         * 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) => [
                         [
@@ -114,9 +58,8 @@ const theming = plugin.withOptions((options) => ({
                         ]
                     ])
                 ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
-        ]));
-
-        addComponents(mapVariableColors);
+            ]))
+        );
 
         // -----------------------------------------------------------------------------------------------------
         // @ 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: {
@@ -221,8 +172,7 @@ const theming = plugin.withOptions((options) => ({
                                 'mat-icon'      : colors.slate[400]
                             }
                         }
-                    },
-                    themes     : generateThemesObject(options.themes)
+                    }
                 }
             }
         };

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

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

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
+                // Replace the access token with the new one if it's available on
+                // the response object.
+                //
+                // This is an added optional step for better security. Once you sign
+                // in using the token, you should generate a new one on the server
+                // side and attach it to the response object. Then the following
+                // piece of code can replace the token with the refreshed one.
+                if ( response.accessToken )
+                {
                     this.accessToken = response.accessToken;
+                }
 
                 // Set the authenticated flag to true
                 this._authenticated = true;

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

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

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

@@ -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

@@ -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

@@ -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

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

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

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

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

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

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

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

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

@@ -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);
     }
 
     /**

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.2.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;
 
     /**
@@ -76,21 +75,6 @@ export class IconsMockApi
                 }
             ]);
 
-        // -----------------------------------------------------------------------------------------------------
-        // @ Iconsmind icons - GET
-        // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/ui/icons/iconsmind')
-            .reply(() => [
-                200,
-                {
-                    namespace: 'iconsmind',
-                    name     : 'Iconsmind',
-                    grid     : 'icon-size-10',
-                    list     : cloneDeep(this._iconsmind)
-                }
-            ]);
-
         // -----------------------------------------------------------------------------------------------------
         // @ Material solid icons - GET
         // -----------------------------------------------------------------------------------------------------

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/modules/admin/apps/contacts/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/details/details.component.html

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

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

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

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

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

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

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

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

@@ -2,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/support/support.component.ts

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

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

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

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

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

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

@@ -12,7 +12,7 @@
                 <a
                     class="lg:hidden md:-ml-2"
                     mat-icon-button
-                    [routerLink]="['./']">
+                    [routerLink]="['./../']">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                 </a>
 
@@ -25,9 +25,12 @@
                 </button>
                 <mat-menu #toggleLabelMenu="matMenu">
                     <ng-container *ngFor="let label of labels; trackBy: trackByFn">
-                        <div mat-menu-item>
+                        <div
+                            mat-menu-item
+                            (click)="toggleLabel(label)"
+                            matRipple>
                             <mat-checkbox
-                                (change)="toggleLabel(label)"
+                                class="pointer-events-none"
                                 [color]="'primary'"
                                 [checked]="mail.labels.includes(label.id)"
                                 [disableRipple]="true">
@@ -400,7 +403,7 @@
         <div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
             <mat-icon
                 class="icon-size-24"
-                [svgIcon]="'iconsmind:mailbox_empty'"></mat-icon>
+                [svgIcon]="'heroicons_outline:mail'"></mat-icon>
             <div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
         </div>
 

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

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

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

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

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

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

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

@@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { QuillModule } from 'ngx-quill';
@@ -20,6 +21,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { MailboxComponent } from 'app/modules/admin/apps/mailbox/mailbox.component';
 import { MailboxComposeComponent } from 'app/modules/admin/apps/mailbox/compose/compose.component';
 import { MailboxDetailsComponent } from 'app/modules/admin/apps/mailbox/details/details.component';
+import { MailboxEmptyDetailsComponent } from 'app/modules/admin/apps/mailbox/empty-details/empty-details.component';
 import { MailboxListComponent } from 'app/modules/admin/apps/mailbox/list/list.component';
 import { MailboxSettingsComponent } from 'app/modules/admin/apps/mailbox/settings/settings.component';
 import { MailboxSidebarComponent } from 'app/modules/admin/apps/mailbox/sidebar/sidebar.component';
@@ -30,11 +32,12 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MailboxComponent,
         MailboxComposeComponent,
         MailboxDetailsComponent,
+        MailboxEmptyDetailsComponent,
         MailboxListComponent,
         MailboxSettingsComponent,
         MailboxSidebarComponent
     ],
-    imports     : [
+    imports: [
         RouterModule.forChild(mailboxRoutes),
         MatButtonModule,
         MatCheckboxModule,
@@ -45,6 +48,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MatInputModule,
         MatMenuModule,
         MatProgressBarModule,
+        MatRippleModule,
         MatSelectModule,
         MatSidenavModule,
         QuillModule.forRoot(),
@@ -52,7 +56,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         FuseNavigationModule,
         FuseScrollbarModule,
         FuseScrollResetModule,
-        SharedModule
+        SharedModule,
     ]
 })
 export class MailboxModule

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { Subject, takeUntil } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
@@ -17,7 +17,7 @@ import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.
 export class ScrumboardBoardComponent implements OnInit, OnDestroy
 {
     board: Board;
-    listTitleForm: FormGroup;
+    listTitleForm: UntypedFormGroup;
 
     // Private
     private readonly _positionStep: number = 65536;
@@ -30,7 +30,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _fuseConfirmationService: FuseConfirmationService,
         private _scrumboardService: ScrumboardService
     )
@@ -243,7 +243,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     isOverdue(date: string): boolean
     {
-        return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
+        return DateTime.fromISO(date).startOf('day') < DateTime.now().startOf('day');
     }
 
     /**

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

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { Board } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 
@@ -68,7 +68,7 @@ export class ScrumboardBoardsComponent implements OnInit, OnDestroy
      */
     formatDateAsRelative(date: string): string
     {
-        return moment(date, moment.ISO_8601).fromNow();
+        return DateTime.fromISO(date).toRelative();
     }
 
     /**

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

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialogRef } from '@angular/material/dialog';
 import { debounceTime, Subject, takeUntil, tap } from 'rxjs';
-import * as moment from 'moment';
 import { assign } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, Label } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
 
@@ -19,7 +19,7 @@ export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
     @ViewChild('labelInput') labelInput: ElementRef<HTMLInputElement>;
     board: Board;
     card: Card;
-    cardForm: FormGroup;
+    cardForm: UntypedFormGroup;
     labels: Label[];
     filteredLabels: Label[];
 
@@ -32,7 +32,7 @@ export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
     constructor(
         public matDialogRef: MatDialogRef<ScrumboardCardDetailsComponent>,
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _scrumboardService: ScrumboardService
     )
     {
@@ -237,7 +237,7 @@ export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
      */
     isOverdue(date: string): boolean
     {
-        return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
+        return DateTime.fromISO(date).startOf('day') < DateTime.now().startOf('day');
     }
 
     /**

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

@@ -9,10 +9,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatLuxonDateModule, MAT_LUXON_DATE_FORMATS } 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 * as moment from 'moment';
 import { SharedModule } from 'app/shared/shared.module';
 import { ScrumboardComponent } from 'app/modules/admin/apps/scrumboard/scrumboard.component';
 import { ScrumboardBoardsComponent } from 'app/modules/admin/apps/scrumboard/boards/boards.component';
@@ -43,25 +42,15 @@ import { scrumboardRoutes } from 'app/modules/admin/apps/scrumboard/scrumboard.r
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
+        MatLuxonDateModule,
         MatMenuModule,
-        MatMomentDateModule,
         MatProgressBarModule,
         SharedModule
     ],
     providers   : [
         {
             provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: moment.ISO_8601
-                },
-                display: {
-                    dateInput         : 'll',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
+            useValue: MAT_LUXON_DATE_FORMATS
         }
     ]
 })

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

@@ -49,11 +49,11 @@
                 </mat-menu>
 
                 <!-- Close button -->
-                <button
+                <a
                     mat-icon-button
                     [routerLink]="['../']">
                     <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
-                </button>
+                </a>
             </div>
 
         </div>
@@ -148,9 +148,10 @@
                                             (click)="toggleTaskTag(tag)"
                                             matRipple>
                                             <mat-checkbox
-                                                class="flex items-center h-10 min-h-10"
+                                                class="flex items-center h-10 min-h-10 pointer-events-none"
+                                                [checked]="task.tags.includes(tag.id)"
                                                 [color]="'primary'"
-                                                [checked]="task.tags.includes(tag.id)">
+                                                [disableRipple]="true">
                                             </mat-checkbox>
                                             <div class="ml-1">{{tag.title}}</div>
                                         </div>

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

@@ -1,13 +1,13 @@
 import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, Renderer2, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { debounceTime, filter, Subject, takeUntil, tap } from 'rxjs';
 import { assign } from 'lodash-es';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types';
 import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.component';
 import { TasksService } from 'app/modules/admin/apps/tasks/tasks.service';
@@ -28,7 +28,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
     tagsEditMode: boolean = false;
     filteredTags: Tag[];
     task: Task;
-    taskForm: FormGroup;
+    taskForm: UntypedFormGroup;
     tasks: Task[];
     private _tagsPanelOverlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,7 +39,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _changeDetectorRef: ChangeDetectorRef,
-        private _formBuilder: FormBuilder,
+        private _formBuilder: UntypedFormBuilder,
         private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
@@ -465,7 +465,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
      */
     isOverdue(): boolean
     {
-        return moment(this.task.dueDate, moment.ISO_8601).isBefore(moment(), 'days');
+        return DateTime.fromISO(this.task.dueDate).startOf('day') < DateTime.now().startOf('day');
     }
 
     /**

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

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

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

@@ -10,14 +10,13 @@ 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, MAT_LUXON_DATE_FORMATS } 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 { 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 { tasksRoutes } from 'app/modules/admin/apps/tasks/tasks.routing';
@@ -42,8 +41,8 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
+        MatLuxonDateModule,
         MatMenuModule,
-        MatMomentDateModule,
         MatProgressBarModule,
         MatRadioModule,
         MatRippleModule,
@@ -56,17 +55,7 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
     providers   : [
         {
             provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: moment.ISO_8601
-                },
-                display: {
-                    dateInput         : 'll',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
+            useValue: MAT_LUXON_DATE_FORMATS
         }
     ]
 })

src/app/modules/admin/dashboards/crypto/crypto.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { ApexOptions, ChartComponent } from 'ng-apexcharts';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { CryptoService } from 'app/modules/admin/dashboards/crypto/crypto.service';
@@ -183,7 +183,7 @@ export class CryptoComponent implements OnInit, OnDestroy
                     rotate               : 0,
                     minHeight            : 40,
                     hideOverlappingLabels: true,
-                    formatter            : (value): string => moment().subtract(Math.abs(parseInt(value, 10)), 'minutes').format('HH:mm'),
+                    formatter            : (value): string => DateTime.now().minus({minutes: Math.abs(parseInt(value, 10))}).toFormat('HH:mm'),
                     style                : {
                         colors: 'currentColor'
                     }

src/app/modules/admin/dashboards/project/project.component.html

@@ -26,7 +26,7 @@
                 <!-- Actions -->
                 <div class="flex items-center mt-6 sm:mt-0 sm:ml-2 space-x-3">
                     <button
-                        class="fuse-mat-button-rounded bg-accent-700"
+                        class="bg-accent"
                         mat-flat-button
                         [color]="'accent'">
                         <mat-icon
@@ -35,7 +35,6 @@
                         <span class="ml-2">Messages</span>
                     </button>
                     <button
-                        class="fuse-mat-button-rounded"
                         mat-flat-button
                         [color]="'primary'">
                         <mat-icon

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

@@ -10,6 +10,134 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v16.0.0
+        {
+            version    : 'v16.0.0',
+            releaseDate: 'Oct 04, 2022',
+            changes    : [
+                {
+                    type: 'Breaking',
+                    list: [
+                        '(dependencies) Replaced moment.js with luxon, big thanks to @steveschmitt (https://github.com/steveschmitt) for the PR'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14.2.x',
+                        '(dependencies) Updated various other packages',
+                        '(app.resolvers) Removed the extra user getter call since the user data already comes with the sign-in process to prevent confusion for the newcomers',
+                        '(ui/forms/fields) Added examples for number input'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(FuseVerticalNavigation) Fixed: Sticky positioning breaks inside a fixed positioned parent (Firefox)',
+                        '(layout/common/quick-chat) Fixed: Sticky positioning breaks inside a fixed positioned parent (Firefox)',
+                        '(apps/mailbox) Fixed: Back button on details view is not working'
+                    ]
+                }
+            ]
+        },
+        // v15.2.0
+        {
+            version    : 'v15.2.0',
+            releaseDate: 'Aug 22, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14.1.3',
+                        '(dependencies) Updated various other packages'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/tailwind/plugins/theming) Simplified the plugin and added more detailed comments',
+                        '(tailwind.config) Fixed: typo on comment',
+                        '(tailwind) Removed the "aspect-ratio" plugin in favor of the included "aspect" utility',
+                        '(layout/common/messages) Fixed: Wrong color classes on "No Messages" icon',
+                        '(layout/common/notifications) Fixed: Wrong color classes on "No Notifications" icon',
+                        '(layout/common/shortcuts) Fixed: Wrong color classes on "No Shortcuts" icon',
+                        '(dashboards/project) Removed unnecessary classes from the buttons',
+                        '(apps/mailbox) Better label toggle behavior',
+                        '(apps/tasks) Better tag toggle behavior',
+                        '(docs) Fixed: Typos'
+                    ]
+                }
+            ]
+        },
+        // v15.1.0
+        {
+            version    : 'v15.1.0',
+            releaseDate: 'Jul 21, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14.1.0',
+                        '(dependencies) Updated various other packages'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/overrides/angular-material) mat-hint position is not working correctly on fields'
+                    ]
+                }
+            ]
+        },
+        // v15.0.0
+        {
+            version    : 'v15.0.0',
+            releaseDate: 'Jun 03, 2022',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(@fuse/navigation) Added "fragment" and "queryParams" support along with "preserveFragment" and "queryParamsHandling" on navigation items',
+                        '(@fuse/overrides/quill) Added tooltip styles for better compatibility',
+                        '(@fuse/services/platform) Added platform checker service',
+                        '(global) Added custom scrollbar styling for platforms other than macOS and iOS',
+                        '(layout/common/search) Implemented the new MatAutocomplete "autoSelectActiveOption" functionality'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14',
+                        '(dependencies) Updated various other packages',
+                        '(global) Replace @import with @use in scss files',
+                        '(global) Replaced linked buttons with a tags + removed unnecessary routerLink attributes from some buttons',
+                        '(global) BREAKING: Replaced iconsmind icons with heroicons and removed the iconsmind because of the bundle size concerns',
+                        '(global) Replaced "FormBuilder" and "FormGroup" types with "UntypedFormBuilder" and "UntypedFormGroup"',
+                        '(FuseDrawer) Updated the overlay and animation handling code for better stability',
+                        '(@fuse/overrides/quill) Better scrolling for Quill editor',
+                        '(auth) Made the renewing token on "sign-in-with-token" process an optional step to simplify the login process',
+                        '(auth) Changed the url on "signInUsingToken" method to reflect the mock-api changes',
+                        '(mock-api) Replaced the "refresh-access-token" url with "sign-in-with-token"'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/navigation) Collapse animation doesn"t work smoothly because of the parent"s margin',
+                        '(@fuse/service/confirmation) Cleaned-up the dialog component',
+                        '(layout) The theme settings cog is not positioned correctly in Empty layout',
+                        '(auth/sign-up) Missing ngForm reference',
+                        '(apps/academy) Ring outside the current step"s number is not visible',
+                        '(apps/chat) Empty route related issues',
+                        '(apps/chat) Empty route related issues',
+                        '(apps/mailbox) Empty route related issues',
+                        '(apps/mailbox) Quill editor tooltips are not positioning correctly',
+                        '(mock-api/file-manager) http params are not working properly because of the new string conversion',
+                        '(ui/page-layouts) Toggle button selected background is not visible'
+                    ]
+                }
+            ]
+        },
         // v14.2.0
         {
             version    : 'v14.2.0',

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

@@ -135,7 +135,7 @@
                 <p class="font-medium">on-primary, on-accent, on-warn</p>
                 These are the 3 main contrasting color palettes of the theme. They can be either a complete or a partial
                 Tailwind color palette. By default, Fuse will automatically generate contrasting colors using the colors
-                from "Primary", "Accent" and "Warn" palettes but for some reason, if you more control over the contrasting
+                from "Primary", "Accent" and "Warn" palettes but for some reason, if you want more control over the contrasting
                 colors, you can use these objects to customize them.
             </li>
         </ul>
@@ -181,7 +181,7 @@
                 },
 
                 // Here we define the "Accent" palette for the default theme.
-                // It uses the default "blue-gray" color palette from Tailwind's default
+                // It uses the default "slate" color palette from Tailwind's default
                 // color palettes and sets the 800 hue level as the DEFAULT color.
                 accent   : {
                     ...colors.slate,

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

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

src/app/modules/admin/pages/activities/activities.component.html

@@ -21,7 +21,7 @@
                                 <ng-container *ngIf="first || !isSameDay(activity.date, activities[i - 1].date)">
                                     <li class="relative flex py-7">
                                         <div class="relative py-2 px-8 text-md font-medium leading-5 rounded-full bg-primary text-on-primary">
-                                            {{getRelativeFormat(activity.date)}}
+                                            {{getRelativeFormat(activity.date) | titlecase}}
                                         </div>
                                     </li>
                                 </ng-container>

src/app/modules/admin/pages/activities/activities.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Observable } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { Activity } from 'app/modules/admin/pages/activities/activities.types';
 import { ActivitiesService } from 'app/modules/admin/pages/activities/activities.service';
 
@@ -46,7 +46,7 @@ export class ActivitiesComponent implements OnInit
      */
     isSameDay(current: string, compare: string): boolean
     {
-        return moment(current, moment.ISO_8601).isSame(moment(compare, moment.ISO_8601), 'day');
+        return DateTime.fromISO(current).hasSame(DateTime.fromISO(compare), 'day');
     }
 
     /**
@@ -56,22 +56,7 @@ export class ActivitiesComponent implements OnInit
      */
     getRelativeFormat(date: string): string
     {
-        const today = moment().startOf('day');
-        const yesterday = moment().subtract(1, 'day').startOf('day');
-
-        // Is today?
-        if ( moment(date, moment.ISO_8601).isSame(today, 'day') )
-        {
-            return 'Today';
-        }
-
-        // Is yesterday?
-        if ( moment(date, moment.ISO_8601).isSame(yesterday, 'day') )
-        {
-            return 'Yesterday';
-        }
-
-        return moment(date, moment.ISO_8601).fromNow();
+        return DateTime.fromISO(date).toRelativeCalendar();
     }
 
     /**